【Manablog Copy】マナブログコピーで「見出し」を変更する方法

こんにちは!サラファイです。

マナブログコピーは最高のWordPressテーマですが、見出しのバランスが少しだけ悪いのが少し気になりました。

この記事ではマナブログコピーで「見出し」をバランスのよい感じに変更する方法を説明します。



動作環境 Manablog Copy Ver3.0



事前の準備 | 追加CSSへの登録

追加CSSに下記のCSS(ソースコード)を張り付けてください。
※テーマエディタでstyle.cssに追記してもらう方法でもOKです。

CSS


.single h2 {
	background: #f0f0f0;
	border-left: 9px solid #6090b6;
	font-weight: 600;
	text-indent: -0.5em;
}

.single h3 {
	border-top: 0px solid #6090b6;
	border-left: 9px solid #6090b6;
	border-bottom: 0.5px dotted #888888;
	font-weight: 600;
}

.single h3.underbar {
	border-top: 0px solid #6090b6;
	border-left: 0px solid #6090b6;
	border-bottom: 2px solid #6090b6;
	font-weight: 600;
	text-indent: -0.3em;
}

.single h4 {
	border-left: 9px solid #6090b6;
	color: #333333;
	font-weight: 600;
	font-size: 120%;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

記事の書き方

H2タグ、H3タグ、H4タグは自動的に下記のように変化します。

カスタマイズ版のH3タグを使いたい場合は、下記に示すHTML(ソースコード)をカスタムHTMLブロックにコピーしてください。

カスタマイズ版H3タグ

HTML

<h3 class="underbar">カスタマイズ版H3見出し</h3>

画面表示

カスタマイズ版H3見出し