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

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

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

他のブロックデザイン切り替え方法も紹介しています。サイドバーから簡単操作でデザインを変更し、サイト全体を思い通りにカスタマイズする方法をぜひお試しください！

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

よく使うブロックがありましたらお試しください。

実装イメージ／Cocoon「タブ」ブロック

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

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

スタイルのポイント

タブ幅の均等配置

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

横スクロール

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

「タブ」ブロックのスタイル

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

デフォルト

Cocoonのデフォルトです。

1.外枠付き

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

2.シンプル

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

3.吹き出し

吹き出しスタイルです。

4.丸

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

5.丸吹き出し

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

当サイトのサイトマップページ、人気記事欄にこの丸吹き出しスタイルを採用しています！

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

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

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

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

8.丸（ボーダー）

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

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

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

10.下線

シンプルな下線のスタイルです。

「タブ」ブロックの使い方

「タブ」ブロックのカスタマイズ

タブの色の変更方法

タブの色の変更は、CSSのカスタムプロパティ（CSS変数）を使うことで効率的かつ簡単におこなうことができます。

以下のコードは、タブの色を変更するためのCSS変数を定義しています。

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

変数の内容

• --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カスタムプロパティの解説は、以下のページを参考にしてください！

タブの配置方法

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

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

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

改行する配置方法

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

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

以下のCSSを追加します。

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

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

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

追加するCSSから下記の一行を削除してください。

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

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

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

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

以下のCSSを追加します。

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

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

当カスタマイズの注意点と特徴

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

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

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

実装方法／Cocoon「タブ」ブロックのデザインをサイドバーで切り替えするカスタマイズ

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

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

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