Cocoonのタブ見出しボックスを有料テーマ風に！簡単カスタマイズ手順まとめ

Cocoonテーマの「タブ見出しボックス」、もっとおしゃれに使いこなしてみませんか？

このブロックはシンプルで使いやすいのが魅力ですが、

• 「線の太さや余白を整えてスタイリッシュにしたい」
• 「ページ内で複数のデザインを使い分けたい」

そんな希望を叶えるカスタマイズをご紹介します。

この記事では、Cocoonのタブ見出しボックスに7種類のカスタムデザインを追加し、エディタのサイドバーからワンクリックで切り替えられる方法を紹介します。

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

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

このカスタマイズの目的は、Cocoonの「タブ見出しボックス」に複数のスタイルを追加し、エディタのサイドバーから簡単に切り替えられるようにすることです。

タブ見出しボックスのスタイル実例

Cocoonにはデフォルトで「タブ見出しボックス」が用意されていますが、今回のカスタマイズでは、汎用性の高いシンプルで洗練されたデザインを7種類追加しました。サイドバーから簡単に切り替えができ、サイトの雰囲気に合わせて自由に使い分けられます。

以下、各スタイルの見た目と実際の使用例を紹介します。

デフォルト（Cocoon標準）

スタイル1：枠外タイプ

スタイル2：枠内タイプ

スタイル3：枠上タイプ

スタイル4：枠上（丸）

スタイル5：幅広タイプ

スタイル6：丸アイコンのみ

スタイル7：アイコン左（背景付き）

驚くほどデザインの幅が広がります。見出し位置や形、余白のわずかな違いで印象ががらりと変わるのが面白いところ。クリック操作だけでサクッと切り替えられるので、デザインの試行錯誤も楽しく、効率的です。

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

タブ見出しのテキスト量が多く幅が溢れた場合、デザインごとに表示方法が異なります。

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

• スタイル1（枠外）
• スタイル2（枠内）
• スタイル3（枠上）
• スタイル4（枠上・丸）

スタイル5（幅広タイプ）は、複数行に改行されて表示されます。

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

以下の手順に沿って設定してみましょう。

Cocoonタブ見出しボックス｜カスタマイズの注意点と特徴

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

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

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

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

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

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

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