Cocoon｜汎用ブロック「タブ見出しボックス」のデザインをスタイリッシュにする

WordPress 無料テーマ『Cocoon』の『タブ見出しボックス（Cocoon汎用ブロック）』のデザインをスタイリッシュにするカスタマイズ方法をご紹介します。

お気に入りのカスタマイズなので当サイトでも適用中です！

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

タブ見出しボックスをスタイリッシュにするカスタマイズのビフォーアフター

パソコン表示

スマホ表示

タブ見出しボックスをスタイリッシュにするカスタマイズの流れ

1. WordPress 管理画面にアクセスする
2. 【外観】⇒【テーマエディター】をクリックする
3. カスタマイズ用コードをコピーする
4. コードをスタイルシート（style.css）に貼り付ける
5. 【ファイルを更新】をクリックする

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る（図解）】をクリックしてください。それぞれの手順を画像付きで解説しています。

タブ見出しボックスをスタイリッシュにするカスタマイズ用コード

/************************************
** タブ見出しボックス（Cocoon 汎用ブロック）のデザインをスタイリッシュにする
************************************/

/*枠組み*/
.tab-caption-box {
	position: relative; /*要素の配置*/
	margin-top: 2em; /*上の余白*/
	margin-right: 2%; /*右の余白*/
	margin-left: 2%; /*左の余白*/
}

/*ラベル*/
.tab-caption-box-label {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
	font-size: .833333em; /*文字の大きさ*/
}

/*コンテンツ*/
.tab-caption-box-content {
	padding: 2.2em 1.2em 1em; /*内側の余白*/
	border-width: 1px; /*線の太さ*/
	border-radius: 0; /*丸み*/
	font-size: .9375em; /*文字の大きさ*/
}

/*横幅 440px 以下に適用される*/
@media screen and (max-width: 440px){
	/*枠組み*/
	.tab-caption-box {
		margin-right: 0; /*右の余白*/
		margin-left: 0; /*左の余白*/
	}
}

Cocoon ブロックの『タブボックス』と余白等を合わせてありますので、一緒に使っていただいても違和感がありません。