Cocoonで最初に触った4つのデザイン設定

WordPressブログを始める
【PR】広告について:本記事はアフィリエイト広告を含みます。記事内のリンクからサービスへの申し込みが発生した場合、当サイトに報酬が支払われることがあります。ただし、掲載内容は報酬の有無にかかわらず、実際の調査・比較に基づいて作成しています。

Cocoonは設定項目が多く、最初から全部触ろうとすると迷子になりがちです。この記事では、使い始めに実際に手を入れた4つの設定だけを紹介します。完成形を目指すのではなく、迷わず動かし始めるための区切りとして参考にしてください。

最初に触るべき設定は、ヘッダー画像・サイドバー・グローバルメニュー・ピックアップコンテンツの4つです。影響範囲が分かりやすく、後からやり直しが効くものだけに絞っています。これからブログを始める方は、エックスサーバーの始め方を解説した記事も合わせて読むとスムーズです。

Cocoonの設定は最初に絞ったほうが楽になる

Cocoonはデザイン設定の項目が多いため、最初から全部触ろうとすると整理がつかなくなります。今回は、サイト全体の印象や導線に関わる設定だけを先に調整しました。細かな装飾や追加の設定は、運用しながら必要に応じて見直す前提にしています。

1. ヘッダー画像

最初に設定したのはヘッダー画像です。ここを変えるだけでサイト全体の印象が大きく変わるため、最優先にしました。Cocoonは初期状態でも整ったテーマですが、ヘッダーが未設定のままだとどうしても「仮の状態」に見えてしまいます。影響範囲が分かりやすく、画像を差し替えるだけで印象を変えられるため、やり直しのコストも低い設定です。

WordPress管理画面から「Cocoon設定」→「ヘッダー」へ進み、「ヘッダー背景画像」で画像を1枚指定します。細かな表示調整やサイズ指定は後からでも問題ありません。

Cocoonにヘッダー画像を設定する手順
Cocoonにヘッダー画像を設定する手順

凝ったデザインは作らず、サイト全体の雰囲気が伝わるシンプルな画像を選びました。ヘッダーを決めたことで全体のトーンが定まり、その後の設定判断もしやすくなりました。

2. サイドバー

サイドバーは、記事を読み終えたあと「次に何を見ればよいか」が分かる構成を最優先にしました。項目を詰め込みすぎると読みにくくなり、逆に何もないと導線が弱くなります。「最低限の役割に絞る」という基準で整理しました。

プロフィール・カテゴリー・よく読まれている記事など、サイト構造が伝わる要素を中心に配置しています。メルマガ登録やバナーはこの段階では入れていません。訴求の軸が固まる前に設置しても、後から外す可能性が高いためです。設定は「外観」→「ウィジェット」からサイドバーにブロックを追加するだけです。細かい順序や表示条件は運用しながら調整すれば十分です。

3. グローバルメニュー

グローバルメニューは、記事を読む前から「このサイトには何があるか」を伝える場所です。カテゴリーページや固定ページのうち、サイトの方向性が伝わるものだけをメニューに入れています。将来的に増える可能性のあるページや、運用方針がまだ固まっていないページは含めていません。

「外観」→「メニュー」から設定します。カテゴリーや固定ページを選び、表示位置にグローバルメニューを指定するだけです。後から並び替えや差し替えも手間ではないため、完成形を作ろうとせず最低限の構成にとどめています。

WordPressでグローバルメニューを設定する手順
WordPressでグローバルメニューを設定する手順

4. ピックアップコンテンツ

ピックアップコンテンツは、完成形を作ることより「置き場所を確保して表示感覚をつかむ」ことを目的に設定しました。どの記事を推すか決まっていない状態で設置しても、目立つだけの枠になってしまいます。仮の記事でも構わないので一度使ってみて、表示位置やサイズ感を把握することを優先しました。

Cocoonでは、ピックアップコンテンツはメニューとして管理します。「外観」→「メニュー」で専用のメニューを作成し、Cocoon設定の「おすすめカード」から指定します。

Cocoonにピックアップコンテンツを設定する手順
Cocoonにピックアップコンテンツを設定する手順(メニュー作成)
Cocoonのおすすめカード設定画面
Cocoon設定の「おすすめカード」から指定する

どの記事を載せるかは、運用しながら差し替えていく前提にしています。後から入れ替えられる状態を作っておくほうが、結果的に判断が楽になります。

この4つで十分だった理由

今回の設定で意識したのは、すべてを整えることではなく「運用を始めるための土台を作ること」でした。ヘッダー画像でサイトの印象を決め、サイドバーで構造を整理し、グローバルメニューで導線を作り、ピックアップコンテンツで見せたい記事を置く。この4つが揃えば、見た目と動線の両方が最低限整った状態になります。

細かな装飾や追加設定は、記事が増えて運用の方向性が見えてからでも遅くありません。実際に使いながら調整するほうが、無駄な手戻りも減らせます。まずこの4つだけ整えて、記事を書くことに集中する。それがちょうどよい区切りでした。

Cocoonはエックスサーバーが開発をサポートする無料テーマです。エックスサーバーのWordPressクイックスタートなら、申し込み時にCocoonをそのまま選択でき、インストール済みの状態からすぐ設定に入れます。

まとめ

Cocoonは設定項目が多いテーマですが、最初からすべてを触る必要はありません。影響範囲が分かりやすく、後から調整しやすい4つの設定に絞ったことで、迷いなく運用をスタートできました。

ヘッダー・サイドバー・メニュー・ピックアップの4つを整えたら、あとは記事を書きながら調整する。完成形を目指すより、動かし始めることを優先するのが正解です。次にやっておきたい設定として、GA4の初期設定手順をまとめた記事も合わせて確認しておくと、運用の判断がスムーズになります。

Cocoonはエックスサーバーが開発をサポートする無料テーマです。WordPressクイックスタートで申し込めば、Cocoonを選んだ状態からすぐにブログを始められます。定期的にキャンペーンを実施しています。最新の料金は公式サイトで確認してください。

エックスサーバーの公式サイトを見る

コメント

タイトルとURLをコピーしました