yStandard 見出しカスタマイズサンプル

yStandard 見出しカスタマイズサンプル

yStandardでは、本文内の見出しにこそ運営者の個性が現れると考え、テーマ初期状態では見出しのデザインが何もない状態になっています。

見出しはCSS(スタイルシート)でカスタマイズすることが前提となっていますが、テーマ側でデザインを入れていない分、余計なスタイルの上書きの必要がなく、カスタマイズしやすいことがyStandardの特徴でもあります。

このページではいくつか見出しデザインのサンプルを紹介いたします。

※今後、テーマの設定から簡単に見出しのデザインを選べる機能を追加予定です。

見出しカスタマイズの方法

見出しのカスタマイズはCSSを編集しますが、管理画面から簡単にCSSを追加することができます。

CSSの編集方法についてはこちらの記事を参考にしてください▼

CSS(スタイルシート)カスタマイズのやり方、CSSを入力する場所について
yStandardは「カスタマイズありきの一風変わったWordPressテーマ」ということで、ある程度CSS(スタイルシート)等でカスタマイズされることを前提に…
wp-ystandard.com

このページで紹介する見出しのカスタマイズは投稿詳細ページ・固定ページの見出しのカスタマイズになります。

また、例はすべてh2でサンプルを掲載しているので、必要に応じてh3h4に書き換えてください。

サンプルのHTMLの構造は見出しブロックで作成できる下記HTMLになります。

<h2>見出しサンプル</h2>

見出しサンプル

下線見出し(細タイプ)

下線見出し(細タイプ)の見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding-bottom: .25em;
	border-bottom:1px solid #222222;
}

下線見出し(太タイプ)

下線見出し(太タイプ)の見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding-bottom: .25em;
	border-bottom:2px solid #222222;
	font-weight:bold;
}

下点線見出し(細タイプ)

下点線見出し(細タイプ)の見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding-bottom: .25em;
	border-bottom:1px dashed #222222;
}

左枠線(細タイプ)

左枠線(細タイプ)の見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding-top: .25em;
	padding-bottom: .25em;
	padding-left: .5em;
	border-left: 2px solid #222222;
}

左枠線(太タイプ)

左枠線(太タイプ)の見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding-top: .25em;
	padding-bottom: .25em;
	padding-left: .5em;
	border-left: 4px solid #222222;
	font-weight:bold;
}

左枠線 + 背景色

左枠線 + 背景色の見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding-top: .55em;
	padding-bottom: .5em;
	padding-left: .5em;
	background-color:#f6f6f6;
	border-left: 4px solid #222222;
	font-weight:bold;
}

上下枠線

上下枠線の見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding-top: .55em;
	padding-right:.25em;
	padding-bottom: .5em;
	padding-left:.25em;
	border-top: 2px solid #222222;
	border-bottom: 2px solid #222222;
	font-weight:bold;
}

下線2種類

下線2種類の見出しCSSカスタマイズサンプル
.entry-content h2 {
	position:relative;
	padding-bottom: .25em;
	border-bottom: 2px solid #eeeeee;
}
.entry-content h2::after {
	content: "";
	width: 80px;
	height: 2px;
	position:absolute;
	left: 0;
	bottom: -2px;
	background-color: #222222;
}

短く下線(揃え位置連動)

短く下線(揃え位置連動)の見出しCSSカスタマイズサンプル 指定なし・左揃え
指定なし・左揃え
短く下線(揃え位置連動)の見出しCSSカスタマイズサンプル 指定なし・中央揃え
中央揃え
短く下線(揃え位置連動)の見出しCSSカスタマイズサンプル 指定なし・右揃え
右揃え
.entry-content h2 {
	position:relative;
	padding-bottom: .25em;
}
.entry-content h2::after {
	content: "";
	width: 50px;
	height: 1px;
	position:absolute;
	left: 0;
	bottom: -1px;
	background-color: #222222;
}
.entry-content h2.has-text-align-center::after {
	right: 0;
	margin-right: auto;
	margin-left: auto;
}
.entry-content h2.has-text-align-right::after {
	left: auto;
	right: 0;
}

吹き出し

吹き出しの見出しCSSカスタマイズサンプル
.entry-content h2 {
	position:relative;
	padding: .55em .5em .5em;
	background-color: #eeeeee;
}
.entry-content h2::after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 100%;
	left: 30px;
	border: 16px solid transparent;
	border-top: 16px solid #eeeeee;
}

ステッチ

ステッチの見出しCSSカスタマイズサンプル
.entry-content h2 {
	padding: .55em .5em .5em;
	border: 2px dashed #ffffff;
	background-color: #eeeeee;
	box-shadow:0 0 0 8px #eeeeee;
}

リボン

リボンの見出しCSSカスタマイズサンプル
.entry-content h2 {
	position:relative;
	padding: .55em .5em .5em;
	margin-bottom: 1em;
	background-color: #eeeeee;
}
.entry-content h2::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	border-bottom: 12px solid transparent;
	border-right: 16px solid #aaaaaa;
}

下線ストライプ

下線ストライプの見出しCSSカスタマイズサンプル
.entry-content h2 {
	position:relative;
	padding-bottom: .5em;
}
.entry-content h2::after {
	content: "";
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: repeating-linear-gradient(-45deg,#cccccc,#cccccc 2px,#ffffff 0,#ffffff 4px);
}

カギ括弧

カギ括弧の見出しCSSカスタマイズサンプル
.entry-content h2 {
	position:relative;
	padding: .75em 1em .5em;
}
.entry-content h2::before,
.entry-content h2::after {
	content: "";
	width: 24px;
	height: 24px;
	position: absolute;
}
.entry-content h2::before {
	top: 0;
	left: 0;
	border-top: 1px solid #222222;
	border-left: 1px solid #222222;
}
.entry-content h2::after {
	right: 0;
	bottom: 0;
	border-right: 1px solid #222222;
	border-bottom: 1px solid #222222;
}

カギ括弧を文量に合わせるパターン▼

カギ括弧(文字量に合わせるパターン)の見出しCSSカスタマイズサンプル
.entry-content h2 {
	display: inline-block; /* 追加 */
	position:relative;
	padding: .75em 1em .5em;
}
.entry-content h2::before,
.entry-content h2::after {
	content: "";
	width: 24px;
	height: 24px;
	position: absolute;
}
.entry-content h2::before {
	top: 0;
	left: 0;
	border-top: 1px solid #222222;
	border-left: 1px solid #222222;
}
.entry-content h2::after {
	right: 0;
	bottom: 0;
	border-right: 1px solid #222222;
	border-bottom: 1px solid #222222;
}

※このパターンの場合、文字揃えの設定が無視される点に注意が必要です。

1文字目だけ大きく

1文字目だけ大きくするパターンの見出しCSSカスタマイズサンプル
.entry-content h2:first-letter {
	font-size: 2em;
	color: #666666;
	font-weight: bold;
}

色のカスタマイズ方法

ここまでのサンプルでは色がすべて黒、グレーでした。

もし、色を変える場合は#222222 のように書かれた部分を16進数の色コードを書き換えます。

「下線見出し(細タイプ)」の線の色を変えた場合▼

下線色を変えた見出しサンプル
.entry-content h2 {
	padding-bottom: .25em;
	border-bottom:1px solid #07689f; /* 線の色を #222222 から #07689f に変更 */
}

文字色を変える場合は color: #222222; を追加し、色コード部分をカスタマイズしてください。

.entry-content h2 {
	padding-bottom: .25em;
	border-bottom:1px solid #07689f; 
	color: #07689f; /* 文字色を #07689f に変更 */
}