【Cocoon】タブブロックの使い方とデザイン強化カスタマイズ｜均等配置・横スクロール対応

WordPressテーマCocoon（2.7.3～）に標準搭載された、待望の「タブブロック」。

タブを切り替えるだけで表示内容を入れ替えられるため、「情報をコンパクトにまとめたい」「ページをすっきり見せたい」といった場面でとても役立つブロックです。

さらに、この記事で紹介するカスタマイズを使えば見た目にもこだわったタブデザインを短時間で導入できます。

HTMLやCSSに詳しくなくても基本はコピー＆ペーストだけ。Cocoonを使い始めたばかりの方からデザインを一段階レベルアップさせたい方まで、幅広く活用できます。

有料テーマのような操作性とデザイン性をCocoonのままで実現できるのが大きな魅力です。当サイトでも実際に使用しているカスタマイズなので、ぜひ使ってみてください。

Cocoonタブブロックのおすすめ活用例

まずは、Cocoonタブブロックを実際に使った例をご覧ください。

選べるデザイン一覧｜Cocoonタブブロックのカスタマイズ例

Cocoonのタブブロックはデザインを工夫すると使い勝手と見栄えがぐっと良くなります。ここでは代表的な標準 + 3タイプ（12種類）の表示例を紹介します。

次に、各スタイルの特徴・使用例・実際の表示サンプルを掲載します。

デフォルト

Cocoon標準のシンプルなタブです。

1-横スクロールタイプ

1-1 外枠付き｜横スクロール

1-2 シンプル｜横スクロール

1-3 吹き出し｜横スクロール

1-4 下線｜横スクロール

2-タブ均等配置+横スクロールタイプ

• 幅を超えた場合には横スクロールが有効になります。

2-1 外枠付き｜均等配置+横スクロール

2-2 シンプル｜均等配置+横スクロール

2-3 吹き出し｜均等配置+横スクロール

2-4 下線｜均等配置+横スクロール

3-タブ均等配置+自動折り返しタイプ

3-1 外枠付き｜均等配置+自動折り返し

▽ 当サイト使用ページ

タブ切り替えを使ってレイアウト例の比較をしています。

3-2 シンプル｜均等配置+自動折り返し

3-3 吹き出し｜均等配置+自動折り返し

▽ 当サイト使用ページ

タブ切り替えを使ってカテゴリごとの人気記事を表示しています。

3-4 下線｜均等配置+自動折り返し

Cocoonタブブロックのカスタマイズ方法｜CSSを使った応用

Cocoonのタブブロックは標準でも便利ですが、少し工夫するとブログに合わせたオリジナルデザインに。目的・手順・コード例で解説します。

タブの色を変更する

• 目的：ブランドカラーやサイト配色に合わせたいとき
• 手順：子テーマの style.css に以下のCSSを追加
• 参考： WEB色見本 原色大辞典（HTMLカラーコード）

:root {
   --cocoon-tab-label-color: #f2f2f2; /* 非アクティブ時の背景色 */
   --cocoon-tab-label-active-color: #dbb6a2; /* 選択したタブの背景色 */
}

• 設定ポイント
  • --cocoon-tab-label-color
    　→ 未選択タブの背景色
  • --cocoon-tab-label-active-color
    　→ 選択中タブの背景色

CSSカスタムプロパティ（変数）で管理しているので、色を変えるだけで全体に反映されます。

タブの形を丸くする

• 目的：角を丸めて柔らかい印象にしたいとき

• 手順
  1. 子テーマの style.css に以下のCSSを追加
  2. 特定のタブだけ適用したい場合 、ブロックエディターの「高度な設定」→ 「追加CSSクラス」に rounded-tabs を入力

.rounded-tabs .tab-label-group .tab-label {
   border-radius: 30px;
}

• ポイント
  • border-radius: 30px → 値を小さくすると四角に近づきます
  • 全タブに適用したい場合は .tab-label-group .tab-label のみに記述すればOK
  • 「追加CSSクラス」の使い方はこちらの記事で解説しています

タブを中央寄せにする

• 目的：均等配置ではなく中央寄せで整えたいとき
• 手順：
  1. 子テーマの style.css に以下のCSSを追加
  2. 特定のタブだけ適用したい場合 、ブロックエディターの「高度な設定」→ 「追加CSSクラス」に centered-tabs を入力

.centered-tabs .tab-label-group {
   justify-content: center; /* タブを中央寄せ */
}
.centered-tabs .tab-label-group .tab-label {
   flex: none; /* 均等配置を解除 */
}

ポイント：

• justify-content: center; … 横方向の中央寄せ
• flex: none; … 均等配置を解除し、タブ幅を内容に合わせる
• 全体に適用するならクラス指定を外して .tab-label-group に直接指定
• 追加CSSクラスを使うことで、特定のタブブロックだけに中央寄せを適用できます

Cocoonタブブロックの基本操作（はじめての方向け）

この記事ではカスタマイズ方法を中心に解説していますが、はじめて使う方でも迷わないように基本操作を簡単にまとめます。

注意点と特徴｜Cocoonタブブロックカスタマイズのポイント

このカスタマイズは基本的に コピペで安全に導入でき、Cocoon標準環境で動作確認済み です。ただし、利用しているスキンやサーバー設定によっては挙動が変わる場合があります。作業前に以下のポイントを押さえておくと安心して進められます。

Cocoonタブブロックの実装手順｜完成コードのご案内

ここから先は、完成版コードをまとめた有料パートになります。

これまでの無料パートでは、タブブロックの仕組み・できること・デザイン例までを解説しました。

その内容を踏まえた上で、「あとは迷わず、そのまま使える形で導入したい」方向けに動作確認済みの完成コードを公開しています。

1. functions.php に PHP コードを貼り付け
2. style.css に CSS を貼り付け
3. サイドバーで希望のスタイルを選択
4. プレビューで表示を確認 → 完成！

※導入前に不明点がありましたら、お気軽にお問い合わせください。