Cocoon「タブ見出しボックス」複数デザインをサイドバーで切り替えるカスタマイズ

テーマ「Cocoon」を使っていると、カスタマイズしたブロックデザインを複数使えたらいいな～ということがよくあります。

今回は、ブロック「タブ見出しボックス」において、複数のデザインを簡単に切り替えるカスタマイズを紹介します。

Cocoon「アイコンボックス」のデザイン切り替えも紹介しています。

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

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

実際の操作イメージ（動画）をご覧ください。

「タブ見出しボックス」のスタイルは５種類

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

汎用性を重視してすっきりとシンプルなデザインにしました。

タブ見出しの位置や形、そして何よりも余白を少し変えるだけでもぐんと印象が変わりますよね！手動で追加CSSクラスを入力せずにクリック一つでデザインが選べます。

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

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

• 検証はスキン「なし」でおこなっています
  • お使いのスキンにより、「タブ見出しボックス」部分に他のスタイルが入っている場合は表示が崩れることがありますのでご了承ください

• 子テーマを使うため、比較的安全におこなえます
• 当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります

• PHPでエラーがでる場合は下記をご確認ください

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

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

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

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