【Cocoon】タブブロックのタイトルデザインを変更

2025年3月4日

WordPressテーマ「Cocoon」のタブブロックのタイトルデザイン変更方法となります。

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加。

.tab-label-group {
	width:100%;
	display: flex;
	justify-content: center; /*タブ位置中央*/
	margin: 0px auto 10px auto !important; /*タブ余白*/
}
.tab-label-group .tab-label {
	margin: 0px;
	padding: 0.4em 1.5em; /*タブ余白*/
	background: none;
	font-size: 16px; /*文字サイズ*/
	color: #979797; /*文字色*/
	text-align:center; /*文字位置*/
	cursor: pointer;
}
.tab-label-group .tab-label.is-active {
	background: none;
	color: #245b5e; /*選択時文字色*/
	font-weight: bold; /*選択時文字太さ*/
	border-top: 3px solid #245b5e; /*選択時上ライン*/
}
.tab-label-group .tab-label:hover {
	color: #245b5e; /*ホバー時文字色*/
	font-weight: bold; /*ホバー時文字太さ*/
	border-top: 3px solid #245b5e; /*ホバー時上ライン*/
}

動作確認： Mac mini M2 – Safari iPad Air 4 – Safari iPhone 12 – Safari

以上でWordPressテーマ「Cocoon」のタブブロックのタイトルデザイン変更方法となります。