今回はWordPressテーマ『Cocoon(コクーン)』導入後の初期設定と使い方をご紹介していきます。
初期設定に関しては、初めてWordPressを使う初心者の方でも迷わないよう分かりやすく解説します。
覚えておくと便利な使い方もお伝えしていきますので、ぜひ参考にしてみてください。
Cocoonは高機能な分、設定項目がたくさんありますが、焦らず一つずつ確実に設定を行っていきましょう。
Cocoonの初期設定と基本的な使い方
動画でも解説していますので、合わせて参考にしてみてください。
子テーマを有効化
Cocoonのダウンロードページには、親テーマと子テーマが用意されています。
⇒ Cocoonのダウンロードページはこちら
Cocoonを使う時は親と子の両方をインストールして、子テーマを有効化してください。
イメージとしては、親テーマがメインで不具合や修正などがあった場合に更新で対応し、子テーマがカスタマイズの記録用のような感じです。（基本的に子テーマは更新不要）
親テーマだけでは更新の際にカスタマイズした箇所が初期化されてしまう可能性がありますし、子テーマだけでは動作しません。
ですから、親テーマ、子テーマと順番にインストールをして、子テーマのほうを有効化しておきましょう。
ウィジェット
ウィジェットでは主にサイドバーの設定を行います。
初期設定では『メタ情報』というメニューが入っていますが、読者さんには不要なので外しておきましょう。
基本的には『サイト検索』『最近の投稿』『カテゴリー』の３つは入れておくことをオススメします。
それ以外は好みで設定して構いませんが、とりあえず最初は最低限の設定だけで大丈夫です。
いつでも変更できますので、運営しながらアピールしたいコンテンツや、ニーズがありそうなコンテンツを入れ替えてみてください。
サイトマップ
CocoonでHTMLサイトマップページを作る際は、sitemapのショートコードを入れるだけでOKです。
HTMLサイトマップページはなくても構いませんが、ないよりはあったほうが読者さんに喜ばれます。
プラグイン不要で、ショートコードだけで簡単に作成できますので、最初にサクッと作っておきましょう。
スキン選択
ここからは『Cocoon設定』内で行う設定について解説していきます。
まずは『スキン』の選択です。
こちらでは『スキン一覧』から選択するだけで、簡単にブログの外観を変更できますので、ぜひ自分好みをデザインを選んでみてください。
ちなみに、このブログsattoga.comでは『COLORS（グリーン）』を選択しています。
全体設定・本文
Cocoonの『全体設定』では、ページ全体の表示に関する設定を行います。
- サイトの背景色や背景画像
- フォントの種類やサイズ
- モバイル用のフォント設定
- リンク色の設定
- サイドバーの表示設定
このブログでは特に何も変更しておらず、デフォルトのままにしていますが、変更したい方はお好みで設定してみてください。
また、記事の行間は『Cocoon設定 ⇒ 本文』から変更可能です。
ヘッダー
Cocoonの『ヘッダー設定』では、ヘッダーの表示設定を行います。
- ヘッダーのロゴ画像
- キャッチフレーズの表示
- ヘッダーの背景画像や配色
- グローバルナビの配色
このブログでは背景画像は設定せずに、ロゴ画像のみ設定しています。
タイトル
Cocoonの『タイトル設定』では、主に２つの設定を行います。
まず一つ目が、検索エンジンの検索結果での表示方法について。
表示される検索エンジンによって変わることもありますが、こちらでは検索結果にどのような形式で表示させるか選択できるようになっています。
なお、サイト名にキャッチフレーズを含めると長くなりすぎるので、このブログでは『サイト名』のみにしています。
また、上記の画像はTOPページの設定ですが、投稿ページや固定ページ用の設定も、こちらで選択できます。
このブログでは、投稿ページ・固定ページ用の設定では『ページタイトル | サイト名』にしています。
二つ目が『メタディスクリプション・メタキーワード』を設定するかどうかの選択です。
こちらにチェックを入れておけば、投稿・固定ページでメタディスクリプションとメタキーワードが設定できるようになります。
現在は「メタキーワードを入れてもSEO効果はない」と言われていますが、入れていても損はありませんので、僕は全ての記事で設定するようにしています。
なので、メタキーワードにチェックは入れなくても構いませんが、メタディスクリプションにはチェックを入れておき、記事作成時には毎回個別に設定するようにしましょう。
SEO
Cocoonの『SEO設定』では、主に２つの設定を行います。
まず一つ目が、カテゴリー・タグ・アーカイブ・添付ファイルをインデックスさせるかどうか？の設定です。
こちらにチェックを入れていれば『noindex＝検索エンジンに載せない』という設定になります。
「検索エンジンに載せたほうがいいんじゃないの？」と思われるかもしれませんが、基本的にSEOでの集客は記事ページで行います。
カテゴリー・タグ・アーカイブは記事ページの集合体なので、検索エンジンにインデックスさせ過ぎると、同じようなページが増えてしまい、逆にSEOでは不利と考えられています。
ただし、カテゴリーだけは記事が増えれば同じジャンルの記事の集合体として一定の価値がありますので、1ページ目だけインデックスさせておいて、2ページ目以降はnoindexにしておくのがオススメです。
また、添付ファイルも画像1枚1枚をインデックスさせると逆に評価が下がる恐れがあるため、noindexを推奨します。
次に二つ目が『表示する日付』の設定です。
こちらは「いつ記事を公開して、いつ更新されたか？」を検索エンジンに伝えるために『投稿日・更新日』の両方を表示させるのがオススメです。
なお、Cocoonの『SEO設定』では、他にもこの３つの設定があります。
- canonicalタグの追加
- 分割ページにrel=”next”/”prev”タグの追加
- JSON-LDを出力
この３つは最初からチェックが入っていると思いますので、そのままでOKです。
アクセス解析設定
Cocoonの『アクセス解析設定』では、主に３つの設定を行います。
まず一つ目が「サイト管理者も含めてアクセス解析するかどうか？」の設定です。
こちらにチェックが入っていると、自分自身が管理画面にログインしている際、ブログのページを見た時のPVもカウントされてしまいます。
より正確にアクセス解析を行いたい場合はチェックを外しておきましょう。
次に『Google Analytics設定』です。
こちらには、Googleアナリティクスに登録して取得したトラッキングIDを設定します。
最後に『Google Search Console設定』です。
こちらには、Googleサーチコンソールの登録に必要な認証IDを入力します。
インデックス
Cocoonの『インデックス設定』では、最新記事やカテゴリーページなど、記事一覧ページの表示形式が選択できます。
ちなみに、このブログでは「カードタイプ」を「縦型カード2列」にしています。
この設定でも読者さんに与える印象が大きく変わりますので、自分好みのデザインを選択してみてください。
投稿・関連記事
Cocoonの『投稿設定』では、投稿ページに関する設定を行います。
- カテゴリ・タグの表示設定
- 関連記事設定
- ページ送りナビ設定
- コメント設定
- パンくずリスト設定
このブログではコメントを受け付けていないので、「コメント設定」はチェックを外して非表示にしています。
それ以外は特に何も変更せず初期設定のままですが、関連記事設定では、デザインや表示させる記事数などの変更ができますので、お好みで変更してみることをオススメします。
固定ページ
Cocoonの『固定ページ設定』では、固定ページに関する設定を行います。
- コメント設定
- パンくずリスト設定
このブログでは、投稿ページと同様に固定ページでも「コメント設定」はチェックを外して非表示にしています。
「パンくずリスト設定」は初期設定のままにしています。
目次
Cocoonの『目次設定』では「目次の表示/非表示」のほかに、「どのように表示させるか？」も設定可能です。
- 目次を表示させるページの種類
- 目次のタイトル（例：目次）
- 目次切り替え
- 最初から目次内容を表示させるかどうか？
- 表示条件
- 目次表示の深さ
- 目次ナンバーの表示
- 目次の中央表示
- 目次の表示順
- 見出し内タグ
目次には「SEO効果」と「読者さんの利便性アップ」という２つのメリットがありますので、表示させたほうが良いです。
細かい設定に関してはお好みで構いませんので、色々と試しながら変更してみてください。
設定が面倒な方は、とりあえず表示だけしておいて、その他は何も変更しなくてもOKです。
SNSシェア
Cocoonの『SNSシェア設定』では、以下の９つのシェアボタンの、表示位置(記事上・記事下)、表示ページ、デザインなどが選択できます。
- はてなブックマーク
- LINE@
- タイトルとURLをコピー
- コメント
これも好みですが、このブログではこのような設定にしていますので、よろしければ参考にしてみてください。
- 記事下(ボトム)のみ表示
- Twitter、Facebook、はてな、Pocket、LINE、タイトルとURLをコピー
- 投稿ページのみ表示
- カラー：白抜き
- カラム数：3列
SNSフォロー・プロフィール
Cocoonの『SNSフォロー設定』では、各SNSに加えて、FeedlyとRSSのボタンも設置できます。
FeedlyとRSSのボタンはチェックを入れるだけですが、他のSNSは『ユーザー ⇒ プロフィール』で設定したアカウントのフォローボタンが表示されるようになります。
ちなみに、このブログでも以前はフォローボタンを設置していましたが、現在は設置していません。
記事下にプロフィールを設置しており、その中にフォローボタンが表示されているので、被ってしまうからです。
なので、フォローボタンではなくプロフィールを設置したいという方は、こちらの記事を参考にしてください。
画像
Cocoonの『画像設定』では、主にアイキャッチ画像の設定ができます。
- 本文上のアイキャッチの表示/非表示
- アイキャッチラベルの表示/非表示
- アイキャッチの中央寄せ
- アイキャッチ自動設定を有効にする
- 画像の囲み効果
- 画像の拡大効果
- サムネイル画像の比率
- NO IMAGE画像
自動で本文上にアイキャッチを表示させると、WordPressのテーマを変更した際に、変更後のテーマも同様の機能がないと、本文上に画像が表示されなくなってしまいます。
このブログでも以前は本文上のアイキャッチは非表示にして、自分で画像を設定していました。
しかし、しばらくはCocoonを使い続けるつもりなので、現在は表示にしています。
なので、テーマを変更する予定がある方、もしくは他のテーマから変更してきた方は、このアイキャッチ画像の設定は、よく考えて行うことをオススメします。
フッター
Cocoonの『フッター設定』では、フッターの色やクレジット表示などが設定できます。
こちらはお好みで設定してみてください。
このブログでは配色はデフォルトのままで、表示タイプは『メニュー＆クレジット（中央揃え）』にしています。
エディター
Cocoonの『エディター設定』では、投稿画面で『Gutenbergエディター』と『旧エディター』のどちらを使うか？が選択できます。
『Gutenbergエディターを有効にする』にチェックが入っていると、
このようなGutenbergエディターの投稿画面になります。
また、『Gutenbergエディターを有効にする』のチェックを外すと、
このような旧エディター（クラシックエディター）の投稿画面になります。
どちらを使うかは好みですが、旧エディターのサポートは2021年末で切れるようなので、できればGutenbergエディターに慣れていったほうが良いでしょう。
僕も未だに旧エディターを使い続けていますが、徐々に慣れていこうと思っています。
Cocoonの使い方【応用編】
ここからは応用編として、覚えておくと便利なCocoonの使い方を解説していきます。
グローバルメニュー
WordPressのグルーバルメニューは『外観 ⇒ メニュー』から作成します。
Cocoonではメニューの位置で『ヘッダーメニュー』にチェックを入れると、作ったメニューがグローバルメニューになります。
スライドショー
Cocoon設定の『カルーセル』機能を使うと、ヘッダー下にこのようなスライドショーを設置することができます。
『カルーセルの表示』でスライドショーを表示させたいページのタイプを選ぶだけで、簡単に設置できます。
表示させるカテゴリーやオートプレイなど、お好みに合わせて細かく設定することも可能となっています。
SNS用画像（OGP）の設定
Cocoonを使っているブログのトップページのURL（例：https://sattoga.com/）をSNSに掲載すると、デフォルトではCocoonの画像が表示されます。
その画像は、Cocoon設定の『OGP』で変更可能です。
一番下のホームイメージに設定した画像が、トップページのSNS用画像になります。
アピールエリア
Cocoon設定の『アピールエリア』を利用すると、ヘッダー下に画像と合わせて読んでほしい記事のリンクを設置することができます。
表示させるページやボタンの色など、細かく設定することが可能です。
ブログカード
Cocoonでは記事内にURLをそのまま入力するだけで、リンクをこのようにおしゃれなカードタイプにして表示させることができます。
※ こちらは画像です
Cocoon設定の『ブログカード』では、ブログカードの細かい設定ができます。
ボタンリンク
Cocoonでは、このようなボタンリンクを簡単に作ることができます。
クラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックの場合は、『スタイル ⇒ ボタン/囲みボタン』を利用します。
また、Gutenbergでは『ボタンブロック』『囲みボタンブロック』を使ってボタンリンクを作ることもできます。
吹き出し
Cocoonではこのような吹き出しも簡単に設置できます。
吹き出しの設定は『Cocoon設定 ⇒ 吹き出し』から行っていきます。
囲み枠
Cocoonでは、このような囲み枠を簡単に作ることができます。
クラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックの場合は、『スタイル ⇒ ボックス』を利用します。
また、Gutenbergでは『ボックスブロック』を使って囲み枠を設定することも可能です。
ウィジェットの表示設定
Cocoonのウィジェットには『表示設定』というオリジナル機能があります。
この表示設定機能を使えば、特定のページやカテゴリーなどを指定して、そのウィジェットを表示/非表示にできます。
記事ごとにウィジェットを変えたい場合などに便利な機能です。
おすすめカード
Cocoon設定の『おすすめカード』を利用すると、ヘッダー下に誘導したい記事のバナーリンクを設置できます。
あまり売り込み臭もなく見栄えも良いので、〇選系やランキング系の収益化記事に誘導したい場合には、オススメの機能です。
タイムライン
Cocoonには何かの手順などをステップ形式で伝える『タイムライン』という機能があります。
タイムラインは見栄えがよく、読者に分かりやすく解説できるオススメの機能です。
まとめ
今回は『Cocoon(コクーン)』の初期設定と使い方をご紹介してきました。
Cocoonは非常に高機能なため設定箇所も多いですが、今回お伝えした初期設定は、なるべく先に済ませておきましょう。
使い方に関しては、実際に使いながら徐々に慣れていけば大丈夫です。
Cocoonは高機能なテーマだからこそ、プラグインも最小限で済ませられるというメリットがあります。
当ブログで使っているプラグインはこちらで紹介していますので、合わせて参考にしてみてください。
また、今回解説したのはCocoonの設定と使い方についてだけでした。
WordPressの使い方については、こちらも合わせて参考にしてみてください。
