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

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

直感的な操作でタブを切り替えられるため、「情報をコンパクトにまとめたい」「見た目を整理したい」といった要望にも簡単に応えられます。

さらに、この記事で紹介するカスタマイズを使えばおしゃれなタブデザインが数分で導入できます。Cocoonを使ったブログ初心者や、デザインを強化したいブロガーに最適です。

完成コードは記事後半で有料公開中。

12種類のデザインを即導入でき、有料テーマのような操作性とデザイン性を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 下線｜均等配置+自動折り返し

以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。

タブブロックのカスタマイズ方法｜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クラスを使うことで、特定のタブブロックだけに中央寄せを適用できます

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

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

• スキンによる影響
  この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • 関連記事 バックアップ＆復元方法
• サーバー設定の影響
  WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。

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

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

• PHP＋CSSの完成版コード（コピペで導入可能）
• 3種類×4のデザインをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で「完成形のタブブロック」を導入したい方はぜひご活用ください。

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