AFFINGER6(アフィンガー6)の段落間の余白を広げる方法と要素間の余白を広げる方法についてご紹介します。
AFFINGER6の段落間の余白はデフォルトで20pxになっていますがもっとゆったりさせたいという人が多いようです。なので今回はAFFINGER6で段落間の余白を広げる方法について調べてみました。調べてわかったのは段落間を広げる専用の設定箇所はないということです。最新版で専用の設定場所ができました!
ここでは段落間の余白を広げる方法と要素間の余白を広げる方法を紹介します。
段落間の余白を広げる方法は2種類です。一括で広げる方法と指定箇所だけ広げる方法を紹介します。また、要素間の余白を広げる方法としてスペーサーブロックを紹介します。
AFFINGER6で段落間の余白を広げる方法1:「ブロック下の余白:小」を変更する(「段落(Pタグ)下の余白」)

まずは段落間の余白をすべて一括で広げる方法です。これはブロック下の余白:小での値で決まります。余白の悩みはだいたいこれで解決すると思いますよ!
段落間の余白が一括で広がったと思います。
AFFINGER6で段落間の余白を広げる方法2:「ブロック下の余白:大」を使う方法

先ほどのブロック下の余白:小はすべての段落に適用されるものです。ブロック下の余白:大を使うとピンポイントで余白を取りたい段落に余白を適用できます。
「ブロック下の余白:大」の使い方
ブロック下の余白:大の使い方を説明します。
「ブロック下の余白:大」の値を変更する
ブロック下の余白:大の大きさは変更できます。もっと余白が欲しい場合は設定しなおしてあげましょう。
解説
仕組みはこうです。段落にブロック下の余白、大を適用するとその段落にhas-st-margin-bottom has-st-margin-bottom-2
というclassが付与されます。最初に設定した値はこのclass名を持っているもに対して適用されます。こうして段落の下の余白は広がります。ちなみにこのclass名はAFFINGER独自のものなのでAFFINGERでしか使えません。他のテーマに移行したら余白は消えてしまいます。
ブロック下の余白は段落に関して言えば大と-大と-小にしか反映されません。小は使えないので注意です。小の場合は段落にclassを付与しませんでした。そのため小の余白を設定しても反映されることはありません。なぜ小の設定がが段落には適用されないかは謎です。
さきほども述べたように大以外に、-大と-小も設定した値が適用されます。マイナスが付いていても実際の値はプラスを使っても大丈夫なようです。これを応用すれば余白の大きさを3段階で使い分けることができます。
結論
「ブロック下の余白」機能は初心者におすすめです。ただし毎回設定を変える必要があるためちょっと手間がかかります。
メリット
- 簡単(コードをいじらなくても大丈夫)
- CSSなのでコードに影響しない
デメリット
- 毎回設定を変えるのがめんどう
- 1パターン(工夫すれば3パターン)しか大きさは選べない
- テーマを変えると余白は消える
AFFINGER6で要素間の余白を広げる方法1:「スペーサー」ブロックを使う方法
上で紹介した方法は「段落(p)」だけに反映される設定です。段落以外。つまり画像やリスト、その他の全ての要素間の余白は広がりません。ここからは段落以外の要素間を広げる方法について解説します。
まず紹介するのが 「スペーサー」ブロックです。余白を取る一番シンプルで簡単な方法です。
「スペーサー」ブロックを挿入する
スペーサーブロックの使い方を説明します。まずは挿入の仕方です。
間隔を調整する
次に、間隔を調整します。
「スペーサー」ブロックの使い方は以上です。
解説
「スペーサー(spacer)」ブロックとはブロック間の余白を広げるため(だけ)に存在するブロックです。いろんな場所で使用できます。
スペーサーを挿入すると毎回このようなコードが挿入されます→<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
。これはAFFINGER独自のコードではなくどのテーマでも使えるコードです。なので今後テーマを変えたとしても余白は残ります。
結論
「スペーサー」ブロックは余白を広げたい場合に微調整としてたまに使うのがいいと思います。使いすぎには注意しましょう!一括修正できないためあとから修正するのが面倒になりますし、コードも長くなってしまいます。サイトスピードのことを考えるとコードはなるべく短くしたいところです。
メリット
- 簡単(コードをいじらなくても大丈夫)
- 余白ごとに間隔を自由に設定できる
- テーマを変えても余白は消えない
デメリット
- 毎回挿入するのがめんどう
- 修正が大変
- コードが長くなる
特別編:CSSで一括設定する方法
CSSを使って段落間もその他の要素間も一括で広げる方法です。
ここからは中級者向けの設定になります。CSSの使い方が最低限わかる必要があります。
ここからは当サイトのオリジナルカスタム方法になります。動作は十分確認していますが想定外の不具合が発生することも考えられます。万一不具合が起きたら使用を中止してください。問題が起きても当サイトは責任を負いかねます。
CSSコードを追記する
CSSコードを追記します。

子テーマのstyle.cssかカスタマイズ画面の追加CSSに移動してください。

下のサンプルコードをコピーして貼り付けてください。貼り付ける場所は全体の範囲です(@media only...の中に入れない)。
ここでは方向性が違う2つのサンプルコードを紹介します。
コードその1余白を広げない要素を選んでいく方法(引き算方式)
1つ目は引き算方式のコードです。ひとまずすべての要素間を広げてあげてその後 広げる必要のないものを除外していきます。こちらの方がおすすめです。
60pxは仮の値なので好きな値に変えてください。
/* (見出し2,3,4以外の)余白を広げる */
.entry-content>*:not(h2):not(h3):not(h4):not(.has-st-margin-bottom--2):not(.has-st-margin-bottom--1):not(.has-st-margin-bottom-2):not(.has-st-margin-bottom-1) {
margin-bottom: 60px;
}
解説
まず、段落だけではなくすべての要素間の余白を広げます。その後、余白を広げる必要のない要素を除外していくやり方です。
まず「見出し2,3,4」は除外しました。見出しの下の余白は広がりません。
そしてブロック下の余白の[-大]、[-小]、[大]を使った場合も除外しました。.has-st-margin-bottom
が付いた箇所は消さないようにしてください。[0]の場合のhas-no-st-margin-bottom
は0!important;
が付いていたので無視しています。
コードその2余白を広げる要素を選んでいく方法(足し算方式)
2つ目は足し算方式のコードです。先ほどと逆の考え方になります。要素を1つずつ選んでいき書き足す方法です。こちらはコードが長くなるのであまりおすすめしません。
/* 余白を広げる(段落、画像、表、リスト) */
.entry-content p,.entry-content figure,.entry-content ul,.entry-content ol:not(.has-st-margin-bottom--2):not(.has-st-margin-bottom--1):not(.has-st-margin-bottom-2):not(.has-st-margin-bottom-1){
margin-bottom:60px;
}
/* 「見出し付きフリーボックス」のタイトルが影響を受けないようにする */
.p-free{
margin-bottom:20px!important;
}
解説
まず、段落だけ余白を広げてみます。すると当たり前ですが段落しか余白は広がりませんん。逆を言うと他の要素(リスト、画像、テーブルを含むすべての要素)の余白は広がらないということです。これではバランスがとても悪くなってしまいます。
なのでバランスを取るために他の要素も同じように余白を確保してあげます。上のサンプルコードでは段落(p)の他に画像と表(figure)、リスト(ul,ol)の余白を確保するようにしました。これらの要素間は段落と同じように広がります。これらに加えて他の要素も追加したい場合はサンプルコードに以下のコードを追加していってください。.entry-content ol
のあとに,.entry-content 付け足す要素
です。付け足す要素の直後に:not(.has-st-margin-bottom--2....
が来るようにしてください。サンプルコードの並びを参考にしてください。一応、要素のクラス名を数個書き出しました。参考にしてください。
- 「メモ」ブロック→(.wp-block-st-blocks-memo)
- 「マイボックス」ブロック→(.wp-block-st-blocks-my-box)
- 「見出し付きフリーボックス」→(.wp-block-st-blocks-midashi-box)
- 「バナー風ボックス」→(.wp-block-st-blocks-flexbox)
- 「カスタムボタン」→(.wp-block-st-blocks-my-button)
- 「会話ふきだし」ブロック→(.st-kaiwa-box)
:not(has-st-margin-bottom
以下のコードは上で紹介したブロック下の余白の[-大]、[-小]、[大]の設定を邪魔しないためのものです。消さないようにしてください。[0]の場合のhas-no-st-margin-bottom
は0!important;
が付いていたので無視しました。
.p-free
は「見出し付きフリーボックス」ブロックのタイトル部分が上のコードの影響を受けるため再定義しました。消さないようにしてください。
結論
全部に一括して適用できます。CSSがわかって自分で設定できる人におすすめです。上で紹介した「スペーサー」ブロックや「ブロック下の余白」機能を併用すると表現の幅が広がります。
メリット
- 一括で変更できる(過去の記事にも適応)
デメリット
- CSSの理解がある程度必要
- 今後テーマを変えたら引き継がれない
以上、AFFINGER6(アフィンガー6)の段落下の余白、要素下の余白を広げる方法を紹介しました。
\ いいね!お願いします! /
この記事が役に立ったよーという方はTwitterにいいねをしてもらうと嬉しいです!フォローもぜひ!