【初心者向け】Cocoonの初期設定とレイアウト設定｜画像付きで手順を解説

こんな悩みに応えます。

WordPressを開設した直後は、「何から手をつければいいんだろう？」と迷ってしまいますよね。

結論から言うと、最初にやるべきことは、Cocoonの「初期設定」と「レイアウト設定」です。

この２つを整えておけば、あとは記事の作成に集中できます。

この記事では、14STEPで設定が整うように実際の画像付きで解説していきます。

Cocoonの初期設定・レイアウト設定の全体像

ではまず、Cocoonの初期設定とレイアウトの全体像を確認しておきましょう。

この記事では、14STEPでCocoonの設定を整えていきます。

すべて完了すると、以下のような状態になります。

✅完成したトップページ

やることが多いと思ったかもしれませんが、順番に進めるだけで、ブログのレイアウトが整いますので、一つずつ設定していきましょう！

STEP1：Cocoonを有効化する

まず最初に、Cocoonを有効化していきましょう。

初期状態では、テーマ「Twenty Twenty-Three」が有効になっていますので、Cocoonに変更していきます。

すでに有効化できている方は、STEP2：パーマリンクを設定するに進んでください。

これで、Cocoonの有効化は完了です。

STEP2：パーマリンクを設定する

続いて、パーマリンクを設定していきましょう。

すでに設定済みの方は、STEP3：サイトタイトルとキャッチフレーズを設定するに進んでください。

パーマリンクとは、「記事ごとに設定するURL」のことです。

例. https://kamenochiebukuro.site/test

パーマリンクの設定では、上記の「/test」の部分を変更していきます。

まずはパーマリンクの「全体設定」を行い、そのあと「記事ごとの設定」を解説していきます。

✅パーマリンクの全体設定

以上で、パーマリンクの全体設定は完了です。

全体設定ができたので、「記事ごとのパーマリンク設定」をしていきましょう。

✅記事ごとのパーマリンク設定

以上で、パーマリンクの設定は完了です。

STEP3：サイトタイトルとキャッチフレーズを設定する

次に、「サイトタイトル」と「キャッチフレーズ」を変更していきましょう。

WordPressを開設した直後のトップページは、初期状態の「サイトタイトル」が表示されています。

赤枠で囲った部分を、自分のブログに合った内容に変更していきます。

当サイトでは、以下のように設定しています。

✅当サイトの設定例

ブラウザのタブや検索結果にも表示されるほか、SEOにも影響する重要な設定なので、最初に決めておきましょう。

✅設定手順

トップページに戻って、確認してみましょう。

上に「キャッチフレーズ」、すぐ下に「サイトタイトル」が表示されました。

STEP4：Cocoonのスキンを設定する

続いて、デザインを整えるために「スキン」を設定していきましょう。

Cocoonの魅力の一つが、100種類以上のスキンが無料で使えることです。

選んで適用するだけで、ブログのデザインを一括で変更できるので、まずは気になるスキンを設定してみましょう。

今回は、シンプルなデザインの「スキンテンプレート（わいひら）」を使って設定していきます。

✅設定手順

以上で、スキンの設定は完了です。

STEP5：ヘッダーロゴを設定する

スキンの設定ができたら、次は「ヘッダーロゴ」と「ヘッダー背景画像」を設定していきましょう。

ヘッダーロゴは、ブログの一番上に表示されるサイトのロゴ画像のことです。

設定しておくことで、サイトの第一印象がグッとおしゃれになりますよ。

ロゴ画像は、あらかじめCanvaで作成しておきましょう。

✅作成する画像のサイズ

画像が準備できたら、実際に設定していきましょう。

トップページに戻って、ヘッダーの状態を確認しておきましょう。

✅ヘッダーロゴと背景を設定したトップページ

オシャレな感じになりましたね。

STEP6：不要なメニューを削除する

続いて、トップページの不要なメニューを削除していきます。

WordPressを開設した直後のトップページには、初期状態の不要な項目がいくつか表示されています。

このまま放置してしまうと見栄えが悪いので、まず不要な項目を削除してスッキリさせましょう。

削除するのは、以下の3つです。

✅削除する3つの項目

それぞれ順番に削除していきましょう。

①サイドバーを削除する

サイドバーは、下記の画像の「検索」「Recents Posts」「Recent Comments」の部分になります。

「検索」は残したまま、「Recents Posts」「Recent Comments」を削除していきましょう。

以上で、サイドバーの削除は完了です。

②サイドバースクロール追従（ArchivesとCategories）を削除する

続いて、サイドバースクロール追従（ArchivesとCategories）を削除していきます。

以上で、サイドバースクロール追従の削除は完了です。

③Hello Worldを削除する

最後に、「Hello World！」というサンプル記事が残っていると思いますので、削除していきましょう。

以上で、不要なメニューはすべて削除することができました。

STEP7：固定ページを作成する

不要な項目の削除ができたら、次はメニューに追加するための「固定ページ」を作成していきましょう。

固定ページとは、ブログ記事とは違い、更新頻度が低い情報を掲載するための単独ページのことです。

✅作成する固定ページ

それぞれ順番に作成していきましょう。

①プロフィール

以上で、プロフィールページの作成は完了です。

②プライバシーポリシー

プロフィールと同じ手順で「固定ページを追加」をクリックして、タイトルに「プライバシーポリシー」・スラッグに「privacy-policy」と入力してください。

本文はテンプレートをベースに作成できますので、当サイトのプライバシーポリシーを参考にしながら、「サイト名・URL」をご自身のものに変更してください。

→当サイトのプライバシーポリシーページ

※そのままコピーするのではなく、必ずご自身の環境に合わせて修正しましょう。

③お問い合わせ

「固定ページを追加」をクリックして、タイトルに「お問い合わせ」・スラッグに「contact」と入力して公開してください。

お問い合わせフォームは、プラグイン「Contact Form 7」を使って設定していきます。

Contact Form7の詳しい設定方法は、こちらの記事を参考にしてください⬇️

④サイトマップ

サイトマップには「HTMLサイトマップ（読者向け）」と「XMLサイトマップ（Google向け）」の2種類があります。ここでは読者向けの「HTMLサイトマップ」を固定ページとして作成します。

「固定ページを追加」をクリックして、タイトルに「サイトマップ」・スラッグに「html-sitemap」と入力してください。

サイトマップの詳しい作成方法は、こちらの記事を参考にしてください⬇️

STEP8：メニューを設定する（ヘッダー・フッター）

固定ページが作成できたら、次は「メニュー」を設定していきましょう。

完成すると、以下のようにヘッダーとフッターにメニューが表示されるようになります。

✅完成イメージ（ヘッダー・フッター）

メニューを整えることで、読者が目的のページにすぐアクセスできるようになります

ここでは、2つのメニューを設定していきます。

✅ 設定する2つのメニュー

それでは、ヘッダーメニューから設定していきましょう。

①ヘッダーメニュー

ヘッダーメニューとは、画面上部に表示される横並びのメニューのことです。

読者がサイト内の重要なページへ、すぐ移動できるようにする役割があります。

✅ ヘッダーメニューに追加する項目

「カテゴリー」は、STEP10で作成してからメニューに追加します。

ここでは、「ホーム」「プロフィール」「お問い合わせ」の3つだけ追加しておきましょう。

✅設定方法

トップページを確認して、下記のように画面中央に「ホーム」「お問い合わせ」「プロフィール」が表示されていればOKです。

最後に、ヘッダーメニューをヘッダーの上に表示する設定をしておきましょう。

トップページを確認して、下記の図のように表示されていればOKです。

②フッターメニュー

続いて、フッターメニューを作成していきます。

フッターメニューとは、ページ下部に表示されるメニューのことです。

✅ フッターメニューに追加する項目

「プライバシーポリシー」や「サイトマップ」など、読者が必要なときに確認するページを配置しておきましょう。

✅設定方法

トップページに戻って、フッターメニューが表示されているか確認してみましょう。

画像のように、右下に「サイトマップ」「プライバシーポリシー」が表示されていればOKです。

以上で、メニュー設定は完了です。

STEP9：サンプル記事を4〜5本投稿する（タイトルのみでもOK）

メニューの設定ができたら、次はサンプル記事を4〜5本投稿しておきましょう。

この段階では、記事の中身は空でも大丈夫ですので、タイトルだけ入力して公開しておけばOKです。

✅ サンプル記事を用意する理由

この後に設定する「サイドバーの人気記事」や「ピックアップバナー」に記事が必要になるので、この段階で作成しておきましょう。

同じ手順で4〜5本分繰り返して、サンプル記事を作成していきましょう。

下記の図のようになっていればOKです。

STEP10：カテゴリーを作成する

サンプル記事が用意できたら、次は「カテゴリー」を作成していきましょう。

カテゴリーとは、記事をテーマごとに分類するための仕組みです。

今回は、以下の4つのカテゴリーを作成します。

✅作成するカテゴリー4つ

✅カテゴリーの作成手順

カテゴリーが作成できたら、記事をカテゴリーに振り分けていきましょう。

以上で、カテゴリーの振り分けは完了です。

カテゴリーが作成できたので、2つほどヘッダーメニューに追加しておきましょう。

今回は、「WordPress」と「レンタルサーバー」を追加していきます。

トップページを確認して、ヘッダーメニューが下記の画像のようになっていればOKです。

STEP11：サイドバーを設定する

カテゴリーの作成ができたら、次は「サイドバー」を設定していきましょう。

サイドバーは、読者が他の記事を探したり、サイト内を回遊したりするための重要なエリアです。

ここでは、以下の4つを設定していきます。

✅サイドバーに設置する4つの項目

やり方はすべて同じなので、「プロフィール」を例に解説していきます。

プロフィールを追加する

以上で、サイドバーのプロフィール設定は完了です。

カテゴリー・人気記事を追加する

同じやり方で、「カテゴリー」「人気記事」を追加していきましょう。

まず、「カテゴリー」から追加していきます。

4つ追加できたら、サイドバーの状態を確認しておきましょう。

上記のように、「検索」「プロフィール」「カテゴリー」「人気記事」が表示されていればOKです。

STEP12：ピックアップバナーを作成する（4つ）

サイドバーの設定ができたら、次は「ピックアップバナー」を作成していきましょう。

ピックアップバナーとは、トップページ上部に表示される4つのバナーのことです。

✅今回設定するピックアップバナー4つ

バナーに表示する項目については、ご自身のブログに合った名前に変えて頂いて構いません。

①ボックスメニューを作成する

ではまず、ピックアップバナーに表示するメニューを作成していきましょう。

以上で、メニューの作成は完了です。

②バナーに表示する項目を追加する

メニューが作成できたら、次はバナーに表示する項目を追加していきましょう。

これで、項目の追加ができました。

③バナー画像を設定する

次に、ボックスメニューの項目に画像を設定していきましょう。

画像はCanvaで作成するのがおすすめです（無料で使えます）。

サイズは「300×180px」で作成していきます。

以上で、メニューの設定は完了です。

④ウィジェットにボックスメニューを設定する

続いて、ボックスメニューをウィジェットに設定していきます。

以上で、ピックアップバナーの作成は完了です。

STEP13：ブログ投稿画面の設定

最後に、ブログ投稿画面の設定をしていきましょう。

初期の投稿画面では、下記の画像のように、SNSアイコンやフォローボタンが表示されています。

このままだと見栄えが悪いので、整理していきます。

①トップシェアボタンの削除

まず最初に、投稿画面の上にある「トップシェアボタン」を削除していきます。

これで、トップシェアボタンの削除は完了です。

続いて、ボトムシェアボタンの設定をしていきますので、画面はこのまま進んでください。

②ボトムシェアボタンの表示設定

続いて、ボトムシェアボタンの表示設定をしていきましょう。

投稿画面を表示して、SNSボタンの表示状態を確認しておきましょう。

画面上部のSNSシェアボタンが消えて、下のSNSシェアボタンが白抜きになりました。

次は、フォローボタンの表示設定をしていきます。

③フォローボタンの表示設定

続いて、フォローボタンの表示設定をしていきましょう。

④ユーザー名を削除

最後に、SNSフォローボタンの右下に表示されている「ユーザー名」も削除しておきましょう。

投稿画面を開いて、ユーザー名が消えているか確認しておきましょう。

上記の画像のように削除できていればOKです。

14.お問い合わせページの作成

ブログの信頼性を高めるために、お問い合わせフォームを設置しておきましょう。

お問い合わせフォームはプラグイン「Contact Form 7」を使って作成します。

詳しい設定方法は、こちらの記事を参考にしてください⬇️

お問い合わせフォームが設定できたら、Cocoonの初期設定とレイアウト設定は完了です。

まとめ

ここまで、Cocoonの初期設定とレイアウトの整え方を14STEPで解説してきました。

最初は設定項目の多さに驚いたかもしれませんが、実際にやってみると思ったよりシンプルだったのではないでしょうか。

初期設定が終わったら、もう一つだけやっておきたいのが「プラグインの設定」です。ブログ運営に必要な機能をここで一気に整えておきましょう。

プラグインについては、こちらの記事を参考にしてください。

WordPress初心者におすすめのプラグイン10選【Cocoon対応】⬇️

ブログ開設の全体の流れを確認したい方は、こちらの記事を参考にしてください⬇️

今回は以上になります。