Cocoonタブブロック｜複数デザインをサイドバーで切り替えるカスタマイズ

Cocoonテーマには、直感的にタブ切り替えができる便利な「タブ」ブロックが標準搭載されています。（Cocoon 2.7.3～）

そこでこの記事では、簡単操作で切り替えられる表示タイプ3×10種類のスタイルをタブブロックに追加するカスタマイズを紹介します。サイドバーから選ぶだけでブログのデザイン性が一気にアップ。初心者でも簡単に実現できる手順をお届けします。

• Cocoon タブブロック
• Cocoon ブログカード
• Cocoon 白抜きボックス
• Cocoon タブ見出しボックス
• Cocoon ラベルボックス
• Cocoon アイコンボックス
• Cocoon アコーディオン（トグル）
• Cocoon 新着記事・人気記事ブロック

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

当カスタマイズの目的は、以下の複数スタイルをサイドバーから簡単に選択することです。Cocoonデフォルトのほか、表示タイプ3×10種類追加しています。実用性の高いシンプルなデザインを厳選しました。

以下、タブブロック実際の表示例を掲載するので参考にしてください。

デフォルトスタイル

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タブブロック｜カスタマイズの注意点と特徴

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

• スキンによる影響
  • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによってはスタイルの重複等で表示が崩れる場合があります。
• 子テーマを利用
  • 子テーマを使用することで安全性を確保しています。
  • 万が一不要になった場合は、追加したコードを削除することでデフォルトに戻せます。
• PHPエラーが発生した場合の対処
  エラー表示が出て保存できない場合、以下の項目を確認してください。

• WAF設定
  サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
• ベーシック認証
  • サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。

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

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

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

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