post content

タイトル文字飾りをCSSで

見出しの文字飾りをpost Content のカスタムCSSで設定して一度おけば、便利です。

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

				
					.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;
}


				
			

カスタム CSS

高度な設定
高度な設定 カスタムCSS

タイトルの飾りは

見出し1

吾輩は猫である。

見出し2

名前はまだない。

見出し3

どこで生れたか頓と見当がつかぬ。

見出し4

何でも薄暗いじめじめした所で

見出し5

ニャーニャー泣いていた事だけは

見出し6

記憶している。

タイトル文字飾りをCSSで

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連コンテンツ

最近の記事

タイトル文字飾りをCSSで