Post Content のタイトル文字飾りをまとめてCSSで

ポストコンテントのタイトルの文字飾り

サイト内の見出し、タイトルに統一感があるように、あらかじめ文字飾りや文字の周りのスペースを決めてCSSで設定する。

メリットは、

見た目が良くなる
コンテンツ作成が早くなる
全体の修正する手間は、１箇所で済む

例

※ h2 は、カウンターで番号を付けた。

				
					.main {
counter-reset: h2;
}
.main h2 {
    margin: 30px 20px 1px 20px;
    overflow: hidden;
    counter-increment: h2;
}


.main h2:before {
content: counter(h2) ". ";
	color: #ca2a7a;
	font-size: 1.1em;
	font-weight: 800;
}

.main h3 {
    margin: 1px 20px 1px 30px;
    padding: 2rem 0.5rem 0.3rem 1rem;
    margin-bottom: 1rem;
    background-image: linear-gradient(160deg, #ca2a7a 0 20%, #dedede 20%);
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;
    color: #323232;
}
.main h4 {
    margin: 1px 20px 1px 35px;
	position: relative;
	padding-left: 1.7em;
}
.main h4:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	left: 0;
	top: 0;
	font-weight: 900;
	font-size: 1.1em;
	color: #ca2a7a;
}
.main h5 {
    margin:15px 20px 1px 35px;
	position: relative;
	padding-left: 1.6em;
}
.main h5:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f152";
	left: 0;
	top: 0;
	font-weight: 900;
	font-size: 1.1em;
	color: #ca2a7a;
}
.main h6 {
    margin: 1px 20px 1px 40px;
	position: relative;
	padding-left: 1.2em;
}
.main h6:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	left: 0;
	top: 0;
	font-weight: 900;
	font-size: 1.1em;
	color: #ca2a7a;
}
.elementor-widget-text-editor {
    margin: 0px 10px 0px 10px;
}