WordPressテーマ『Cocoon』の初期設定と使い方【初心者向け】

WordPressテーマ『Cocoon』の初期設定と使い方【初心者向け】 Cocoonの使い方

※ 当ブログではアフィリエイト広告を利用しています。

今回はWordPressテーマ『Cocoon(コクーン)』導入後の初期設定と使い方をご紹介していきます。

初期設定に関しては、初めてWordPressを使う初心者の方でも迷わないよう分かりやすく解説します。

覚えておくと便利な使い方もお伝えしていきますので、ぜひ参考にしてみてください。

Cocoonは高機能な分、設定項目がたくさんありますが、焦らず一つずつ確実に設定を行っていきましょう。

スポンサーリンク

Cocoonの初期設定と基本的な使い方

動画でも解説していますので、合わせて参考にしてみてください。

子テーマを有効化

Cocoonのダウンロードページには、親テーマと子テーマが用意されています。
⇒ Cocoonのダウンロードページはこちら

Cocoonを使う時は親と子の両方をインストールして、子テーマを有効化してください。

Cocoonは子テーマを有効化

イメージとしては、親テーマがメインで不具合や修正などがあった場合に更新で対応し、子テーマがカスタマイズの記録用のような感じです。(基本的に子テーマは更新不要)

親テーマだけでは更新の際にカスタマイズした箇所が初期化されてしまう可能性がありますし、子テーマだけでは動作しません。

ですから、親テーマ、子テーマと順番にインストールをして、子テーマのほうを有効化しておきましょう。

ウィジェット

ウィジェットでは主にサイドバーの設定を行います。

初期設定では『メタ情報』というメニューが入っていますが、読者さんには不要なので外しておきましょう。

基本的には『サイト検索』『最近の投稿』『カテゴリー』の3つは入れておくことをオススメします。

Cocoonのウィジェット設定

それ以外は好みで設定して構いませんが、とりあえず最初は最低限の設定だけで大丈夫です。

いつでも変更できますので、運営しながらアピールしたいコンテンツや、ニーズがありそうなコンテンツを入れ替えてみてください。

サイトマップ

CocoonでHTMLサイトマップページを作る際は、sitemapのショートコードを入れるだけでOKです。

Cocoonのサイトマップのショートコード

HTMLサイトマップページはなくても構いませんが、ないよりはあったほうが読者さんに喜ばれます。

プラグイン不要で、ショートコードだけで簡単に作成できますので、最初にサクッと作っておきましょう。

スキン選択

ここからは『Cocoon設定』内で行う設定について解説していきます。

まずは『スキン』の選択です。

Cocoon設定のスキン選択

こちらでは『スキン一覧』から選択するだけで、簡単にブログの外観を変更できますので、ぜひ自分好みをデザインを選んでみてください。

ちなみに、このブログsattoga.comでは『COLORS(グリーン)』を選択しています。

全体設定・本文

Cocoon設定の全体設定

Cocoonの『全体設定』では、ページ全体の表示に関する設定を行います。

  • サイトの背景色や背景画像
  • フォントの種類やサイズ
  • モバイル用のフォント設定
  • リンク色の設定
  • サイドバーの表示設定

このブログでは特に何も変更しておらず、デフォルトのままにしていますが、変更したい方はお好みで設定してみてください。

 

また、記事の行間は『Cocoon設定 ⇒ 本文』から変更可能です。

Cocoon設定の本文

ヘッダー

Cocoon設定のヘッダー設定

Cocoonの『ヘッダー設定』では、ヘッダーの表示設定を行います。

  • ヘッダーのロゴ画像
  • キャッチフレーズの表示
  • ヘッダーの背景画像や配色
  • グローバルナビの配色

 

このブログでは背景画像は設定せずに、ロゴ画像のみ設定しています。

さっとがのヘッダーロゴ画像の設定

タイトル

Cocoon設定のタイトル設定

Cocoonの『タイトル設定』では、主に2つの設定を行います。

 

まず一つ目が、検索エンジンの検索結果での表示方法について。

検索エンジンの検索結果での表示方法

表示される検索エンジンによって変わることもありますが、こちらでは検索結果にどのような形式で表示させるか選択できるようになっています。

なお、サイト名にキャッチフレーズを含めると長くなりすぎるので、このブログでは『サイト名』のみにしています。

また、上記の画像はTOPページの設定ですが、投稿ページや固定ページ用の設定も、こちらで選択できます。

このブログでは、投稿ページ・固定ページ用の設定では『ページタイトル | サイト名』にしています。

 

二つ目が『メタディスクリプション・メタキーワード』を設定するかどうかの選択です。

『メタディスクリプション・メタキーワード』を設定するかどうかの選択

こちらにチェックを入れておけば、投稿・固定ページでメタディスクリプションとメタキーワードが設定できるようになります。

現在は「メタキーワードを入れてもSEO効果はない」と言われていますが、入れていても損はありませんので、僕は全ての記事で設定するようにしています。

なので、メタキーワードにチェックは入れなくても構いませんが、メタディスクリプションにはチェックを入れておき、記事作成時には毎回個別に設定するようにしましょう。

SEO

Cocoon設定のSEO設定

Cocoonの『SEO設定』では、主に2つの設定を行います。

 

まず一つ目が、カテゴリー・タグ・アーカイブ・添付ファイルをインデックスさせるかどうか?の設定です。

カテゴリー・タグ・アーカイブ・添付ファイルをインデックスさせるかどうか?の設定

こちらにチェックを入れていれば『noindex=検索エンジンに載せない』という設定になります。

「検索エンジンに載せたほうがいいんじゃないの?」と思われるかもしれませんが、基本的にSEOでの集客は記事ページで行います。

カテゴリー・タグ・アーカイブは記事ページの集合体なので、検索エンジンにインデックスさせ過ぎると、同じようなページが増えてしまい、逆にSEOでは不利と考えられています。

ただし、カテゴリーだけは記事が増えれば同じジャンルの記事の集合体として一定の価値がありますので、1ページ目だけインデックスさせておいて、2ページ目以降はnoindexにしておくのがオススメです。

また、添付ファイルも画像1枚1枚をインデックスさせると逆に評価が下がる恐れがあるため、noindexを推奨します。

 

次に二つ目が『表示する日付』の設定です。

『表示する日付』の設定

こちらは「いつ記事を公開して、いつ更新されたか?」を検索エンジンに伝えるために『投稿日・更新日』の両方を表示させるのがオススメです。

 

なお、Cocoonの『SEO設定』では、他にもこの3つの設定があります。

  • canonicalタグの追加
  • 分割ページにrel=”next”/”prev”タグの追加
  • JSON-LDを出力

この3つは最初からチェックが入っていると思いますので、そのままでOKです。

アクセス解析設定

Cocoon設定のアクセス解析設定

Cocoonの『アクセス解析設定』では、主に3つの設定を行います。

 

まず一つ目が「サイト管理者も含めてアクセス解析するかどうか?」の設定です。

「サイト管理者も含めてアクセス解析するかどうか?」の設定

こちらにチェックが入っていると、自分自身が管理画面にログインしている際、ブログのページを見た時のPVもカウントされてしまいます。

より正確にアクセス解析を行いたい場合はチェックを外しておきましょう。

 

次に『Google Analytics設定』です。

CocoonのGoogle Analytics設定

こちらには、Googleアナリティクスに登録して取得したトラッキングIDを設定します。

 

最後に『Google Search Console設定』です。

CocoonのSearch Console設定

こちらには、Googleサーチコンソールの登録に必要な認証IDを入力します。

インデックス

Cocoon設定のインデックス設定

Cocoonの『インデックス設定』では、最新記事やカテゴリーページなど、記事一覧ページの表示形式が選択できます。

 

ちなみに、このブログでは「カードタイプ」を「縦型カード2列」にしています。

「カードタイプ」を「縦型カード2列」

この設定でも読者さんに与える印象が大きく変わりますので、自分好みのデザインを選択してみてください。

投稿・関連記事

Cocoon設定の投稿設定

Cocoonの『投稿設定』では、投稿ページに関する設定を行います。

  • カテゴリ・タグの表示設定
  • 関連記事設定
  • ページ送りナビ設定
  • コメント設定
  • パンくずリスト設定

このブログではコメントを受け付けていないので、「コメント設定」はチェックを外して非表示にしています。

それ以外は特に何も変更せず初期設定のままですが、関連記事設定では、デザインや表示させる記事数などの変更ができますので、お好みで変更してみることをオススメします。

固定ページ

Cocoon設定の固定ページ設定

Cocoonの『固定ページ設定』では、固定ページに関する設定を行います。

  • コメント設定
  • パンくずリスト設定

このブログでは、投稿ページと同様に固定ページでも「コメント設定」はチェックを外して非表示にしています。

「パンくずリスト設定」は初期設定のままにしています。

目次

Cocoon設定の目次の設定

Cocoonの『目次設定』では「目次の表示/非表示」のほかに、「どのように表示させるか?」も設定可能です。

  • 目次を表示させるページの種類
  • 目次のタイトル(例:目次)
  • 目次切り替え
  • 最初から目次内容を表示させるかどうか?
  • 表示条件
  • 目次表示の深さ
  • 目次ナンバーの表示
  • 目次の中央表示
  • 目次の表示順
  • 見出し内タグ

目次には「SEO効果」と「読者さんの利便性アップ」という2つのメリットがありますので、表示させたほうが良いです。

細かい設定に関してはお好みで構いませんので、色々と試しながら変更してみてください。

設定が面倒な方は、とりあえず表示だけしておいて、その他は何も変更しなくてもOKです。

SNSシェア

Cocoon設定のSNSシェア設定

Cocoonの『SNSシェア設定』では、以下の9つのシェアボタンの、表示位置(記事上・記事下)、表示ページ、デザインなどが選択できます。

  • Twitter
  • Facebook
  • はてなブックマーク
  • Pocket
  • LINE@
  • Pinterest
  • LinkedIn
  • タイトルとURLをコピー
  • コメント

 

これも好みですが、このブログではこのような設定にしていますので、よろしければ参考にしてみてください。

  • 記事下(ボトム)のみ表示
  • Twitter、Facebook、はてな、Pocket、LINE、タイトルとURLをコピー
  • 投稿ページのみ表示
  • カラー:白抜き
  • カラム数:3列

SNSフォロー・プロフィール

Cocoon設定のSNSフォロー設定

Cocoonの『SNSフォロー設定』では、各SNSに加えて、FeedlyとRSSのボタンも設置できます。

FeedlyとRSSのボタンはチェックを入れるだけですが、他のSNSは『ユーザー ⇒ プロフィール』で設定したアカウントのフォローボタンが表示されるようになります。

ちなみに、このブログでも以前はフォローボタンを設置していましたが、現在は設置していません。

記事下にプロフィールを設置しており、その中にフォローボタンが表示されているので、被ってしまうからです。

なので、フォローボタンではなくプロフィールを設置したいという方は、こちらの記事を参考にしてください。

画像

Cocoon設定の画像の設定

Cocoonの『画像設定』では、主にアイキャッチ画像の設定ができます。

  • 本文上のアイキャッチの表示/非表示
  • アイキャッチラベルの表示/非表示
  • アイキャッチの中央寄せ
  • アイキャッチ自動設定を有効にする
  • 画像の囲み効果
  • 画像の拡大効果
  • サムネイル画像の比率
  • NO IMAGE画像

自動で本文上にアイキャッチを表示させると、WordPressのテーマを変更した際に、変更後のテーマも同様の機能がないと、本文上に画像が表示されなくなってしまいます。

 

このブログでも以前は本文上のアイキャッチは非表示にして、自分で画像を設定していました。

しかし、しばらくはCocoonを使い続けるつもりなので、現在は表示にしています。

なので、テーマを変更する予定がある方、もしくは他のテーマから変更してきた方は、このアイキャッチ画像の設定は、よく考えて行うことをオススメします。

フッター

Cocoon設定のフッター設定

Cocoonの『フッター設定』では、フッターの色やクレジット表示などが設定できます。

こちらはお好みで設定してみてください。

このブログでは配色はデフォルトのままで、表示タイプは『メニュー&クレジット(中央揃え)』にしています。

エディター

Cocoon設定のエディター設定

Cocoonの『エディター設定』では、投稿画面で『Gutenbergエディター』と『旧エディター』のどちらを使うか?が選択できます。

 

『Gutenbergエディターを有効にする』にチェックが入っていると、

『Gutenbergエディターを有効にする』にチェックが入っている

このようなGutenbergエディターの投稿画面になります。

Gutenbergエディターの投稿画面

 

また、『Gutenbergエディターを有効にする』のチェックを外すと、

『Gutenbergエディターを有効にする』のチェックを外す

このような旧エディター(クラシックエディター)の投稿画面になります。

旧エディターの投稿画面

どちらを使うかは好みですが、旧エディターのサポートは2021年末で切れるようなので、できればGutenbergエディターに慣れていったほうが良いでしょう。

僕も未だに旧エディターを使い続けていますが、徐々に慣れていこうと思っています。

スポンサーリンク

Cocoonの使い方【応用編】

ここからは応用編として、覚えておくと便利なCocoonの使い方を解説していきます。

グローバルメニュー

WordPressのグルーバルメニューは『外観 ⇒ メニュー』から作成します。

WordPressの『外観 ⇒ メニュー』

 

Cocoonではメニューの位置で『ヘッダーメニュー』にチェックを入れると、作ったメニューがグローバルメニューになります。

メニューの位置で『ヘッダーメニュー』にチェック

スライドショー

Cocoon設定のカルーセル

Cocoon設定の『カルーセル』機能を使うと、ヘッダー下にこのようなスライドショーを設置することができます。

ヘッダー下にスライドショー

 

『カルーセルの表示』でスライドショーを表示させたいページのタイプを選ぶだけで、簡単に設置できます。

カルーセルの表示

表示させるカテゴリーやオートプレイなど、お好みに合わせて細かく設定することも可能となっています。

SNS用画像(OGP)の設定

Cocoon設定のOGP

Cocoonを使っているブログのトップページのURL(例:http://sattoga.com/)をSNSに掲載すると、デフォルトではCocoonの画像が表示されます。

その画像は、Cocoon設定の『OGP』で変更可能です。

一番下のホームイメージに設定した画像が、トップページのSNS用画像になります。

OGPのホームイメージ

アピールエリア

Cocoon設定のアピールエリア

Cocoon設定の『アピールエリア』を利用すると、ヘッダー下に画像と合わせて読んでほしい記事のリンクを設置することができます。

テキストエリア表示にチェックを入れた場合

表示させるページやボタンの色など、細かく設定することが可能です。

ブログカード

Cocoon設定のブログカード

Cocoonでは記事内にURLをそのまま入力するだけで、リンクをこのようにおしゃれなカードタイプにして表示させることができます。

サムネイルスタイルを左にした場合※ こちらは画像です

Cocoon設定の『ブログカード』では、ブログカードの細かい設定ができます。

ボタンリンク

Cocoonでは、このようなボタンリンクを簡単に作ることができます。

クラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックの場合は、『スタイル ⇒ ボタン/囲みボタン』を利用します。

クラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックの場合は、『スタイル ⇒ ボタン・囲みボタン』

 

また、Gutenbergでは『ボタンブロック』『囲みボタンブロック』を使ってボタンリンクを作ることもできます。

Gutenbergの『ボタンブロック』『囲みボタンブロック』

吹き出し

Cocoonではこのような吹き出しも簡単に設置できます。

Cocoonの吹き出しの例

吹き出しの設定は『Cocoon設定 ⇒ 吹き出し』から行っていきます。

Cocoon設定の吹き出し

囲み枠

Cocoonでは、このような囲み枠を簡単に作ることができます。

クラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックの場合は、『スタイル ⇒ ボックス』を利用します。

クラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックの場合は、『スタイル ⇒ ボックス』を利用

 

また、Gutenbergでは『ボックスブロック』を使って囲み枠を設定することも可能です。

Cocoonブロックの囲み枠

ウィジェットの表示設定

Cocoonのウィジェットには『表示設定』というオリジナル機能があります。

Cocoonのウィジェットの『表示設定』

この表示設定機能を使えば、特定のページやカテゴリーなどを指定して、そのウィジェットを表示/非表示にできます。

記事ごとにウィジェットを変えたい場合などに便利な機能です。

おすすめカード

Cocoonのおすすめカード

Cocoon設定の『おすすめカード』を利用すると、ヘッダー下に誘導したい記事のバナーリンクを設置できます。

Cocoonのおすすめカードの例

あまり売り込み臭もなく見栄えも良いので、〇選系やランキング系の収益化記事に誘導したい場合には、オススメの機能です。

タイムライン

Cocoonには何かの手順などをステップ形式で伝える『タイムライン』という機能があります。

Cocoonのタイムラインの例

タイムラインは見栄えがよく、読者に分かりやすく解説できるオススメの機能です。

まとめ

今回は『Cocoon(コクーン)』の初期設定と使い方をご紹介してきました。

Cocoonは非常に高機能なため設定箇所も多いですが、今回お伝えした初期設定は、なるべく先に済ませておきましょう。

使い方に関しては、実際に使いながら徐々に慣れていけば大丈夫です。

 

Cocoonは高機能なテーマだからこそ、プラグインも最小限で済ませられるというメリットがあります。

当ブログで使っているプラグインはこちらで紹介していますので、合わせて参考にしてみてください。

 

また、今回解説したのはCocoonの設定と使い方についてだけでした。

WordPressの使い方については、こちらも合わせて参考にしてみてください。

Cocoonの使い方
スポンサーリンク
ブログ管理人
さっとが

【高校卒業後】神奈川県に13年 ⇒ 秋田に出戻り10年目
【アフィリエイト歴】無料ブログ7年 ⇒ WordPress9年目
【愛用テーマ】Cocoon(4年目)
【活動歴】専業4年半(最高:¥42.3万、34万PV)⇒ 今は副業
【YouTube】登録者6000人突破!
『ブログ運営』と『WordPressの使い方』について発信中!

フォローはお気軽に!
おすすめ記事3選
【ブログアフィリエイトの始め方5ステップ】初心者が稼ぐための手順を解説
【ブログアフィリエイトの始め方5ステップ】初心者が稼ぐための手順を解説

『ブログアフィリエイトの始め方』を5つのステップに分けて解説した記事です。初心者の方がブログアフィリエイトで稼ぐための具体的な手順をお伝えしています。これからブログアフィリエイトを始めたい方は、こちらの記事を参考にしてください。

WordPressブログの始め方【初心者向け完全ガイド】
WordPressブログの始め方【初心者向け完全ガイド】

『WordPressブログの始め方』を解説した記事です。初めてWordPressでブログを作る方でも迷いなく始めることができるよう分かりやすく解説しています。これからWordPressでブログを始めたい方は、こちらの記事を参考にしてください。

WordPressの使い方!初心者向けマニュアル【総まとめ】
WordPressの使い方!初心者向けマニュアル【総まとめ】

『WordPressの使い方』を初心者の方でも分かりやすく学べるように解説した記事です。インストールや投稿方法などの基礎的な使い方から、覚えておくと便利な応用的な使い方まで体系的にまとめています。WordPressの使い方を知るマニュアルとして参考にしてください。

さっとがブログ‐WordPressブログ運営に役立つノウハウ集
タイトルとURLをコピーしました