【Cocoon】見出しｈ1〜ｈ6を自由にカスタマイズ

2025年2月8日2025年2月20日

まずは見出しのデザインを初期化

初期設定のデザインをリセットしないと2重のCSSが設定されてしまいデザインが崩れるので、変更したい見出し ”h1〜h6” を外観＞テーマファイルエディタ＞style.cssに下記の内容にて追加。

/*見出し初期化*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 { 
	padding: 0;
	margin: 0;
	font-size: medium;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
	background-color: transparent;
}

変更したい”見出し”デザインを “style.css” に追加

変更したい見出し “h1〜h6″のCSSコードを、外観＞テーマファイルエディタ＞style.cssに下記の内容にて追加。

.article h1 {
	/*変更したいデザインCSSコード*/
}
.article h2 {
	/*変更したいデザインCSSコード*/
}
.article h3 {
	/*変更したいデザインCSSコード*/
}
.article h4 {
	/*変更したいデザインCSSコード*/
}
.article h5 {
	/*変更したいデザインCSSコード*/
}
.article h6 {
	/*変更したいデザインCSSコード*/
}

見出しデザインサンプル