作成：2025年10月13日
はじめに
WordPressを始めて1か月。記事も増えてきたころ、ふと気づいたのは「読者が記事を探しづらい」ということでした。
これをきっかけに、Cocoonでヘッダーメニューを整えることに挑戦。
この記事では、初心者の私がカテゴリ設定からメニュー作成、CSS検証までを実体験として紹介します。
ChatGPTに相談しながら、一歩ずつ整えていった過程をそのまま公開します。
第1章：Cocoonを触るたびに分かる「奥の深さ」
WordPressテーマのCocoonは、無料ながら高機能。
最初は「スキン」「インデックス」「OGP」などの専門用語に戸惑いましたが、
設定画面をひとつずつ試していくと、クリック操作だけで主要な見た目や表示方法を切り替えられる“親切設計”だと分かってきました。
失敗しても元に戻せる安心感があり、初心者でも段階的にサイトを整えられます。
今回は、サイトの顔であるヘッダーメニューに取り組み、シリーズ記事をカテゴリ単位で導線化することを目標にしました。
第2章：まずは地図を描く——カテゴリーを整える
メニューはカテゴリーと連動します。
先にカテゴリーを整理しておくと、後の操作がスムーズになり、URLも整います。
手順：カテゴリーの作成
- 管理画面で「投稿」→「カテゴリー」へ進む。
- 次の4つを新規追加する（スラッグは英数字で短くする）。
| カテゴリー名 | スラッグ | 親カテゴリー |
|---|---|---|
| 心の羅針盤 | kokoro | なし |
| 願いは叶う | negai | なし |
| 潜在意識の旅路 | senzai | なし |
| WordPress体験談 | wordpress | なし |
URL例：https://sicom-blog.com/category/kokoro/
記事をカテゴリーに振り分ける
- 「投稿」→「投稿一覧」を開く。
- タイトル下の「クイック編集」をクリック。
- 右側の「カテゴリー」で該当カテゴリにチェックを入れる。
- 「更新」をクリックして保存する。
予約投稿中の記事も同様に振り分けられます。
先に分類しておくと、一覧表示やメニュー導線が整い、管理もしやすくなります。
第3章：いよいよメニューを作成（グローバルナビ）
カテゴリーが整ったら、ヘッダーにカテゴリーメニューを配置します。
Cocoonではプラグイン不要で設定できます。
ステップ1：メニュー画面を開く
- 管理画面で「外観」→「メニュー」へ進む。
- 「新しいメニューを作成」をクリック。
- メニュー名を「ヘッダーメニュー」とする。
- 「メニューの位置」で「ヘッダーメニュー（グローバルナビ）」にチェックを入れる。
ステップ2：カテゴリーを追加
- 左側の「カテゴリー」タブを開く。
- 作成した4つのカテゴリーを選択する。
- 「メニューに追加」をクリックする。
ステップ3：順番を整える・ホームを追加する
- 右側の「メニュー構造」でドラッグ＆ドロップして表示順を調整する。
- 先頭に「ホーム」を置く場合は、左の「カスタムリンク」で次を追加する。
- URL：
https://sicom-blog.com - リンク文字列：
ホーム
「メニューを保存」をクリックする。
完成イメージ
ホーム ｜ 心の羅針盤 ｜ 願いは叶う ｜ 潜在意識の旅路 ｜ WordPress体験談
スマートフォン表示では自動的にドロップダウンメニューに切り替わるため、特別な設定は不要です。
第4章：Cocoon設定で見た目を整える（CSSなしでも美しく）
メニューを作ったあとは、一覧ページの見た目を整える。
Cocoonの魅力は、ここもクリック操作だけでデザイン変更ができることだ。
Cocoon設定 → インデックスのおすすめ設定
| 設定項目 | 内容 |
|---|---|
| フロントページタイプ | カテゴリーごと（3カラム） |
| 表示カテゴリー | 心の羅針盤／願いは叶う／潜在意識の旅路／WordPress体験談 |
| 並び順 | 投稿日（降順） |
| カードタイプ | エントリーカード（軽量タイプ） |
| 抜粋文字数 | 100文字 |
| スマホ設定 | 1カラムで表示する |
この設定だけで、トップページが雑誌のように整う。
画像がズレるときは「メディア → サムネイル再生成」で修正できる。
第5章：CSSを試して分かった「安心できる仕組み」
ブログを運営していると、デザインを少し変えたくなることがある。
私も例外ではなく、「カードの影を少し付けてみたい」と思った。
そもそもCSSとは？
CSS（スタイルシート）とは、サイトの見た目を指定するルールだ。
背景色・文字の大きさ・枠線・余白・影などを設定できる。
CocoonはCSSを直接書かなくても整うが、「もう少しだけ調整したい」ときに使える。
追加CSSの追加方法（驚くほど簡単）
ChatGPTに相談して、軽い影を付けるCSSコードを教わった。
実際に追加してみると、操作は驚くほど簡単だった。
- 管理画面で「外観 → カスタマイズ」を開く。
- 「追加CSS」をクリック。
- コードを貼り付け、「公開」を押す。
ほんの数行で変更が反映される。
初心者の私でも10分もかからずにできた。
初心者でも安心な理由
「追加CSS」はテーマ本体とは独立しており、元のコードを壊すことがない。
つまり、いくら書き足しても「戻せなくなる」ことはない。
不要になったら削除すれば即座に元に戻る。
この仕組みを知ったとき、「CSSって怖くない」と思えた。
自由に試しても元に戻せる――これは初心者にとって大きな安心材料だ。
実際に追加して分かったこと
カードに影をつけるコードを試すと、見た目は少し変わった。
でもページを開くスピードが遅くなった。
ChatGPTに相談しながら検証した結果、「影のCSSが原因」と分かり、削除した。
Cocoon標準でも十分に見やすく、バランスが良い。
結論として、今はCSSを使わず、標準機能だけで運営している。
教訓: 追加CSSは強力だが、必要最小限で。
デザインより「軽さ」と「安定性」を優先する。
第6章：今後の改善課題（CSSと子テーマ運用）
現在は追加CSSを使っていないが、今後少しずつ改善を進める予定だ。
これから取り組みたいことをリスト化しておく。
- 子テーマを活用する。
Cocoonの更新時に上書きされない安全な環境を整える。 - 軽量なCSSのみ再導入。
小さな影や余白など、体験を損なわない範囲で調整。 - PageSpeed Insightsで効果を確認。
見た目だけでなく、速度も数値で把握する。 - ChatGPTに相談して最小コードを取得。
目的を具体的に伝えれば、ピンポイントで安全なコードを提案してくれる。
第7章：カテゴリー説明文を加えて親切に
ヘッダーメニューに並んだカテゴリーをさらに分かりやすくするため、
それぞれのカテゴリーに短い説明文を追加した。
例：「心の羅針盤」カテゴリの説明
迷ったとき、心を整える小さなヒントを。考え方や気づきを短く綴ります。
これだけで読者が「このカテゴリにはどんな記事があるか」を直感的に理解できる。
WordPressの「投稿 → カテゴリー → 各カテゴリ編集」で、説明欄に1〜2文加えるだけでOKだ。
第3部｜メニューが変えたブログ運営と今後の課題・まとめ
第8章：メニューが変えた「ブログの方向性」
ヘッダーメニューを整えたことで、
サイト全体の見た目だけでなく、自分の中の意識の整理が進んだ。
カテゴリーを明確にしたことで、
「どんなテーマで」「誰に向けて」「どんな順番で読んでもらいたいか」
が自然と見えるようになった。
実際にアクセス解析を見てみると、
メニューから記事を読む読者が増えていることにも気づいた。
特に「心の羅針盤」と「願いは叶う」はクリック率が高く、
シリーズとしての流れがある記事ほど回遊が伸びやすい。
「構造を整理すると読者の行動も整理される」——これが今回の最大の発見だった。
第9章：次のステップ——トップページの強化
ヘッダーメニューが整った今、次に目指すのはトップページの充実。
訪問した瞬間に「このブログが何を発信しているのか」が伝わるように、
次のような構成を考えている。
- おすすめカードエリア
人気記事や初めての人に読んでほしい記事を表示。
Cocoonの「おすすめカード」機能で設定可能。 - アピールエリア
ブログの理念や運営者の想いを大きく表示。
例：「10年ぶりに再挑戦する、WordPress初心者の記録ブログ」 - YouTube連携
記事内容と連動した解説動画を埋め込み。
ChatGPTに相談しながら、ナレーション台本を効率的に作成予定。
記事と動画をセットで届ける。
これが、次の運営方針の柱になる。
第10章：体験から得た3つの教訓
1. 構成はデザインである
ブログの「見た目」は、装飾ではなく情報設計そのもの。
カテゴリと導線を整理することで、読者が自然に記事を巡るようになる。
2. 速度は正義
どれだけデザインが良くても、
ページが遅いと離脱される。
CSSを削除したことで読み込みが体感で速くなった。
「速く・軽く・迷わない」が一番のUX（ユーザー体験）だと実感した。
3. CSSは怖くない
Cocoonの「追加CSS」は、元のスタイルを壊さない仕組みになっている。
失敗しても削除すれば元通り。
だから、初心者でも安心して試せる環境がある。
ChatGPTに相談すれば、安全で軽いコードだけを取り入れられる。
第11章：5分で振り返るチェックリスト
- [ ] カテゴリーを4つ作成（
kokoro,negai,senzai,wordpress） - [ ] 投稿をカテゴリーへ割り当てる（クイック編集でOK）
- [ ] 外観 → メニュー → ヘッダーメニューに4カテゴリ＋ホームを追加
- [ ] Cocoon設定 → インデックスを「カテゴリーごと（3カラム）」に設定
- [ ] 抜粋文字数は100、スマホでは1カラム表示
- [ ] 画像は16:9、WebP形式で軽量化
- [ ] 追加CSSは未使用（必要時のみ最小で）
- [ ] 表示を確認（PC／スマホ）＋キャッシュ削除
第12章：まとめ
| 項目 | 内容 |
|---|---|
| 使用テーマ | Cocoon（WordPress 6.8.2） |
| メニュー構成 | 心の羅針盤／願いは叶う／潜在意識の旅路／WordPress体験談 |
| 表示形式 | カテゴリーごと（3カラム） |
| デザイン | エントリーカード（CSS追加なし） |
| CSSの扱い | 追加・削除は簡単。元CSSに影響しない安全設計 |
| 今後の課題 | 子テーマ運用／軽量CSSの再導入／速度計測の継続 |
| 制作フロー | 設定・原稿づくりはChatGPTに相談しながら効率化 |
今日のひとこと
Cocoonの「追加CSS」は、初心者が安心して練習できる場所。
まずは標準設定で“速く・美しく”。その上で少しずつ理想を形にしていけばいい。
エピローグ：再出発のブログ運営へ
10年前にブログを始め、途中でやめてしまった私が、
再び挑戦する気持ちを取り戻せたのは、
「できることが少しずつ形になっていく」このWordPress体験があったからだ。
Cocoonのおかげで、“作る楽しさ”が戻ってきた。
そしてChatGPTと対話しながら進めることで、
ひとつひとつの学びが確実に積み重なっている。
これからもこのブログ「エスアイコムのブログ」で、
WordPress体験談や自己成長の記録を発信していきたい。
同じように再挑戦する誰かの背中を、少しでも押せたら幸いです。