Cocoon初心者向け｜初期デザインを整えるカスタマイズ手順
WordPressの無料テーマとして圧倒的な人気を誇る「Cocoon（コクーン）」。非常に高機能でSEOにも強い反面、インストール直後のデフォルト状態はシンプルすぎて「素人っぽい」「他のブログと見た目が被ってしまう」と感じる方も多いのではないでしょうか。
デザインに時間をかけすぎて記事執筆が進まないのは本末転倒ですが、最初にいくつかの基本ポイントを押さえてカスタマイズするだけで、コード（CSS）を書かずにプロのWebサイトのような洗練されたデザインへ一気に変身させることができます。
本記事では、Cocoon初心者向けに、最小限の手間でサイトの見栄えを劇的に良くする初期デザイン調整手順をわかりやすく解説します。
1. デザイン調整前にやっておくべき準備
作業を始める前に、必ず以下の2点を確認・適用しておきましょう。
- 子テーマ（Cocoon Child）を有効化しておく
デザイン設定や追加コードの保護のため、必ず「Cocoon Child」を有効化した状態で作業を行います。
- 「Cocoon設定」画面を開く
Cocoonのデザイン調整の9割は、管理画面の 「Cocoon設定」>「Cocoon設定」 内の各タブで行います。
2. 【ステップ1】「スキン機能」で一瞬で全体デザインを変更
Cocoonには、有志や公式が作成したデザインセット「スキン」が多数用意されています。これを利用するだけで、サイト全体のカラー・フォント・レイアウトが一括でプロ風に整います。
- 「Cocoon設定」>「スキン」タブ を開く
- スキン一覧の中から好みのデザインを選択する
- おすすめのスキン例:
Silkシリーズ（シンプルで清潔感があり、どんなジャンルにも合う）Seasonシリーズ（手軽におしゃれで親しみやすい雰囲気にできる）極（きわみ）シリーズ（和風や落ち着いたブログに最適）
- 画面最下部の 「変更を保存」 をクリック
※スキンを適用した状態で、以下の個別パーツを調整していくのが最も効率的です。
3. 【ステップ2】ヘッダー周り（サイトの顔）を整える
サイトにアクセスした際、一番最初に目に入るヘッダー部分を整えます。
① サイトロゴの設定
文字だけのテキスト表示から、画像ロゴに変更するだけでサイトの信頼感が跳ね上がります。
- 「Cocoon設定」>「ヘッダー」タブ を開く
- 「ヘッダーロゴ」の項目で、作成したロゴ画像をアップロード
- ロゴの表示サイズや位置（左寄せ・中央揃えなど）を調整
② ヘッダー全体の色・背景設定
- 同タブ内の「ヘッダー全体色」で、背景色や文字色を設定
- サイトのテーマカラー（キーカラー）に合わせたシンプルな色合い（白系、ネイビー、くすみカラーなど）を選ぶのがコツです。
4. 【ステップ3】グローバルナビ（メインメニュー）を設置する
ヘッダー下に主要カテゴリーや問い合わせページへの案内リンク（グローバルナビ）を設置します。
- 管理画面の 「外観」>「メニュー」 を開く
- 新規メニューを作成し、表示したい「カテゴリー」や「固定ページ（お問い合わせ等）」を追加
- メニューの位置で 「ヘッダーナビ」 にチェックを入れて保存
これにより、ユーザーがサイト内を回遊しやすくなり、SEOや利便性向上にもつながります。
5. 【ステップ4】記事一覧（インデックス）カードの見た目を変更
トップページやカテゴリーページに並ぶ記事一覧の表示方法（カードデザイン）を整えます。
- 「Cocoon設定」>「インデックス」タブ を開く
- 「カードタイプ」からデザインを選択する
- エントリーカード（デフォルト）: 標準的な横長カード表示
- 大きなエントリーカード / 縦型カード: 画像（アイキャッチ）が大きく強調され、モダンで洗練された印象になります。
- 枠線（ボーダー）の有無や、投稿日・更新日の表示設定を調整します。
6. 【ステップ5】サイドバーとフッターを整理する
ごちゃごちゃしがちなサイドバーを整理して、すっきり見せます。
- 管理画面の 「外観」>「ウィジェット」 を開く
- 不要な初期ウィジェット（「最近のコメント」「メタ情報」など）を削除
- おすすめのウィジェットを配置
- プロフィール（ボックス）: 運営者情報・アイコン画像を設定
- 検索: サイト内検索バー
- 人気記事 / 新着記事: 読ませたい記事をピックアップ
7. サイトデザインを崩さないための3つのコツ
- 色を使いすぎない（メインカラーは2〜3色に絞る）
ベースカラー（白・グレー系）、メインカラー（サイトのテーマ色）、アクセントカラー（強調・ボタン用）の3色以内に収めると一気にプロっぽくなります。
- アイキャッチ画像の統一感を意識する
記事ごとにアイキャッチ画像の色味やデザインのトーン（写真メイン、イラストメインなど）を揃えると、トップ全体の統一感が生まれます。
- 装飾（フォント・マーカー）を強調しすぎない
太字やマーカーを使いすぎるとゴチャゴチャして読みづらくなります。ここぞというポイントに絞って装飾を施しましょう。
まとめ
Cocoonはコードを書かなくても、標準機能だけで十分に美しく読みやすいサイトを作ることができます。
- スキンを適用して全体の雰囲気を決める
- ヘッダーロゴとグローバルナビを整える
- サイドバーの不要な情報を整理する
初期のデザイン構築は上記のステップで素早く終わらせ、最も重要な「コンテンツ（記事）の作成」に集中していきましょう！