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

Cocoonテーマ（2.7.3～）には「タブ」ブロックが標準搭載されており、直感的な切り替え表示が可能です。

実は、ちょっとしたカスタマイズを加えるだけで、おしゃれで使いやすい表示タイプを10種類以上追加できるようになります。

この記事では、初心者でも安心！コピペでOKの簡単カスタマイズ方法を紹介。サイドバーからワンクリックでスタイル変更ができ、ブログのデザイン性・操作性が一気にアップします。

有料テーマに負けない見た目と使い心地を、無料テーマ「Cocoon」でも手軽に実現できます。「もっと自分好みのブログにしたい」という方は、ぜひチェックしてみてください。

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

当カスタマイズの目的は、以下の複数スタイルをサイドバーから簡単に選択することです。

Cocoonデフォルトのほか、表示タイプ3×10種類追加しています。実用性の高いシンプルなデザインを厳選しました。

表示タイプの使い分け

項目は多く表示されますが、タブの表示タイプは大きく分けて以下の３種類です。

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です。

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