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

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

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

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

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

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

スポンサーリンク

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

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

子テーマを有効化

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

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

Cocoonは子テーマを有効化

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

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

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

ウィジェット

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

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

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

Cocoonのウィジェット設定

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

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

サイトマップ

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

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

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

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

参考記事:WordPressにHTMLサイトマップページを設置する2つの方法

スキン選択

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

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

Cocoon設定のスキン選択

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

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

全体設定・本文

Cocoon設定の全体設定

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

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

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

 

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

Cocoon設定の本文

参考記事:Cocoonの『フォントサイズ』と『行間』を変更する簡単な方法

ヘッダー

Cocoon設定のヘッダー設定

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

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

 

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

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

タイトル

Cocoon設定のタイトル設定

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

 

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

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

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

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

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

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

 

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

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

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

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

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

参考動画:【WordPress】メタディスクリプションの書き方と設定方法

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を設定します。

参考記事:WordPressにGoogleアナリティクスを導入・設定する方法【2021年最新版】

 

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

CocoonのSearch Console設定

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

参考記事:WordPressブログをサーチコンソールに登録する手順【2020年最新版】

インデックス

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

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

 

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

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

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

投稿・関連記事

Cocoon設定の投稿設定

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

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

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

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

参考記事:Cocoon(コクーン)で関連記事を表示させる2つの方法

参考記事:【Cocoon】パンくずリストの位置の変更・非表示設定の方法

固定ページ

Cocoon設定の固定ページ設定

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

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

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

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

目次

Cocoon設定の目次の設定

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

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

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

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

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

参考記事:【Cocoon】目次機能の使い方を詳細解説!表示されない原因もチェック

SNSシェア

Cocoon設定のSNSシェア設定

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

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

 

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

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

参考記事:【Cocoon】SNSボタンの設定方法について詳細解説

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

Cocoon設定のSNSフォロー設定

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

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

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

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

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

参考記事:Cocoonでプロフィールを設置する方法!画像が表示されない時の対処法も解説

画像

Cocoon設定の画像の設定

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

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

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

 

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

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

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

フッター

Cocoon設定のフッター設定

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

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

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

参考記事:Cocoonのフッターをカスタマイズする方法

エディター

Cocoon設定のエディター設定

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

 

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

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

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

Gutenbergエディターの投稿画面

 

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

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

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

旧エディターの投稿画面

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

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

スポンサーリンク

Cocoonの使い方【応用編】

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

グローバルメニュー

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

WordPressの『外観 ⇒ メニュー』

 

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

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

参考記事:WordPressテーマ『Cocoon(コクーン)』のグローバルメニューを設定する方法

スライドショー

Cocoon設定のカルーセル

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

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

 

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

カルーセルの表示

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

参考記事:【超簡単!】Cocoonのヘッダー下にスライドショーを設置する方法

SNS用画像(OGP)の設定

Cocoon設定のOGP

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

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

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

OGPのホームイメージ

参考記事:CocoonのSNS用画像(OGP)をオリジナルに変更する方法

アピールエリア

Cocoon設定のアピールエリア

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

アピールエリアの例

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

参考記事:【Cocoon】ヘッダー下アピールエリアの設定方法

ブログカード

Cocoon設定のブログカード

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

ブログカードの例※ こちらは画像です

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

参考記事:Cocoonのブログカードの使い方!表示されない時の対処法も解説

ボタンリンク

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

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

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

 

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

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

参考記事:Cocoonのボタンリンク(囲みボタン)の使い方!色やサイズについても解説

吹き出し

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

Cocoonの吹き出しの例

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

Cocoon設定の吹き出し

参考記事:Cocoonの吹き出し機能の設定方法と使い方!便利なコツも解説

囲み枠

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

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

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

 

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

Cocoonブロックの囲み枠

参考記事:Cocoonの囲み枠(ボックス)の種類と使い方!リストタグ使用時は要注意

ウィジェットの表示設定

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

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

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

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

参考記事:【Cocoon】ウィジェットの『表示設定』の使い方を解説

まとめ

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

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

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

 

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

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

Cocoonで使っているプラグイン12選【2021年版】
今回はWordPressテーマ『Cocoon』で使っているプラグインを12個ご紹介していきます。SEO対策からセキュリティ対策まで、WordPress歴8年の僕が当ブログで利用しているプラグインを厳選しました。

 

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

WordPress全般の設定がまだの方は、こちらも合わせて参考にしてみてくださいね。

【初心者向け】WordPressの初期設定!インストール後にやるべき16項目
今回はWordPressの初期設定に必要な項目を16個ご紹介していきます。これだけやっておけば、あとは日々記事更新に集中できるようになります。僕もWordPressをインストールした後、毎回すぐにやっている設定なので、ぜひ参考にしてみてください。
タイトルとURLをコピーしました