ここでは、WordPressの無料テーマとして有名な「Cocoon(コクーン)」の初期設定やカスタマイズに関してご紹介します。
「テーマのインストールまではできたけど、ここからどうやって設定したら良いの?」とお困りの方も多いかと思います。
テーマ導入後の設定は、作業自体はとても簡単です。
しかし、何をどう触って良いのか初心者の方は分からなくて手間取りますよね。
この記事では、Cocoonを使ったブログをデザインする際に必要な最低限の設定の方法を1記事にまとめてご紹介します。
記事の流れ通りに進めていただければ、基本設定は簡単に終わらせることができますよ。
Cocoonでカスタマイズを行う前に
ブログのカスタマイズを設定していく前に、以下の準備が整っているかを確認しておいてください。
・WordPressの初期設定が完了している
・Cocoonの親テーマ・子テーマがインストールされている
・Cocoonの「子テーマ」が有効化されている
上記にの内容に関してはこちらの記事で紹介していますので、まだお済みで無い方は先にこちらの準備を行ってください。


【Cocoon設定】で行う設定・カスタマイズ
はじめに
主なCocoonの設定やカスタマイズは以下の「Cocoon設定」から行います。
この画面で、ブログ全体の設定やトップページのカスタムなどを行っていきます。
タイトル
ここでは、「フロントページ(トップページ)」と「投稿・固定ページ」の設定をします。
①
【タイトル】をクリックします。
②
【フロントページタイトル】
検索エンジンで検索結果として表示される際のタイトル表記を設定します。
③
【サイトの説明】
検索エンジンで検索結果として表示された際にタイトルのしたに表示される説明文(メタディスクリプション)です。
④
【投稿・固定ページタイトル】
投稿ページや固定ページが検索エンジンで表示される際のタイトル表記の設定です。
⑤
【メタディスクリプション】
ここにチェックを入れておくと、投稿ページや固定ページを投稿時にメタディスクリプション(記事の説明文)を投稿した場合に、検索エンジンに表示されます。
各記事のメタディスクリプションは投稿画面で設定します。
すべて設定が完了したら「変更をまとめて保存」をクリックしてください。
OGP
OGPとは、SNS(Twitterなど)に自分のブログのトップページを投稿した際に表示される画像のことです。
この画像は、クリック率にも大きく影響するため、必ず設定するようにしておきましょう。
①
【OGP】をクリックします。
②
最下部に表示される「ホームイメージ」までスクロールしてください。
「選択」をクリックし、設定したい画像をアップロードします。
③
画像のアップロードができたら「変更をまとめて保存」をクリックします。
スキン
スキンとはデザインテンプレートのことです。
Cocoonにはたくさんのテンプレート(スキン)が存在します。
テンプレートからお好みのデザインを選ぶだけで、ブログの形になるので自分で細かな設定を行うのが苦手な方はこちらから選んでブログをスタートさせても良いかもしれません。
イメージ画像を見ながらお好みのデザインを選択してみて下さい。
フッター
ここでは、フッターのデザインやクレジット表記に関して設定を行います。
①
【フッター】をクリックします。
②
【フッター色】
フッターの背景色と文字色を選択できます。
③
【フッター表示タイプ】
フッターに表示されるクレジット表記の表示を選択します。
④
【フッターロゴ】
フッターに表示させるロゴをアップロードできます。
すべての設定が完了したら「変更をまとめて保存」をクリックしてください。
ヘッダー
ブログのヘッダー部分の設定を行います。
必要最低限の確認箇所を説明します。
ここでは説明していませんが、色の設定や画像サイズの設定などもお好みで設定してみてください。
①
【ヘッダー】をクリックします。
②
【ヘッダーレイアウト】
ロゴとメニューの表示のされ方を選びます。
※ロゴ画像を入れる場合は、④のヘッダーロゴを先にアップロードしてから確認した方がイメージがしやすいです。
③
【ヘッダーの固定】
チェックを入れるとヘッダーを画面上部に固定する事ができます。
④
【ヘッダーロゴ】
ヘッダーに表示させるロゴをアップロードできます。
⑤
【ヘッダー背景画像】
ヘッダーの背景に設定したい画像を選択できます。
その他にも、色の設定や画像サイズの設定などお好みで調整してください。
すべての設定が完了したら「変更をまとめて保存」をクリックしてください。
インデックス
ここでは、トップページの記事一覧のページの表示設定を行えます。
自分好みの表示方法を選択してください。
記事が投稿されていない状態だと、イメージが湧きにくいかと思いますので何記事か投稿した後に設定を変更してみても良いかもしれません。
目次
記事を投稿した際に表示される目次に関する設定です。
目次は
・SEO対策としても効果がある
・ユーザビリティの向上にもつながる
という2点から、表示させることがおすすめです。
最初はデフォルトの設定のままで、ブログを更新していく中で設定を変えていく流れが理想です。
ブログカード
ブログカードとは、以下のようなブログのURLを投稿記事に記載した際に表示される「カード形式のリンク」です。
ここでは、「内部ブログカード」の設定と「外部ブログカード」の設定ができます。
【内部ブログカード】
自分のブログ内で表示されるブログカードのこと
【外部ブログカード】
自分のブログ以外のサイトで、自分の記事が紹介された際に表示されるブログカードのこと
この箇所も最初はデフォルトの設定のままで問題ありません。
アクセス解析・認証
ここでは、Googleの解析ツールと連携させることでブログのアクセス解析などを行えます。
利用するには各Googleのツールの登録が必要です。
①
【アクセス解析・認証】をクリックします。
②
【Google Analytics設置】
グーグルアナリティクスに登録し、トラッキングIDを来記載してください。
③
【Google Search Console】
グーグルサーチコンソールに登録し、メタタグの必要箇所だけ貼り付けます。
詳細に関しては、こちらの記事をご確認ください。

④
【その他アクセス解析・認証コード設定】
グーグルアドセンスを利用する際は、こちらにタグを入力する必要があります。

また、グーグルアドセンスの利用の他にもヘッドタグ内(<head>~</head>)に入力するように求められたときはこちらに入力して下さい。
その他の設定
メニューの設定
ここではメニューを作成します。
①
「外観 > メニュー」をクリックします。
②
メニュー名を入力します。
この名称はブログには表示されませんので、自分が分かるような名前をつけていれば大丈夫です。
③
メニューに追加したいものをチェックし「メニューに追加」をクリックします。
今回はブログカテゴリーをメニューに追加しました。
その他に「固定ページ」「投稿ページ」「カスタムリンク」を設定することができます。
④
設定したいメニューの位置にチェックを入れます。
⑤
「メニューを保存」をクリックするとメニューが表示されるようになります。
【サブメニューを設定したい場合】
サブメニューに設定したい箇所を右にドラッグすることで設定ができます。
ファビコンの設定
ファビコンとは、ホームページのアイコンとして表示される画像のことです。
Googleの場合は、この「G」のアイコンのことです。
利用したいアイコンが決まっている場合は、設定を行いましょう。
ファビコンの設定・変更はいつでもできます。
ファビコンに設定する画像は「512px × 512px」で準備してください。
①
「外観 > カスタマイズ」をクリックします。
②
「サイト基本情報」をクリックします。
③
「サイトアイコンを選択」をクリックし、アイコンに設定したいデータを選択します。
④
プレビューが表示されたら、画面上部にある「公開」をクリックします。
⑤
「公開」をクリックします。
⑥
設定が完了し、ファビコンが表示されました。
【公式】Cocoon テーマ利用マニュアル
Cocoonの公式ページには「テーマ利用マニュアル」が記載されています。
公式マニュアル:https://wp-cocoon.com/manual/
この「テーマ利用マニュアル」にはたくさんの情報が記載されています。
マニュアルは、わかりやすく情報量がとても多いのですが、始めての方だと何から手を付けたら良いのか分から無いかもしれません。
そのため、今回の記事では、ブログを完成させるための必要最低限の設定をご案内させていただ来ました。
今後、その他のカスタマイズを行う際に困った際は、「テーマ利用マニュアル」を参考にしながらデザインの設定を進めてみてください。
まとめ
Cocoonを導入した際に最低限設定しておくべき箇所についてご説明しました。
記事の流れ通りに設定してもらえれば、ひとまずブログとして形はできたのではないでしょうか。
もっと細かい設定なども行うことで、ご自身の理想するブログに近づけることができます。
そんな場合は、一旦ブログとして見せれる形の状態になった後は、記事の投稿と並行しながら細かいデザインを設定していくことがおすすめです。
ブログの更新を行いながら、自分好みのデザイン設定を進めてみてください。
カスタマイズが終わったら次は実際に記事を書いていってみましょう。
記事の書き方などについてはこちらをごらんください。

✅ 次のオススメ記事
