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

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

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

他のブロックデザイン切り替え方法も紹介しています。よく使うブロックがありましたらお試しください。

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

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

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

実用性の高いシンプルなデザインを厳選しました。

スタイルのポイント

タブ幅の均等配置

当カスタマイズでは、各タブ幅が自動的に均等に配置されレイアウトが整います。

横スクロール

タブが横一列に並び、幅を超えた場合には標準設定で横スクロールが有効になります。

タブブロックのスタイル

タブブロックのスタイルはCocoonデフォルトのほか、10種類追加しています。

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

デフォルト

Cocoonのデフォルトです。

1.外枠付き

• コンテンツ部分の外枠付きのスタイルです
• タブ幅は均等配置になります
• タブ間の余白をなくしてフィットさせています

2.シンプル

背景色だけのシンプルなスタイルです。

3.吹き出し

吹き出しスタイルです。

4.丸

タブの形を丸くしたスタイルです。

5.丸吹き出し

タブの形を丸くした、吹き出しスタイルです。

6.シンプル（ボーダー）

タブに枠線をつけたスタイルです。

7.吹き出し（ボーダー）

タブに枠線をつけた吹き出しスタイルです。

8.丸（ボーダー）

タブに枠線をつけ、タブの形を丸くしたスタイルです。

9.丸吹き出し（ボーダー）

タブに枠線をつけ、タブの形を丸くした吹き出しスタイルです。

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変数のメリット

• var(--cocoon-tab-label-color) や var(--cocoon-tab-label-active-color) を使うことで、同じスタイルを複数箇所で再利用できます。
• 色の変更をおこないたい場合、CSS変数を一箇所変更するだけでサイト内すべての箇所に反映されるので、管理が楽になります。

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

特定のタブブロックだけの色を変更

同様に、特定のタブブロックだけの色を変更することもできます。

1. CSSを入力
2. タブブロックのサイドバー「追加CSSクラス」にクラスを追加

例）tab-color-pink クラスをつけて、選択したタブ背景色にピンクを設定

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

難しくはないので、詳しくは「追加CSSクラス」の使い方をご覧ください。

タブの配置方法

タブの数が多くなり幅が溢れた場合、Cocoonの「タブ」ブロックでは柔軟に配置方法を変更できます。

デフォルト設定：横スクロール

標準ではタブが横一列に並び、幅を超えた場合には横スクロールが有効になります。

改行する配置方法

タブが幅を超えた際に、自動的に改行して複数行で表示するように変更することも可能です。

↓分かりやすいように多めにタブを15個並べています。

以下のCSSを追加します。

/* タブラベルグループのスタイル設定 */
.tab-label-group {
    flex-wrap: wrap; /* タブが横幅を超えた場合に複数行で表示する */
}

タブ幅均等配置を解除する場合

当カスタマイズでは各タブが自動的に均等に配置されレイアウトを整えていますが、解除してデフォルトの配置に戻すことも可能です。

追加するCSSから該当する部分を見つけて、下記の一行を削除してください。

/* タブのラベル部分のスタイル */
.tab-label-group .tab-label {
    flex: 1; /* 各タブの幅を自動調整（この一行を削除） */
}

• flex: 1;/* 各タブの幅を自動調整*/の一行を削除します
• このとき閉じカッコ } まで削除しないように注意してください

タブを中央寄せにする場合

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

以下のCSSを追加します。

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

これらの設定により、ブログのレイアウトやデザインに応じて最適なタブ配置が選べます。

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

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

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

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

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

実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。

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

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	500円
お支払い 方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。