Cocoonタブブロックの使い方＆おしゃれカスタマイズ｜ワンクリックで12デザイン切替

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

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

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

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

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

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

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

タブブロックの追加方法

• 画面左上の「＋」ボタン（ブロック追加）をクリック。
• ブロック検索欄に「タブ」と入力。
• 検索結果から「タブ」ブロックを選択して挿入。

タブ名の変更・追加・削除

• タブの見出しを設定
  • タブブロックを選択した状態で、画面右側のブロック設定パネルを開く。
  • 「タブ設定」セクションで、各タブの見出し（例：「Tab 1」）を編集。
• タブを追加
  • タブブロック内の「＋」ボタン（タブエリアの右側）をクリック。新しいタブが自動で追加されます。
• タブの削除
  • サイドバー「タブ設定」で対象のタブの「タブ削除」ボタンをクリック。

タブコンテンツの入力

1. タブブロック内で、編集したいタブをクリックして選択します。
2. 選択したタブ内のブロックエリアに、テキスト、画像、リスト、ボタンなど、任意のブロックを追加します。

タブデザインの選択（この記事で追加）

タブの見た目を調整します。サイドバーの「スタイル」からを選択（例：「外枠付き」「吹き出し」）。

• 選べるデザイン詳細は以下のカスタマイズ例をご覧ください。
• 設定後、公開前にプレビューでデザインや動作を確認し完成です。

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

Cocoonのタブブロックは標準でも十分使えますが、デザインを工夫すると見栄えがぐっと良くなります。ここでは代表的な標準 + 3タイプの表示例を紹介します。

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

デフォルト

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 下線｜均等配置+自動折り返し

タブブロックのカスタマイズ方法｜CSSでデザインを強化

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

タブの色を変更する

• 目的：ブランドカラーやサイト配色に合わせたいとき
• 手順：子テーマの style.css に以下のCSSを追加

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

ポイント：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タブブロックの実装手順｜完成コードのご案内

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

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

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

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

最短で導入したい方はぜひご活用ください。

※導入前に不明点があれば、お気軽にお問い合わせください。