WordPressテーマ『Cocoon』導入後の初期設定【初心者向け】

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

今回は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の『タイトル設定』では、主に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を設定します。

参考記事:Cocoonにアクセス解析(Googleアナリティクス)を設定する手順

 

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

CocoonのSearch Console設定

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

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

インデックス

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設定の画像の設定

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

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

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

 

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

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

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

フッター

Cocoon設定のフッター設定

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

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

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

エディター

Cocoon設定のエディター設定

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

 

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

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

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

Gutenbergエディターの投稿画面

 

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

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

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

旧エディターの投稿画面

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

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

まとめ

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

他にも設定箇所はありますが、とりあえずは今回解説した箇所を設定しておいて、運営しながら他の部分も徐々に設定していくと良いと思います。

なお、今回はあくまでもCocoonの設定の解説だけでしたので、WordPress全般の設定がまだの方は、こちらも合わせて参考にしてみてくださいね。

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