WordPresでブログを始める場合、まずテーマを決定すます。
中でも無料で使えて人気なのが『Cocoon』です。
今回は、この無料テーマ『Cocoon』を使って、初心者でも簡単にプロ並みのサイト型トップページを構築するカスタマイズ法を解説していきます。
はじめに：トップページカスタマイズの戦略的意義
『Cocoon』は高機能な無料テーマとして広く利用されていますが、デフォルト設定のままでは多くのサイトとデザインが画一的になりがちです。
この画一性は、ユーザーに既視感を与えるだけでなく、検索エンジン最適化（SEO）の観点からも課題となり得ます。
Googleは独自性のないコンテンツやサイト構造を低く評価する傾向を強めており、この傾向は今後さらに顕著になることが予測されます。
したがって、本仕様書で詳述するトップページカスタマイズは、単なる視覚的な改善に留まりません。
これは、以下の2つの戦略的目標を達成するための技術的投資です。
- デザイン性の向上：
訪問者に対してプロフェッショナルで魅力的な第一印象を与え、ブランドイメージを確立します。 - 独自性の確保によるSEO評価の向上：
他の画一的なCocoonサイトと明確な差別化を図り、独自の構造的シグナルを検索エンジンに提供することでサイト評価を高め、資産価値を向上させます。
ここで紹介するカスタマイズは、サイトの顔であるトップページを戦略的に再構築し、コンテンツの価値を最大限に引き出すための基盤を築くものです。
次章以降では、この目標を達成するための具体的な設定手順を、3つのフェーズに分けて詳細に解説します。
フェーズ1：Cocoonテーマの基本設定
このフェーズでは、トップページ全体のレイアウト、タイポグラフィ、表示要素を制御するグローバルな基本設定を実施します。
ここでの設定は、後続のコンテンツ構築フェーズにおけるデザインの基盤となり、サイト全体の一貫性を担保する上で極めて重要です。
スキン設定の無効化
『Cocoon』にプリセットされているデザインスキンは、あなたの好みに合わせて選択されて大丈夫です。
しかし今回は、完全なオリジナルデザインを適用するため、スキン設定を無効化して何もない状態の素地を準備します。
- ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】 > 【スキン】タブ - 「
スキン一覧」の中から、最上部にある「なし」を選択します。 - 画面下部の【
変更をまとめて保存】ボタンをクリックします。
基本タイポグラフィとレイアウトの定義
サイト全体のフォントカラーを定義し、トップページのレイアウトの基本となるサイドバーの表示状態を設定します。
- ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】 > 【全体】タブ - 以下の項目を仕様に従い変更します。
- 設定項目：
サイトカラー>サイトキーカラー - 設定値：好みですがクリックされやすい青系がおすすめ
- 設定項目：
サイトフォント文字色 - 設定値：
#333333 - 技術的意図：デフォルトは黒 (
#000000) 。可読性を損なわない程度に柔らかい印象を与えるダークグレーに変更します。このカラーコードはサイト全体の統一感を出すために後続のステップで再利用するため、コピーしておくことをおすすめします。 - 設定項目：
サイドバーの表示状態 - 設定値：
フロントページで非表示にする - 技術的意図：トップページを1カラムレイアウトとし、コンテンツ表示領域を最大化します。これにより、没入感のあるサイト型デザインの基盤が構築されます。
- 設定項目：
- 【
変更をまとめて保存】をクリックします。
ヘッダー領域の構成
サイトの顔となるヘッダー部分のレイアウトとブランディング要素を設定します。
- ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】 > 【ヘッダー】タブ - 以下の項目を仕様に従い変更します。
- ヘッダーレイアウト：
「トップメニュー右寄せ」を選択。
これは、ブランド要素（ロゴ）を左に、ナビゲーションを右に配置する、一般的でバランスの取れた視覚的階層を確立するための設定です。 - ヘッダーロゴ：
「選択」ボタンをクリックし、事前に準備したロゴ画像をアップロードします。- 注意：ロゴ画像は、ヘッダー背景と適切に合成されるよう、背景が透過されたファイル形式（例：PNG）で作成・ダウンロードする必要があります。
Canva等のデザインツールでは、ダウンロード時に背景透過オプションを選択できます（有料機能）。
- 注意：ロゴ画像は、ヘッダー背景と適切に合成されるよう、背景が透過されたファイル形式（例：PNG）で作成・ダウンロードする必要があります。
- グローバルメニュー色：
「グローバルナビ文字色」に、前のセクションで定義した基本フォント色（#333333）を入力し、デザインの一貫性を維持します。 - グローバルナビメニュー幅：
「メニュー幅をテキストに合わせる」にチェックを入れます。
- ヘッダーレイアウト：
- 【
変更をまとめて保存】をクリックします。
表示要素の整理
コンテンツへの集中を促すため、サイトの視覚的ノイズとなりうる不要な要素を非表示に設定します。
固定ページ設定
- ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】 > 【固定ページ】タブ - 「
パンくずリストの配置」を「表示しない」に設定します。 - 【
変更をまとめて保存】をクリックします。
SNSシェア設定
- ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】 > 【SNSシェア】タブ - 以下の項目のチェックを外します。
- 「
メインカラムトップシェアボタンを表示する」 - 「
メインカラムボトムシェアボタンを表示する」
- 「
- 【
変更をまとめて保存】をクリックします。
SNSフォロー設定
- ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】 > 【SNSフォロー】タブ - 「
フォローボタンを表示する」のチェックを外します。 - 【
変更をまとめて保存】をクリックします。
アピールエリアとカルーセルの設定
トップページの第一印象を決定づけるメインビジュアル（アピールエリア）と、ユーザーの回遊を促進するスライド式記事一覧（カルーセル）を設定します。
ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】
| 設定タブ | 設定項目 | 推奨設定値 | 技術的解説 |
| 【アピールエリア】 | アピールエリアの表示 | フロントページのみで表示 | トップページの第一印象を決定づけるメインビジュアルとして機能させるため。 |
エリア画像 | [任意の画像をアップロード] | 推奨サイズは横幅1600px, 高さ600px前後。このサイズを遵守することで、様々なデバイスでの表示崩れを防ぐ。 | |
テキストエリア表示 | 「テキストメッセージエリアを表示する」のチェックを外す | 画像上のテキストオーバーレイを無効化し、ビジュアルデザインを損なわないようにするため。 | |
| 【カルーセル】 | カルーセルの表示 | フロントページのみで表示 | ヘッダー画像直下に配置し、ユーザーに回遊を促す動的コンテンツを提供するため。 |
表示内容 | 人気記事（期間： 全期間） | アクセスの多い実績のある記事を優先的に表示し、サイト内エンゲージメントを高めるため。 | |
カルーセルの並び替え | ランダム | 訪問ごとに異なる記事を提示し、コンテンツの多様性をアピールするため。 |
上記設定後、【変更をまとめて保存】をクリックします。
フッター領域の構成
サイトの最下部に位置するフッター領域のデザインと機能を設定し、サイト全体の完成度を高めます。
- ナビゲーションパス：
【WordPressダッシュボード】 > 【Cocoon設定】 > 【Cocoon設定】 > 【フッター】タブ - 以下の項目を仕様に従い変更します。
- フッター色：
フッター文字色：
サイト全体のフォントカラー（#333333）に統一します。フッター背景色：
最初に設定したサイトキーカラーに合わせると、デザインに統一感が生まれます。
- フッター表示タイプ：
「ロゴ & メニュー & クレジット」を選択します。
フッターにもブランドロゴを配置することで、サイト全体のブランディングを強化します。 - フッターメニュー幅：
スマートフォン表示時のレイアウト最適化のため、値を「120」に設定します。
- フッター色：
- 【
変更をまとめて保存】をクリックします。
検証ポイント：モバイルビューの確認
この時点で、テーマの基本レイアウト設定は完了です。
PCのキーボードでF12キーを押すと、開発者ツールが起動してモバイル表示に切り替えることができます。
スマートフォンでの表示崩れがないかを確認してください。
以上で、サイト型トップページ構築の基盤となるテーマの基本設定が完了しました。
次のフェーズでは、実際にトップページに表示されるコンテンツをブロックエディタで構築していきます。
フェーズ2：トップページ用固定ページのコンテンツ構築
それでは、WordPressのブロックエディタを使用し、サイトの主要コンテンツ（新着記事、人気記事、カテゴリー別記事など）を構造的に配置していきます。
これは本カスタマイズの中核をなす作業であり、訪問者に対してサイトの全体像を分かりやすく提示することを目的とします。
まず、記事一覧を見れる固定ページを新規作成します。
ナビゲーションパス：
【WordPressダッシュボード】 > 【固定ページ】 > 【新規追加】を選択します。
ページタイトルを「Blog」として作成を開始してください。
【保存】をしておいてください。
次にトップページ専用の固定ページを新規作成します。
ナビゲーションパス：
【WordPressダッシュボード】 > 【固定ページ】 > 【新規追加】を選択します。
ページタイトルを「Home」として作成を開始してください。
新着記事ブロック
サイトの最新情報を提示するセクションを構築します。
- 段落ブロックを追加し、「
新着記事」などの見出しを入力します。
ツールバーから中央揃え、太字に設定し、右側のブロック設定パネルからタイポグラフィのサイズをMに変更します。
また、好みがあればスタイルを指定してもいいですね。 - 見出しの下に
「新着記事」ブロックを追加し、以下のパラメータを設定します。表示する記事の数：3表示タイプ：カードに枠線を表示するタイトル：太文字に設定
「新着」ブロックの下に「ボタン」ブロックを追加し、テキストに「新着記事一覧」と入力します。- ボタンを中央揃えに設定し、スタイル設定で背景色をサイトのキーカラー、角丸スタイルを適度に適用します。
- ボタンにリンクを設定します。
URLには、「Blog（固定ページ）」のURLを選択してください。
鉛筆のマークでリンクオプションが表示されますで「新しいタブで開く」を有効化します。
【＋】をクリックして検索窓に「新着」と入力すれば『新着記事』ブロックが出てくるよ！
人気記事ブロック
訪問者の関心が高いコンテンツを提示し、サイト内での回遊を促進します。
- 新着記事ブロックの下に
「区切り」ブロックを挿入します。スタイルはお好みで選択してください。
セクションを視覚的に分離します。 - 「
人気記事ランキング」などの見出しを作成し、前項と同様にスタイリングします。 「人気記事」ブロックを追加し、以下のパラメータを設定します。表示する記事の数：3表示タイプ：カードに枠線を表示するタイトル：太文字に設定ランキング：「ランキング番号を表示する」にチェックを入れます。
カテゴリー別記事ブロック
サイトの主要カテゴリーを提示し、専門性とコンテンツの網羅性をアピールします。
- 人気記事ブロックの下に、再度
「区切り」ブロックを挿入します。 - 「
人気のカテゴリー」などの見出しを作成し、スタイリングします。 「カラム」ブロックを追加し、「33 / 33 / 33」の3カラムレイアウトを選択します。- 各カラムに対して、以下の要素を構築する作業を繰り返します。
- カテゴリー見出し：
段落ブロックを追加し、各『カテゴリー名』を入力後、中央揃え、太字に設定します。 - 記事一覧：
「新着」ブロックを追加し、表示数を3、表示タイプを「カードに枠線を表示する」に設定します。 - カテゴリーフィルターの適用：
「全カテゴリーを表示する」をOFFにして、表示したいカテゴリーにチェックを入れます。 - ボタン：
「他も読む」などのテキストでボタンを設置し、対応するカテゴリーのアーカイブページURLをリンクとして設定します。 - リンクの設定方法：
「他も読む」のテキストを選択して【リンクボタン】をクリックします。
検索窓に「カテゴリー名」を入力して、「カテゴリーのリンク」を選択します。
鉛筆マークをクリックして「新しいタブで開く」のチェックを入れて有効化して【保存】をクリックしてください。
- カテゴリー見出し：
プロフィールおよび問い合わせブロック
サイト運営者の信頼性を示し、コミュニケーションの窓口を設置します。
- カテゴリー別記事ブロックの下に
「区切り」ブロックを挿入し、「運営者情報」の見出しを作成します。 - Canva等のツールで作成したプロフィール画像を
「画像」ブロックを使用してアップロードします。 - 再度
「区切り」ブロックを挿入し、「お問い合わせ」の見出しを作成します。 「Contact Form 7」ブロック（または使用している問い合わせフォームプラグインのブロック）を追加し、既存の問い合わせフォームを選択してページに埋め込みます。
検証ポイント：モバイルビューの確認
全てのコンテンツブロックの配置が完了しました。
再度F12キーでモバイル表示を確認し、各セクションが意図通りに縦に並んで表示されていることを検証してください。
これで、トップページに表示する全てのコンテンツ構造が完成しました。
次の最終フェーズで、このページをサイトの正式なトップページとして適用し、デザインの微調整を行います。
フェーズ3：最終調整と公開設定
この最終フェーズでは、フェーズ1および2で構築した設定とコンテンツを統合し、作成した固定ページをウェブサイトの正式なトップページとして公開します。
まず、作成した「ホーム」固定ページをエディタ画面右上の「公開」ボタンをクリックして公開状態にしてください。
ページレイアウトと不要要素の非表示設定
サイト型レイアウトを完成させ、固定ページに自動で表示される不要なメタ情報をCSSで非表示にします。
- 固定ページの編集画面で、右側のページ設定パネルから
「ページタイプ」を「1カラム（狭い）」に変更します。- 技術的意図:
「1カラム」ではなく「1カラム（狭い）」を選択することで、サイドバーを完全に非表示にしつつ、ワイドスクリーンでの一行あたりの文字数を適切に保ち、可読性を向上させます。
- 技術的意図:
「タイトルを表示しない」、「読む時間を表示しない」、「目次を表示しない」にチェックを入れます。- 更新日の変更パネルは
「更新日の消去」を選択します。 「公開」ボタンをクリックして変更を保存します。
ホームページ表示設定の変更
WordPressのコア設定を変更し、サイトのルートURL（例: https://example.com/）にアクセスした際に、今回作成した「ホーム」固定ページが表示されるように設定します。
これはカスタマイズの最終ステップです。
- ナビゲーションパス：
【WordPressダッシュボード】 > 【設定】 > 【表示設定】 「ホームページの表示」オプションで「固定ページ」を選択します。「ホームページ」のドロップダウンメニューから、作成した固定ページ（「Home」）を選択します。- 【
変更を保存】ボタンをクリックします。
これで全てのカスタマイズ作業が完了しました。
サイトにアクセスし、トップページが意図した新しいデザインに切り替わっていることを確認してください。
さいごに
本記事で解説した手順を実行することで、WordPressテーマ「Cocoon」の標準的なブログ型レイアウトは、独自性と専門性を備えた戦略的なサイト型トップページへと変貌を遂げます。
このカスタマイズは、単に視覚的な魅力を向上させるだけでなく、サイト構造の独自性を確保することで、GoogleからのSEO評価を高める上でも重要な技術的施策です。
完成したトップページは、訪問者に対する強力な第一印象を形成し、サイト内での回遊を促進することで、コンテンツ全体の価値を最大化する基盤として機能します。
