Cocoonのタブブロックをもっと便利に！サイドバーでデザインを選べる着せ替え機能

Cocoonテーマ（2.7.3～）に待望の「タブブロック」が標準搭載！

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

これ、とっても便利なんです！

標準機能になる前は、せっせとHTMLを手書きして実装していた方も多いのではないでしょうか？

とはいえ、

• 「もっとおしゃれに見せたい」
• 「デザインを変えてブログ全体の雰囲気に統一感を出したい」
• 他のテーマ（SWELLなど）っぽいUIに憧れている

そんな声に応えるべく、この記事では「タブブロックのデザインを自由に切り替える」カスタマイズ方法をご紹介します。

この記事を読むと…

• Cocoonでも有料テーマ並みの洗練されたタブデザインが実現できる
• サイト全体のデザイン性・操作性がアップし、読者の満足度や回遊率にも好影響
• 情報整理がしやすく、見やすい記事構成が作れるようになる

• 実装手順は有料公開しています。「コピペでサクッと導入したい方」はぜひ最後までご覧ください。具体的な実装手順を見る

実装イメージ｜Cocoonタブブロック

Cocoonのデフォルトスタイルに加え、3タイプ×10種類、合計30種類の新しい表示スタイルをご用意しました。

豊富な選択肢が揃っていますが操作はとっても簡単。サイドバーからお好みのスタイルをワンクリックで選ぶだけ！ シンプルな実用性を備えたデザインを厳選し、サイトの雰囲気を手軽にグレードアップできます。

表示タイプの使い分け

タブの表示タイプは大きく分けて以下の３種類です。

1. 横スクロールタイプ
2. タブ均等配置+横スクロールタイプ
3. タブ均等配置+自動改行タイプ

表示サンプル

以下、実際の表示例を掲載します。デザインや操作感などを参考にしてくださいね。

デフォルトスタイル

1-横スクロールタイプ

• 1-1 外枠付き
• 1-2 シンプル
• 1-3 吹き出し
• 1-4 丸
• 1-5 丸吹き出し
• 1-6 シンプル（ボーダー）
• 1-7 吹き出し（ボーダー）
• 1-8 丸（ボーダー）
• 1-9 丸吹き出し（ボーダー）
• 1-10 下線

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

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

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

1-4 丸／横スクロール

1-5 丸吹き出し／横スクロール

1-6 シンプル（ボーダー）／横スクロール

1-7 吹き出し（ボーダー）／横スクロール

1-8 丸（ボーダー）／横スクロール

1-9 丸吹き出し（ボーダー）／横スクロール

1-10 下線／横スクロール

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

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

• 2-1 外枠付き
• 2-2 シンプル
• 2-3 吹き出し
• 2-4 丸
• 2-5 丸吹き出し
• 2-6 シンプル（ボーダー）
• 2-7 吹き出し（ボーダー）
• 2-8 丸（ボーダー）
• 2-9 丸吹き出し（ボーダー）
• 2-10 下線

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

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

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

2-4 丸／均等配置+横スクロール

2-5 丸吹き出し／均等配置+横スクロール

2-6 シンプル（ボーダー）／均等配置+横スクロール

2-7 吹き出し（ボーダー）／均等配置+横スクロール

2-8 丸（ボーダー）／均等配置+横スクロール

2-9 丸吹き出し（ボーダー）／均等配置+横スクロール

2-10 下線／均等配置+横スクロール

3-タブ均等配置+自動改行タイプ

• 3-1 外枠付き
• 3-2 シンプル
• 3-3 吹き出し
• 3-4 丸
• 3-5 丸吹き出し
• 3-6 シンプル（ボーダー）
• 3-7 吹き出し（ボーダー）
• 3-8 丸（ボーダー）
• 3-9 丸吹き出し（ボーダー）
• 3-10 下線

3-1 外枠付き／均等配置+自動改行

3-2 シンプル／均等配置+自動改行

3-3 吹き出し／均等配置+自動改行

3-4 丸／均等配置+自動改行

3-5 丸吹き出し／均等配置+自動改行

3-6 シンプル（ボーダー）／均等配置+自動改行

3-7 吹き出し（ボーダー）／均等配置+自動改行

3-8 丸（ボーダー）／均等配置+自動改行

3-9 丸吹き出し（ボーダー）／均等配置+自動改行

3-10 下線／均等配置+自動改行

Cocoonタブブロックの使い方

Cocoonタブブロックのカスタマイズ

タブブロックのカスタマイズをいくつか紹介します。

タブの色の変更方法

タブの色はCSS（カスタムプロパティ：CSS変数）を使って変更できます。

以下のコードはタブの色を変更するためのCSS変数を定義しています。このCSSを追加して、カラーコード部分をお好みのコードに変更します。

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

変数の内容

• --cocoon-tab-label-color: タブ全体の背景色を定義します。
  • デフォルトは#f2f2f2（薄いグレー）が設定されています。
• --cocoon-tab-label-active-color: 選択されているタブの背景色を定義します。
  • デフォルトは#404453（ダークグレーに近い色）が設定されています。

CSS変数のメリット

• 同じスタイルを複数箇所で再利用できます。
• 色の変更を行いたい場合、CSS変数を一箇所変更するだけでサイト内すべての箇所に反映されるので、管理が楽になります。

詳しいCSSカスタムプロパティの解説は、以下のページを参考にしてください。

タブを中央寄せにする方法

タブを均等配置にしない場合デフォルトでは左寄せで表示されますが、中央寄せにすることもできます。

以下のCSSを追加します。

.tab-label-group {
   justify-content: center; /*タブを中央寄せ*/
}

特定のブロックだけスタイルを変更する方法

「追加CSSクラス」を使うことで、サイト全体ではなく特定のブロックにだけスタイルを適用することができます。詳しくは以下の記事を参考にしてください。

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

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

• スキンによる影響
  • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
• 子テーマを利用
  • 必要なコードは必ず子テーマに記述してください。
• バックアップの重要性
  • 編集前に必ずバックアップをおこなってください。
  • バックアップ＆復元方法
  • 特にPHPに記述ミスがあるとサイトが表示されなくなる可能性があるため、FTPソフト等で元に戻せるようにしておくと安心です。
• PHPエラーが発生した場合の対処

実装手順｜Cocoonタブブロックのデザインをサイドバーで切り替えするカスタマイズ

実装手順は以下の２ステップ。

それぞれのコードを子テーマに貼り付けるだけでOKです。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。