Cocoonのデザインを1からカスタマイズする設定手順と必要な作業時間

WordPressテーマのCocoonを自身のブログに採用していると、どうしても気になってしまうのが、「サイトデザイン」です。

Yuu

ブログをはじめたての頃、私はこう思っていました。

ネットに溢れる先輩ブロガーたちのサイトは、どれも洗練されていてお洒落なものばかり。それに引き換え、自分のサイトはどこか無機質で面白みがない……。 「もっと自分らしく、デザインにも徹底的にこだわりたい！」

そんなもどかしさを抱えながら、試行錯誤していました。

某有名ブロガーは「サイトデザインは二の次」といっていますが、私はそうは思いません。

どんなに情熱を込めて、寝る間も惜しまずに素晴らしい記事を書き上げたとしても、それだけでは十分ではありません。 記事を読み終えた読者が「もっとこのサイトを知りたい」とトップページを訪れたとき、そこに無機質なリストが並んでいるだけだとしたら、どうでしょうか。

私はかつてアパレル業界に身を置いていました。そこで痛感したのは、商品の価値は「陳列」ひとつで劇的に変わるという事実です。 手に取ってもらえるかどうか、そしてその商品がどれほど魅力的に映るかは、見せ方という「演出」に懸かっているのです。

ブログも、実店舗と同じです。 トップページは、あなたの言葉を並べるだけの場所ではなく、訪れた人を迎え入れる「ショーウィンドウ」であるべき。整えられた陳列が商品の価値を高めるように、ブログもまた、デザインと構成によって記事の価値を最大化できるのだと私は信じています。

前置きが長くなりましたが、サイトデザインにおいて大切なのは「自己満足」で終わらせないことです。 読者が直感的に興味を惹かれる構成や、サイトテーマを体現した空間演出。これらを意識することで、読者は迷うことなくコンテンツに没頭し、結果として離脱率をぐっと抑えることが可能になります。

【検証サイト】プラグインの時間ラボをカスタマイズしていきます。

当サイト「プラグインの時間」の検証用サイトの「プラグインの時間ラボ」というサイトでは、現在Cocoonテーマを利用しています。

どこの項目をどう変更してトップページのデザインを整えたかの過程もお見せしたいので、同じように設定することにより、同じデザインにすることができます。ただ、あなたのサイトのテーマと、私のサイトのテーマが違うように、読者への見せ方も変わってくるので、参考程度にしていただき調整していきながらカスタマイズしていってください。

Yuu

もちろん丸々コピーして利用してもOKです！

ヘッダーの設定

Cocoonのヘッダー設定：ロゴ・キャッチコピーのカスタマイズ

まずはトップページのヘッダー設定（ロゴ・メニュー配置）から実際に行っていきます。

スッキリとしたヘッダーを作る設定です。

ヘッダーレイアウトでトップメニューを選択した際、キャッチフレーズの表示の選択ができなくなってしまいました。

ヘッダーレイアウト＞「トップメニュー」にするとCocoonがキャッチフレーズのHTMLタグ自体を出力しなくなる仕様で、キャッチフレーズの設定ができなくなっています。

キャッチフレーズは、読者がどんなサイトなのかを判断するために絶対に表示させたいので、以下のCSSを適用しました。お好みでカスタマイズしてご利用ください。

/* --- ヘッダーレイアウト調整（余白調整版） --- */

/* 1. ヘッダー全体の余白設定 */
.header-in {
    position: relative; /* 位置の基準点 */
    
    /* ロゴの上にスペースを作る（キャッチフレーズが入る場所） */
    padding-top: 35px !important; 
    
    /* ★ここを追加：ロゴの下にスペースを作る */
    padding-bottom: 15px !important; 
}

/* 2. キャッチフレーズの追加と装飾 */
.header-in::after {
    /* ▼ここに表示させたいキャッチフレーズを入力してください▼ */
    content: "さまざまな検証を行い、最適解をあなたへ";
    
    display: block;
    position: absolute;
    
    /* 上からの位置 */
    top: 5px; 
    
    left: 0;
    width: 100%;
    
    /* 文字の配置 */
    text-align: center;
    
    /* 文字のサイズ・太さ・色 */
    font-size: 12px;
    font-weight: bold;
    color: #003366;
    
    z-index: 100;
}

/* 3. もともとのキャッチフレーズを非表示 */
.tagline {
    display: none;
}

/* --- ヘッダーレイアウト調整（余白調整版） --- */

/* 1. ヘッダー全体の余白設定 */
.header-in {
    position: relative; /* 位置の基準点 */
    
    /* ロゴの上にスペースを作る（キャッチフレーズが入る場所） */
    padding-top: 35px !important; 
    
    /* ★ここを追加：ロゴの下にスペースを作る */
    padding-bottom: 15px !important; 
}

/* 2. キャッチフレーズの追加と装飾 */
.header-in::after {
    /* ▼ここに表示させたいキャッチフレーズを入力してください▼ */
    content: "さまざまな検証を行い、最適解をあなたへ";
    
    display: block;
    position: absolute;
    
    /* 上からの位置 */
    top: 5px; 
    
    left: 0;
    width: 100%;
    
    /* 文字の配置 */
    text-align: center;
    
    /* 文字のサイズ・太さ・色 */
    font-size: 12px;
    font-weight: bold;
    color: #003366;
    
    z-index: 100;
}

/* 3. もともとのキャッチフレーズを非表示 */
.tagline {
    display: none;
}

Cocoonのヘッダー設定：グローバルメニューのカスタマイズ

グローバルメニューには、固定ページもしくは、作成したカテゴリなどを表示することができます。

特に、カテゴリをグローバルメニューに設置しておくと、読者が目的別に記事を探すことができるので、サイトの回遊率がアップします。

表示するメニューとデザインを作成していきます。

STEP

メニューの中身を作る

まずは表示させる項目（カテゴリーや記事）を作成します。ここはCocoon設定ではなく、WordPress標準の機能を使います。

1. WordPress管理画面の 外観 > メニューをクリックします。
2. 「新しいメニューを作成しましょう」 をクリックします。
3. 「メニュー名」 に管理しやすい名前（例：グローバルメニュー、ヘッダーメニューなど）を入力し、「メニューを作成」 ボタンを押します。
4. 左側のリスト（固定ページ、カテゴリー、カスタムリンクなど）から、メニューに入れたい項目にチェックを入れ、「メニューに追加」 をクリックします。
   
   ※ドラッグ＆ドロップで順番を入れ替えたり、少し右にずらして「階層化（ドロップダウン）」させたりできます。

STEP

表示位置を決める（最重要）

ここが一番の落とし穴です。作ったメニューをどこに表示するか指定しないと、画面には出てきません。

1. メニュー構造の下にある 「メニュー設定」 の項目を見ます。
2. 「ヘッダーナビ」 にチェックを入れます。
   • （スマホ用のメニューも兼用したい場合は「モバイルヘッダーナビ」にもチェックを入れます）
3. 「メニューを保存」 ボタンをクリックして確定させます。

STEP

Cocoon設定で色とデザインを整える

デフォルトの状態ではただの背景色（白やグレー）なので、Cocoon設定を使ってサイトのテーマカラーに合わせます。

1. 管理画面の 「Cocoon設定」 > 「ヘッダー」 タブを開きます。
2. ページの下の方へスクロールし、「グローバルナビメニュー」 というエリアを探します。
3. 以下の項目を調整します。
   • グローバルナビ色：背景色を変更できます。（サイトのメインカラーに設定すると統一感が出ます）
   • グローバルナビ文字色：文字の色です。（背景が濃い色は「白」、薄い色は「黒」が見やすいです）
   • グローバルナビメニュー幅：ここを調整することで、チップの幅が変わります。
   • 「コンテンツ幅に合わせる」：メニューの文字の幅と同じ長さになります。
   • 「画面幅いっぱいに広げる」：帯が画面の端まで伸びるスタイリッシュなデザインになります。

正直Cocoonで行えるグローバルメニューの設定は面白みがありません。

おそらく、デザインにこだわる人は「細部までこだわりたい！」という人がほとんどだと思います。
私もこだわりたいので、「プラグインの時間ラボ」ではCSSを採用しました。

以下のコードを貼り付けると、同じデザインが適用されます。

Tips

CSSを追加CSSに記述していくと、コードの境目がわからなくなってしまいます。

その時は、画像のように/*ここからグローバルメニュー*/という風に目印をつけておきましょう。

追加CSSの行で、すでに入力している文字を反転させた後に

Windows: Ctrl + / （スラッシュ）

Mac: Cmd (⌘) + / （スラッシュ）

を押すと、コメントが挿入できるようになります。

文字が入力されていない場所でもこのショートカットキーを押すと、/* */が入力されるので、押した後に入力しても大丈夫です。/*ここに文字をいれてください。*/

/* --- グローバルメニュー最適化版（泡アニメ＆スラッシュ） --- */

/* 1. 項目の幅制限解除と基準点 */
#navi .navi-in > ul > li {
    border: none;
    position: relative;
    width: auto !important;
    max-width: none !important;
}

/* 2. 区切り文字「/」 */
#navi .navi-in > ul > li:not(:last-child)::after {
    content: '/';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-55%);
    font-size: 30px;
    font-weight: 100;
    color: #bbb;
    line-height: 1;
    pointer-events: none;
}

/* 3. リンクの装飾とレイアウト */
#navi .navi-in > ul > li > a {
    /* レイアウト（文字切れ防止） */
    display: flex !important;
    align-items: center;
    width: auto !important;
    height: 100%;
    padding: 15px 35px 15px 20px;
    white-space: nowrap !important;
    
    /* デザイン（フォント・色） */
    color: #003366;
    background: transparent !important;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0px #fff;
    text-decoration: none;

    /* アニメーション用設定 */
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 4. 泡（背景アニメーション） */
#navi .navi-in > ul > li > a::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -200%;
    left: 50%;
    width: 140%;
    height: 180%;
    background-color: #003366;
    border-radius: 45%;
    transform: translateX(-50%) rotate(0deg);
    transition: bottom 0.5s ease-out, transform 0.6s ease-in-out;
}

/* 5. ホバー時の動作 */
#navi .navi-in > ul > li > a:hover {
    color: #fff !important;
    text-shadow: none;
}

#navi .navi-in > ul > li > a:hover::before {
    bottom: -30%;
    transform: translateX(-50%) rotate(180deg);
}

/* --- グローバルメニュー最適化版（泡アニメ＆スラッシュ） --- */

/* 1. 項目の幅制限解除と基準点 */
#navi .navi-in > ul > li {
    border: none;
    position: relative;
    width: auto !important;
    max-width: none !important;
}

/* 2. 区切り文字「/」 */
#navi .navi-in > ul > li:not(:last-child)::after {
    content: '/';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-55%);
    font-size: 30px;
    font-weight: 100;
    color: #bbb;
    line-height: 1;
    pointer-events: none;
}

/* 3. リンクの装飾とレイアウト */
#navi .navi-in > ul > li > a {
    /* レイアウト（文字切れ防止） */
    display: flex !important;
    align-items: center;
    width: auto !important;
    height: 100%;
    padding: 15px 35px 15px 20px;
    white-space: nowrap !important;
    
    /* デザイン（フォント・色） */
    color: #003366;
    background: transparent !important;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0px #fff;
    text-decoration: none;

    /* アニメーション用設定 */
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 4. 泡（背景アニメーション） */
#navi .navi-in > ul > li > a::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -200%;
    left: 50%;
    width: 140%;
    height: 180%;
    background-color: #003366;
    border-radius: 45%;
    transform: translateX(-50%) rotate(0deg);
    transition: bottom 0.5s ease-out, transform 0.6s ease-in-out;
}

/* 5. ホバー時の動作 */
#navi .navi-in > ul > li > a:hover {
    color: #fff !important;
    text-shadow: none;
}

#navi .navi-in > ul > li > a:hover::before {
    bottom: -30%;
    transform: translateX(-50%) rotate(180deg);
}

「アピールエリア」でメインビジュアルを作る

アピールエリア機能を活用すれば、ボタン付きのメインビジュアルを簡単に作成できます。 ヘッダー画像として写真のみを表示することも可能ですが、クリックを促せる「アピールエリア」を使わない手はありません。

このボタンには、最も読んでほしい「看板記事」や、収益につながる「購入ページ」へのリンクを設定し、読者の動線をスムーズに整えましょう。

Yuu

だんだんとトップページのデザインが出来上がってきましたね！

サイドバーの設定：プロフィールと人気記事を表示する

サイドバーは、PCでは画面の横に、スマホでは記事の下に配置されるエリアです。 ここはサイトの回遊率を高める重要なスペースとなるため、「おすすめ記事」や「プロフィール」を置くのが基本です。

さらに、権威性を高める「オープンバッジ」や、YouTube・ポッドキャストなどの「メディアリンク」、収益化のための「広告」などを配置すると効果的です。

プロフィールの設置して、読者に覚えてもらう

STEP

プロフィールのプルダウンをクリック

「[C] プロフィール」 をクリック（またはドラッグ）して、「サイドバー」 の中に追加します。

STEP

右に表示されているサイドバーの中の「[C] プロフィール」 をクリック

• タイトル：空白でOKです（入力すると「プロフィール」という見出しがつきます）。
• ラベル：名前の上に表示されます（例：管理人 / 検証マニア など）。
• 「保存」（または「完了」）をクリックします。

※補足：自己紹介文の変更 プロフィールに表示される文章は、ここではなく 「ユーザー」 > 「プロフィール」 の 「プロフィール情報」 に入力した内容が自動で反映されます。まだの場合はそちらも入力してください。

人気記事を表示して回遊率アップ

プロフィール同様に、「[C] 人気記事」 をさがしてクリック（またはドラッグ）して、「サイドバー」 の中に追加します（プロフィールの下が一般的です）。

以下の項目をお好みで設定します。

記事一覧のデザイン

メインコンテンツでは執筆した記事を表示することができます。

どんな記事があるのか？という読者の目を引くポイントでもあるため、こちらも見せ方にこだわる必要があります。

ここの設定項目はチェックするだけで簡単に更新できるため、設定した項目のみお伝えします。

完成したトップページがこちら

今回デザインをしていったことによって、Cocoonのいいところ取りはしつつ、足りない部分をCSSで補ってデザインしてみました。これくらいの完成度であれば、誰もCocoonで作成したとは思わないでしょう。

無料テーマのCocoonでも、工夫次第でここまでカスタマイズできる――。 ブログ初心者の頃の自分に教えるような気持ちで綴ったこの記事が、あなたのサイト作りの希望になれば幸いです。

ただ、CSSが使えないと、ありきたりな量産デザインになってしまうかもしれないなぁと思いながら作成したのも事実です。

ここまでの設定が「正直、面倒だ」と感じたあなたへ

ここまでCocoonのカスタマイズ術をお伝えしてきましたが、正直に白状します。

今回の設定を仕上げるのに、私は丸3時間を費やしました。

「デザインにはこだわりたい。でも、CSSをいじるのは怖いし、何より執筆に時間を使いたい……。」

もしあなたが今、そう感じているのなら、それは「ツールを見直すタイミング」かもしれません。私が検証を重ねた結果、デザインの「陳列」において一つの最適解だと感じているのが、WordPressテーマ「SWELL」です。

SWELLなら「3時間」が「30分」に変わる

Cocoonで必死にコードを書いて調整したデザインも、SWELLならマウス操作だけで、より直感的に、より洗練された姿に整えることができます。

冒頭でアパレルショップの例えをしましたが、SWELLは「最初から最高の什器と照明が揃っている、洗練された路面店」のようなもの。あなたは商品を並べる（記事を書く）だけで、自動的に魅力的なショーウィンドウが出来上がります。

「デザイン」を自動化し、「言葉」に熱量を注ぐ

サイトデザインにおいて大切なのは「自己満足で終わらせないこと」だとお伝えしました。

SWELLという強力なパートナーを選べば、デザインへのこだわりを諦めることなく、浮いた時間をすべて「読者のための言葉」に変えることができます。

「プラグインの時間」でも、効率化とデザインの両立を目指す方には自信を持っておすすめしています。

SWELLに乗り換えるとできるようになること

私自身、SWELLに乗り換えた瞬間に「これだ！」と確信しました。

実際に使って分かった感動のポイントや、サイト運営がどう劇的に変わったのか。乗り換えを迷っているあなたの判断材料になればと思い、詳細なレビューを綴っています。

あなたが今必要としている「答え」が、ここにあるかもしれません。

あわせて読みたい

CocoonからSWELLへ。執筆速度が変わる決定的な違い 「Cocoonは無料とは思えないほど素晴らしいテーマです」 これには私も100％同意します。機能は豊富だし、困ったときはフォーラムで解決できる。正直、無料テーマでこれ...