ブログ立ち上げ後、即 Cocoon-grayishスキン を使って
ブログを「ブログ型」から サイト型トップページ に変えた手順まとめ。
📌 サイト型トップページに変えた理由
Cocoon-grayishは初期状態でも十分におしゃれですが、
見せたいコンテンツを自由に並べられる「サイト型」構成 にすることで、
✔ 読者が知りたい情報に早くアクセスできる
✔ 見た目の印象がよくなる
✔ 「ブログ紹介文」や「おすすめ記事」を目立たせられる
などのメリットを感じたため、筆者はサイト型に変更しました。
🌱 サイト型トップページ作成の準備
ダウンロードが必要になります。公式サイトからダウンロードページに行けますので
- grayish-cstmpat-css-main.zip（プラグイン）
- grayish_cstm_pattern_frontdemo-main.zip（デモパターン）
の二つを準備してください
① CSSプラグインを導入
Cocoon-grayishのダウンロードした「grayish-cstmpat-css-main.zip」をWordPress にインストール・有効化します。
② パターン（JSON形式ブロックパターン）を準備
grayish公式サイトやデモページから、パターンファイル（.json）「grayish_cstm_pattern_frontdemo-main.zip」 をダウンロードします。
🛠 実際のトップページ制作手順
①パターンを読み込み
ダウンロードしたパターン（json）を
「外観」→「デザイン」→からデザイン画面で登録します。
こんな画面になるので→パターン
JSONパターンからインポートでいったん全てインポートします
②フロントページを固定ページで作成
WordPress管理画面 → 「固定ページ」→ 「固定ページを追加」でページを作成。
ここがトップページになります。
③ ブロックを貼り付けて組み立て
編集画面で ドラッグ＆ドロップ でパターンを並べればOK。
固定ページ名は公式サイトに習ってTop Pageとしておきましょう。
画面のとおりクリックしていくと先ほどインポートしたデータがマイパターンとして表示されますので、これを配置していくことがサイト型構成を作るという事です。
💡 配置例
この順で選択していけばそれらしくなります
- About
- Picup
- New Post
- Categoty
- Ranking
- Contact
作成した固定ページをトップページに設定する方法（Cocoon共通）
Cocoonでサイト型トップページを作る場合、「固定ページ」をトップページとして指定する必要があります。ここでは、すでに作成した固定ページをトップページとして表示させる設定手順を解説します。
① 表示設定を開く
- WordPress管理画面
- 「設定」→「表示設定」をクリック
ここで、トップページの表示方法を変更します。
② ホームページの表示を「固定ページ」に変更
「ホームページの表示」項目で、以下のように設定します。
- ○ 固定ページ を選択
- ホームページ： → 先ほど作成した トップページ用の固定ページ を選択
- 投稿ページ： → （任意）記事一覧用の固定ページを指定 ※ 未設定でも問題ありません
③ 設定を保存する
画面下部の
「変更を保存」 ボタンをクリックします。
これで、サイトのトップページが
記事一覧 → 固定ページ に切り替わります。
✨ まとめ
- Cocoon-grayishは初心者でも サイト型トップページが作りやすい
- 公式のパターンとCSSプラグインを使うと、見た目の完成度が高まる
- 最初は細かい設定に戸惑うが、慣れれば直感的に編集可能
ぜひ公式のマニュアルやデモページを参考にしながら、
自分だけのサイト型トップページを作ってみてください！
