見出しを CSS のみでカスタマイズする

この記事では、WordPress の投稿ページの見出しを CSS のみでカスタマイズする方法を説明します。CSS 内の h3 を h1 や h2 に変えることで h3 タグ以外にも適用することができます。

H1 見出し

/* タイトル */

.article-header.entry-header {
	position: relative;
	margin: 0 auto 4rem;
	padding: 4rem 4rem;
	width: calc(100% -5px);
	border-width: 1px;
	border-style: solid;
	border-color: #333333;
	border-radius: 10px;
}

.article-header.entry-header:after {
	position: absolute;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	top: 5px;
	left: 5px;
	border-radius: 10px;
	background-color: #FFD900;
	content: '';
	z-index:-1;
}

.entry-title {
	text-align: center;
}

H2 見出し

.article h2 {
position: relative;
border: 2px solid #333333;
border-radius: 10px;
background-color: transparent;
width: calc(100% - 5px);
}

.article h2:after {
position: absolute;
width: calc(100% + 4px);
height: calc(100% + 4px);
top: 5px;
left: 5px;
border-radius: 10px;
background-color: #FFD900;
content: '';
z-index:-1;
}