Cocoonのタブ見出しボックスのカスタマイズ｜サイドバーでデザインを簡単切り替えする方法

今回は、Cocoonテーマのブロック「タブ見出しボックス」。

機能としてはオーソドックスでとても使いやすいですが、線をシュッと細くして余白を整えればもっとオシャレになりそうな雰囲気です。そして見出しの位置を変えるとさらに汎用的。

この記事では、タブ見出しボックスの複数デザインをサイドバーで簡単に切り替えできるカスタマイズをご紹介します。

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

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

実装イメージ｜Cocoonタブ見出しボックス

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

「タブ見出しボックス」のスタイル

「タブ見出しボックス」のスタイルはCocoonデフォルトのほか、７種類追加しています。汎用性を重視してすっきりとシンプルなデザインにしました。

色・アイコン設定

色設定（ボーダー色・背景色）・アイコン設定はサイドバーで自由におこなえます。

タブ見出しの位置や形、そして何よりも余白を少し変えるだけでもぐんと印象が変わりますよね！

クリック一つでデザインが選べます。

以下、スタイルごとにボックス実例を掲載します。実際の使用例も合わせて参考にしてください。

デフォルト

スタイル 1：枠外

スタイル 2：枠内

スタイル 3：枠上

スタイル 4：枠上（丸）

スタイル 5：幅広

スタイル 6：丸アイコン

スタイル 7：アイコン左

タブ見出しのテキスト幅が溢れた場合

タブ見出しのテキスト量が多く、幅が溢れた場合の表示サンプルです。

以下のスタイルは、改行されず、溢れたテキストは「…」（三点リーダー）で省略されて表示されます。

• スタイル１
• スタイル２
• スタイル３
• スタイル４

以下のスタイルは、複数行に改行されて表示されます。

• スタイル５

Cocoonタブ見出しボックスの使い方

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条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。