ブログ運営

【AFFINGER6】コピペでOK!見出しの上の余白だけを広げるカスタマイズ

こんにちは!マーク(@marklog0323)です。

この記事ではWordPressのテーマ「AFFINGER6」の見出しの上の余白だけを広げる方法を紹介します。

CSSを使う方法ですが、コピペでOKなので、CSSの知識は必要ありません。

はじめに

「AFFINGER6」は使える機能や見出しの種類がめちゃくちゃ多いので、適当に使うと見出しが本文に溶け込みやすいという難点があります。

見出しの上下の余白を変更する機能もあるのですが、上下同じ値にしかできないので、大きな値にすると、今度は見出しと下の本文との間が開きすぎてしまいます。

見出しの文字を大きくするのもひとつの手ですが、今回は「見出しが本文に溶け込まないように、下の本文と離れすぎないように、見出しの上の余白だけを変更しよう」というわけです。

いずれ追加されるだろうと思ってる機能なんだけど、未だに追加されてないんだよね

マーク

見出しの上の余白だけを変更する方法

最初にお伝えしたように、今回はCSSを追記して、見出しの上の余白を変更します。コピペでOKです。

まずは、コピペするCSSから紹介しますね。

/* 見出しの上の余白を変更 */

h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2),
h2[class*="is-style-st-heading-custom-"] {
	margin-top: 60px;
}
.post h3:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2):not(.rankh3):not(.post-card-title):not(#reply-title),
h3[class*="is-style-st-heading-custom-"] {
	margin-top: 40px;
}
.post h4:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2):not(.point):not(.rankh4),
h4[class*="is-style-st-heading-custom-"] {
	margin-top: 30px;
}

上記のCSSをコピーして、WordPress管理画面から[外観]→[テーマエディター]へと進み、スタイルシート(style.css)の最後に貼り付けるだけです。

▲貼り付けた後は[ファイルを更新]を忘れずに。

ちなみに、クラシックエディター、ブロックエディターの両方に対応しています。ブロックエディターで、見出しブロックのスタイルを変更しても大丈夫です。


余白を調整する

上記のCSSは、H2見出しの上の余白を「60px」に、H3見出しの上の余白を「40px」に、H4見出しの上の余白を「30px」にする記述です。

数値を差し替えれば、余白を調整することができます。基本的には、H2見出しの上の余白を一番大きく、H4見出しの余白を一番小さく取るようにしましょう。

数値を変更する場合、数字は半角で入力してください。また、他の記述を変更しないように注意してください。

このブログの見出しの上の余白は、H2見出しから順に「80px」「60px」「40px」だよ。

マーク

おわりに

個人的には、今回紹介した「見出しの上の余白だけを広げるカスタマイズ」は、「AFFINGER6」を使うなら、かならずやっておくべきカスタマイズだと思っています。そのくらい、見出しが本文に溶け込んでしまっているサイトをよく見かけます。

前述の通り、いずれは「AFFINGER6」に追加される機能だと思いますが、それまではCSSを追記して対応しましょう。記事がグッと読みやすくなりますよ。

-ブログ運営