Cocoonタブブロックを使いやすくカスタマイズ｜均等配置・折り返し・横スクロールをワンクリック化

Cocoonのタブブロックはとても便利なのですが、

• タブを均等幅にしたい
• スクロールではなく自動で折り返したい
• デザインを選びたい

などと感じたときに標準機能では設定できません。

そこで、実際にサイト運営で使いやすかった形をベースに、

• 均等配置
• 自動折り返し
• 吹き出し・下線デザイン

などを、編集画面から切り替えられるよう整理しました。

一度入れてしまえば、「毎回CSSを書く」「配置を微調整する」といった作業が減るので、記事制作がだいぶラクになります。

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

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

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

まずは「どんなデザインが作れるか」を見てみてください。

編集画面からデザインをワンクリックで選べるので、ブロックごとに使い分けできます。

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

デフォルト（比較用）

Before

まずはCocoon標準のタブブロックです。

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

After

ここからは追加するデザインサンプルです。カスタマイズ後の変化を比較してみてください。

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を使った応用

ここまでは完成版デザインを紹介しましたが、タブブロックは少しCSSを調整するだけでもかなり印象が変わります。

ここでは、比較的よく使う調整方法をまとめて紹介します。

タブの色を変更する

• サイトカラーに合わせたい
• 今の色だと少し浮いて見える

そんなときは、CSS変数の色を変更するだけで簡単に調整できます。

子テーマの style.css に以下のCSSを追加します。

: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 に以下を追加します。
2. ブロックエディターの「高度な設定」→ 「追加CSSクラス」に rounded-tabs を入力します。

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

ポイント

• border-radius: 30px
  → 数値を小さくすると四角寄りになります
• 全タブに適用したい場合
  → .tab-label-group .tab-label のみに記述すればOK

▶ 追加CSSクラスの使い方はこちらの記事で解説しています

タブを均等幅にする

「タブ名の長さがバラバラで整って見えない」

そんなときは、タブ幅を均等にするとかなりスッキリします。

子テーマの style.css に以下のCSSを追加します。

.tab-label-group .tab-label {
   flex: 1; /* タブ幅を均等に */
 }

Cocoonタブブロックの基本操作｜はじめて使う方向け

この記事ではカスタマイズ方法を中心に紹介していますが、タブブロック自体はとてもシンプルです。

「＋」→「タブ」で検索すると追加できます。（※タブボックスではありません）

あとは、

• タブ名を変更
• 必要に応じてタブを追加
• 各タブ内に文章・画像・ボタンなどを配置

するだけでOKです。

今回追加するカスタマイズを導入すると、サイドバーの「スタイル」から、

• 外枠付き
• 吹き出し
• 下線
• 均等配置
• 折り返しタイプ

などをワンクリックで切り替えられるようになります。

Cocoonの装飾ブロック全体を一覧で確認したい方は、こちらの記事も参考にしてください。

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

基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。

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

ここから先では、実際に当サイトでも使用している完成版コードをまとめて掲載しています。

• あと少し整えたい
• 毎回CSSを書くのが面倒
• デザインを統一したい

そんなときに、すぐ使える形で整理しています。

コードにはコメントも付けているので、あとから色や余白を調整したい場合もカスタマイズしやすい構成です。

一度ベースを作っておくと、「この記事はどのタブデザインにするか」を選ぶだけになるので、記事作成がかなりラクになります。

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。

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