【初心者向け】Cocoonのカスタマイズと使い方【WordPress設定】

想定読者

Cocoonのカスタマイズに興味がある方「Cocoonのカスタマイズ全てを知り尽くしたい。」

本記事は、上記の方に向けて執筆しています。

本記事の内容

  • Cocoonの初期設定
  • Cocoonのヘッダー設定
  • Cocoonのトップページ設定
  • Cocoonのサイドバー設定

本記事では、Cocoonの使い方|全てのカスタマイズを網羅していく予定です。

Cocoon以外のWordPressテーマで運営したい方は下記の記事をご覧ください。

記事の内容

サイト運営者

ブログアイコン例:おにちゃん
おにちゃん(22歳)
@onityanzyuku01

大学4年|経済学部(現在休学中)

おにちゃん塾を3年ほど運営しております。副業、フリーランス、独立までの情報を網羅していく予定です。

Cocoonの初期設定|使い方を解説

まずは、Cocoonの初期設定を行なっていきます。

Cocoonの初期設定
  1. Cocoonのインストール
  2. スキンの設定
  3. SEO対策


Cocoonのインストール

Cocoon公式サイトで親テーマをインストール

まずは、Cocoon公式サイトにて、親テーマをインストールしましょう。

Cocoon公式サイトで子テーマをインストール

次に、子テーマをインストールしていきます。

親・子のインストールが終わりましたら、WordPressの管理画面へ戻りましょう。

外観<テーマ<新規追加<テーマのアップロードをクリックしてください。

ZIP形式のアップロード
ZIP形式のアップロード

このような画面が表示されますので、先ほどダウンロードしたzipファイルを追加していきます。

cocoon-master-2.3.8.zip
cocoon-master-2.3.8.zip

cocoon-master-2.3.8.zipを開き、その後【今すぐインストール】をクリックします。数秒で解凍されるので少し待ちましょう。

解凍されたら、有効化を行います。
同じような流れで、子テーマもアップロード→有効化を行っていきましょう。

Cocoonのインストール完了
Cocoonのインストール完了

この画面になっている方は、子テーマのインストールも完了したサインです。


スキンの設定→おしゃれなテンプレート

Cocoonではスキン機能が実装されています。

スキンの設定→おしゃれなテンプレート
スキンの設定→おしゃれなテンプレート

僕が運営するサブサイトでは「Natural(ブルー)」を活用しています。

スキン機能を使うことで、コーディングスキルのないブログ運営者でもプロレベルのデザインを実装することができます。

今回は、僕が使用しているNatural(ブルー)に設定を変更してみましょう。

Cocoon設定<スキン
Cocoon設定<スキン

まずはCocoon設定へ移動し、スキンの項目をクリックします。

Natural(ブルー)
Natural(ブルー)

画面を下にスクロールすると、上記の画像のように色々な項目が現れますので、「Natural(ブルー)」に設定を変更しましょう。

おにちゃん

たったこれだけでスキンの設定は完了です。


Cocoonの初期設定|SEO対策

Cocoonに限らず、ブログ運営をするのであればSEO対策は必要です。

SEO対策とは:特定の記事をGoogle検索上位に表示させる対策

具体的に、本記事では「Cocoon カスタマイズ」を狙って記事を書いています。
こんな感じで、ブログ収益化していくならSEO対策は必須です。

おにちゃん

CocoonのSEO対策設定を下記の記事で詳しく紹介しています。
ぜひご覧ください。


Cocoonの使い方|ヘッダー設定のカスタマイズ

ここからは、Cocoonの使い方|ヘッダー設定のカスタマイズについて解説していきます。

Cocoonのヘッダーでカスタマイズできる部分は下記の3つです。

  1. ヘッダーロゴのカスタマイズ
  2. ヘッダーメニューのカスタマイズ
  3. ヘッダーアピールエリアのカスタマイズ
おにちゃん

1つずつ解説していきます。


ヘッダーロゴのカスタマイズ

ヘッダーロゴのカスタマイズ
ヘッダーロゴのカスタマイズ

SIB部分のヘッダーロゴを「Cocoon機能」でカスタマイズしていきましょう。

カスタマイズできる部分

  1. ヘッダーレイアウト
  2. ヘッダーの高さ
  3. ヘッダーのキャッチフレーズ
  4. ヘッダー背景画像
おにちゃん

上記に加えて、Cocoonヘッダーロゴ画像を設定する方法を下記の記事で詳しく解説しています。


ヘッダーメニューの設置

ここでは簡単にヘッダーメニューを設置する方法を解説していきます。

まず、WordPress管理画面<外観<メニューへ移動してください。

Cocoonヘッダーメニューを追加する
Cocoonヘッダーメニューを追加する
  • メニュー名
  • メニュー設定:「ヘッダーメニュー」「ヘッダーモバイルメニュー」にチェックを入れる
おにちゃん

チェックを入れましたら、保存をクリックしましょう。

メニューに追加をクリック
メニューに追加をクリック

後は、好きなページを追加するだけです。
おにちゃん塾では、サンプルページを追加してみました。追加を終えましたら、【メニューを保存】を必ずクリックしましょう。

Cocoonヘッダーメニューの完成版
Cocoonヘッダーメニューの完成版
おにちゃん

正しく、ヘッダーメニューが追加されています。


ヘッダーアピールエリアのカスタマイズ

ヘッダーアピールエリアのカスタマイズ
ヘッダーアピールエリアのカスタマイズ

アピールエリアとは、読者が思わず立ち止まってしまう場所です。

上記の機能をカスタマイズすることで、ユーザーの回遊率を高めることができるので、絶対に設定しましょう。

カスタマイズできる部分

  1. 高さ
  2. エリア
  3. テキストメッセージ
  4. ボタン
おにちゃん

上記に加えて、色合いやボックスなどをカスタマイズすることができます。
ぜひ、下記の記事をご覧ください。


Cocoonの使い方|トップページ設定のカスタマイズ

ここからは、Cocoon使い方|トップページ設定のカスタマイズについて解説していきます。
トップページでのカスタマイズは2つほど紹介させて戴きます。

  1. おすすめカードのカスタマイズ
  2. インデックスカードのカスタマイズ
おにちゃん

上記を詳しく解説していきます。


おすすめカードのカスタマイズ

おすすめカードとは、サイトページの上部分に掲載されている記事を意味しています。

Cocoonの初期機能で、ある程度のおすすめカードは簡単に設置可能です。

おにちゃん

上記に加えて、CSSでカスタマイズする方法を下記の記事で詳しく紹介していますので、ぜひご覧ください。


インデックスカードのカスタマイズ

Cocoonのインデックスカードとは、記事一覧リストを意味しています。

インデックスカードの完成品
インデックスカードの完成品
インデックスカードの完成品
インデックスカードの完成品
おにちゃん

初期設定のイメージとしては上記のような感じです。

初期設定に簡単なCSSを追加することで、流行りのWebデザインにすることができます。
詳しい解説は下記の記事で紹介していますので、ぜひご覧ください。


Cocoonの使い方|サイドバー設定のカスタマイズ

ここからは、Cocoonの使い方|サイドバー設定のカスタマイズを解説していきます
サイドバーでのカスタマイズを4つほど紹介させていただきます。

  1. サイドバー基本設定
  2. プロフィールのカスタマイズ
  3. 人気記事のカスタマイズ
  4. Twitterを埋め込む
おにちゃん

上記を詳しく解説していきます。


サイドバー基本設定

サイドバー基本設定
サイドバー基本設定

Cocoonサイドバーの初期設定は上記画像の様に設定されています。
そのままですと、デザイン的に良くないので、改善する必要があります。

Cocoonサイドバーおすすめ配置

  • 検索窓
  • プロフィール
  • カテゴリー
  • タグ
  • 人気記事
  • Twitter
おにちゃん

上記のような配置を正しく作る方法を下記の記事で紹介していますので、ぜひご覧ください。


プロフィールのカスタマイズ

プロフィールのカスタマイズ
プロフィールのカスタマイズ

Cocoonには初期機能として「プロフィール機能」が実装されています。
ただ、初期機能のままだとデザイン的に質素なので、CSSを使ってカスタマイズしてみましょう。

CSSカスタマイズしている部分

  1. 背景画像の指定
  2. SNSアカウント
おにちゃん

コピペでできるカスタマイズを下記の記事で紹介していますので、ぜひご覧ください。


人気記事のカスタマイズ

人気記事のカスタマイズ
人気記事のカスタマイズ

Cocoonには初期機能として「ランキング|人気記事機能」が実装されています。

そのままでも素晴らしい機能ですが、カスタマイズすることでより素晴らしいデザインにすることができます。

おにちゃん

詳しい実装方法は下記の記事をご覧ください。


Twitterを埋め込む

Cocoonに限らず、Twitterの埋め込みは比較的簡単に実装できます。

STEP
Twitter Publishにアクセスする

まずはhttps://publish.twitter.com/にアクセスしましょう。

STEP
Twitter URLを貼り付けてサイズ指定
Twitter URLを貼り付けてサイズ指定
Twitter URLを貼り付けてサイズ指定
おにちゃん

ご自身のTwitterアカウント名を貼り付けて、→をクリックしましょう。

クリック後、「Embedded Timeline」と「Twitter Buttons」を選べます。
今回は「Embedded Timeline」を選択しましょう。

その後、【set customization options】が表示されますので、そちらのリンクをクリックしHeight(px)の値を400に設定に【update】をクリックしましょう。

STEP
Copy Code後 ウィジェットに貼り付ける

Copy Codeをクリックし、WordPress管理画面<外観<ウィジェット<テキストを選択しサイドバーに設置しましょう。

Copy Code後 ウィジェットに貼り付ける
Copy Code後 ウィジェットに貼り付ける

設置した後は保存し、サイドバーを確認しましょう。

CocoonTwitterの埋め込み完了
CocoonTwitterの埋め込み完了
おにちゃん

このように表示されていれば、問題なしです。


まとめ:Cocoonの初期設定と使い方|カスタマイズはおにちゃん塾を参考にしよう

ここまでで【初心者向け】Cocoonのカスタマイズと使い方【WordPress設定】の解説は以上です。

本記事のまとめ
  • Cocoonの初期設定
  • Cocoonヘッダーのカスタマイズ
  • Cocoonサイドバーのカスタマイズ
おにちゃん

本記事は以上です。
最後までご覧頂きありがとうございました。


Cocoonユーザー向けTwitterアカウント

おにちゃん塾の運営者(@onityanzyuku01)ではブログ関連の情報を随時発信しています。

  1. ブログ運営
  2. アフィリエイト収益化
  3. SEO対策含むWebマーケティング
おにちゃん

上記を知りたい方はぜひフォローしてください。


Cocoonではないテーマでブログ運営したい方

Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。

おにちゃん

今、稼いでいるブロガー達はこぞってSWELLを活用しています。

デザイン性+機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。

有料テーマに挑戦したい方はSWELLがおすすめです。


Cocoonを本格的にカスタマイズしたい方

→プログラミングを学びましょう。

Cocoon含む、WordPressを扱うためには下記の言語が必要です。

  1. HTML
  2. CSS
  3. JavaScript(React)
  4. PHP(WordPress)
おにちゃん

おにちゃん塾で、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。

URLをコピーする
URLをコピーしました!
記事の内容
閉じる