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

「こんなことできたらいいな～」を考えました！

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

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

ここがポイント

サイドバーからクリックするだけで５種類のデザインが選べる
- →デザインは後から自由に変更可能（CSS）
同じページ内で複数のデザインが使える
ブロックの汎用性アップ
実装方法は２ヶ所にコードを貼り付けるだけ（所要時間５分程度）
切り替えしない場合でも参考にできるように、各スタイルのCSSを掲載します

有料テーマ風の使い心地になります！

当カスタマイズの実装手順は有料公開です具体的な実装手順を見る

ブロックのデザイン切り替えシリーズ、他にも紹介しています。

特に「ブログカード」カスタマイズと組み合わせると、このようにタブ見出しボックスの中にブログカードを表示できます。タブの文言や背景色等をお好みでカスタムできるのがポイント。

サイドバーで自由に設定できます

アイコン
見出しのテキスト
見出しの背景色
ボックス背景色

組み合わせが便利

Cocoonブログカード／複数の表示スタイルをサイドバーで切り替えるカスタマイズ

この記事では、ブログカードの表示スタイルをサイドバーから簡単に選択するカスタマイズを紹介します。当カスタマイズの実装手順は有料公開です具体的な実装手順を見るブログカードのスタイルに「テキストリンク」を追加しました NEW Cocoonか...

テキストリンクも選べます

Cocoonブログカード／複数の表示スタイルをサイドバーで切り替えるカスタマイズ

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

Contents

実装イメージ／Cocoon「タブ見出しボックス」
1. 「タブ見出しボックス」のスタイルは５種類
2. 「タブ見出しボックス」の使い方
実装方法／Cocoon「タブ見出しボックス」のデザインをサイドバーで切り替えするカスタマイズ
まとめ

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

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

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

サイドバーをクリックするだけで5種類のスタイルを切り替えています

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

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

タブ見出しの色、ボックス背景色は設定から自由に選べます（従来通り）

デフォルト

Cocoonデフォルト：通常のデザイン

スタイル 1

見出しが枠外左上に配置されるデザイン

CSSを見る

.tab-caption-box {
	position: relative;/* 配置 */
}

.tab-caption-box-content {
	margin-top:-2px;/*上部余白*/
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
	padding: 1em 1.5em; /* ボックスの内側余白 */
}

.tab-caption-box-label {
	padding: 0 1em;/* 見出しの内側余白 */
	border-radius: 0;/* 見出しの丸み */
}

スタイル 2

見出しが枠内左上にぴったりと配置されるデザイン

CSSを見る

.tab-caption-box {
	position: relative;/* 配置 */
}

.tab-caption-box-content {
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
	padding: 2em 1.5em 1em; /* ボックスの内側余白 */
}

.tab-caption-box-label {
	padding: 0 1em;/* 見出しの内側余白 */
	border-radius: 0;/* 見出しの丸み */
	position: absolute;/* 配置 */
	top: 0;
	left: 0;
}

スタイル 3

見出しを少し浮かせたデザイン

CSSを見る

.tab-caption-box {
	position: relative;/* 配置 */
}

.tab-caption-box-content {
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
	padding: 1.5em 1.5em 1em; /* ボックスの内側余白 */
}

.tab-caption-box-label {
	padding: 0 1em;/* 見出しの内側余白 */
	border-radius: 0;/* 見出しの丸み */
	position: absolute;/* 配置 */
	top: -10px;
	left: 17px;
}

スタイル 4

少し浮かせた見出しに丸みをつけたデザイン

CSSを見る

.tab-caption-box {
	position: relative;/* 配置 */
}

.tab-caption-box-content {
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
	padding: 1.5em 1.5em 1em; /* ボックスの内側余白 */
}

.tab-caption-box-label {
	padding: 0 1em;/* 見出しの内側余白 */
	border-radius: 30px;/* 見出しの丸み */
	position: absolute;/* 配置 */
	top: -10px;
	left: 17px;
}

スタイル 5

見出しが幅いっぱいに広がり、テキストが中央に配置されるデザイン

CSSを見る

.tab-caption-box {
	position: relative;/* 配置 */
}

.tab-caption-box-content {
	border-radius: 0;/* ボックスの丸み */
	border-width: 1px;/* 枠線の太さ */
	padding: 3.5em 1.5em 1em;/* ボックスの内側余白 */
}

.tab-caption-box-label {
	position: absolute;/* 配置 */
	top: 0;
	left: 0;
	width: 100%;/* 幅いっぱいに */
	text-align: center;/*テキスト中央寄せ*/
	padding: .5em;/* 見出しの内側余白 */
	border-radius: 0;/* 見出しの丸み */
}

変更しているところ

タブ見出しの位置
外枠の線の太さを細くする（1px）
角の丸みをなくしてスタイリッシュにする
ボックス内の余白を少し広めにする(1em～)

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

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

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

ブロックメニューを選択

ブロックエディタで「タブ見出しボックス」を選択します。
お好みのスタイルを選ぶ

サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。

選んだスタイルがすぐに反映されます。
色・アイコン設定

お好みでアイコン設定、色設定をおこなってください。
ボックスの内容を編集

ボックス内にコンテンツを入力したら完成です。

私はスタイル 3が好きで愛用しています

タブ見出しボックス

リストも簡単
リストも簡単

目次に戻る

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

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

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

子テーマを使うため、比較的安全におこなえます
当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります
PHPでエラーがでる場合は下記をご確認ください

サーバー側でベーシック認証（アクセス制限）を設定していないか
- →エラーが表示され編集できません
サーバー側でWAF設定をONにしていないか
- →エックスサーバーではONにしていても影響ないようです

どちらも一時的に解除の上、作業後は設定を元に戻すことで対応可能です。

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

PHPの設定

スタイル切り替えをエディタに追加

PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。

CSSの設定

各スタイルを指定する

CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。

カスタマイズ前にバックアップをおこないましょう。

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

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