AFFINGER6(アフィンガー６)の段落間の余白を広げる方法と要素間の余白を広げる方法についてご紹介します。
AFFINGER6の段落間の余白はデフォルトで20pxになっていますがもっとゆったりさせたいという人が多いようです。なので今回はAFFINGER6で段落間の余白を広げる方法について調べてみました。調べてわかったのは段落間を広げる専用の設定箇所はないということです。最新版で専用の設定場所ができました！
ここでは段落間の余白を広げる方法と要素間の余白を広げる方法を紹介します。
段落間の余白を広げる方法は２種類です。一括で広げる方法と指定箇所だけ広げる方法を紹介します。また、要素間の余白を広げる方法としてスペーサーブロックを紹介します。
AFFINGER6で段落間の余白を広げる方法１：「ブロック下の余白：小」を変更する(「段落（Pタグ）下の余白」)
まずは段落間の余白をすべて一括で広げる方法です。これはブロック下の余白：小での値で決まります。余白の悩みはだいたいこれで解決すると思いますよ！
ブロック下の余白：小は次の場所で変更できます。
デフォルトが20pxなのでそれ以上の値を入れてください。
段落間の余白が一括で広がったと思います。
AFFINGER6で段落間の余白を広げる方法２：「ブロック下の余白：大」を使う方法
先ほどのブロック下の余白：小はすべての段落に適用されるものです。ブロック下の余白：大を使うとピンポイントで余白を取りたい段落に余白を適用できます。
「ブロック下の余白：大」の使い方
ブロック下の余白：大の使い方を説明します。
記事の編集画面に移動してください。
段落で文章を書きます。そしてそれを選択状態にしてください(1)。次に右にあるブロックの設定パネルを展開(歯車マーク→ブロック)(2)。下の方にいくとブロック下の余白という項目がありますのでそれを大に変更します(3)。
これで選択した段落の下の余白がさらに広がります。
ちなみに小というのが先ほど設定した段落（Pタグ）下の余白のことです。最初はすべて小になっています。
「ブロック下の余白：大」の値を変更する
ブロック下の余白：大の大きさは変更できます。もっと余白が欲しい場合は設定しなおしてあげましょう。
設定場所は次の場所です。
ブロック下の余白の[大]の箇所にお好みの数字を入れてください。その値が余白の大きさになります。決まったらSaveボタンを押します。
解説
仕組みはこうです。段落にブロック下の余白、大を適用するとその段落にhas-st-margin-bottom has-st-margin-bottom-2というclassが付与されます。最初に設定した値はこのclass名を持っているもに対して適用されます。こうして段落の下の余白は広がります。ちなみにこのclass名はAFFINGER独自のものなのでAFFINGERでしか使えません。他のテーマに移行したら余白は消えてしまいます。
ブロック下の余白は段落に関して言えば大と-大と-小にしか反映されません。小は使えないので注意です。小の場合は段落にclassを付与しませんでした。そのため小の余白を設定しても反映されることはありません。なぜ小の設定がが段落には適用されないかは謎です。
さきほども述べたように大以外に、-大と-小も設定した値が適用されます。マイナスが付いていても実際の値はプラスを使っても大丈夫なようです。これを応用すれば余白の大きさを３段階で使い分けることができます。
結論
「ブロック下の余白」機能は初心者におすすめです。ただし毎回設定を変える必要があるためちょっと手間がかかります。
メリット
- 簡単(コードをいじらなくても大丈夫)
- CSSなのでコードに影響しない
デメリット
- 毎回設定を変えるのがめんどう
- １パターン(工夫すれば３パターン)しか大きさは選べない
- テーマを変えると余白は消える
AFFINGER6で要素間の余白を広げる方法１：「スペーサー」ブロックを使う方法
上で紹介した方法は「段落(p)」だけに反映される設定です。段落以外。つまり画像やリスト、その他の全ての要素間の余白は広がりません。ここからは段落以外の要素間を広げる方法について解説します。
まず紹介するのが 「スペーサー」ブロックです。余白を取る一番シンプルで簡単な方法です。
「スペーサー」ブロックを挿入する
スペーサーブロックの使い方を説明します。まずは挿入の仕方です。
まずは余白を取りたい場所にカーソルを合わせてください。前に挿入、後ろに挿入を使うとやりやすいです(1)。
左上の(ブロックを追加)ボタンを押してブロックを呼び出すパネルを展開させてください(2)。その中から「スペーサー」ブロックを選択します(「デザイン」の項目)(3)。すると中央の編集画面に「スペーサー」ブロックが追加されます。
間隔を調整する
次に、間隔を調整します。
右にあるブロックの設定パネルを開いてください(歯車マーク→ブロックパネル)。
スペーサー設定のピクセル値での高さで間隔が調整できます。値を小さくすると間隔が狭くなり、大きくすると間隔が広がります。
「スペーサー」ブロックの使い方は以上です。
解説
「スペーサー(spacer)」ブロックとはブロック間の余白を広げるため(だけ)に存在するブロックです。いろんな場所で使用できます。
スペーサーを挿入すると毎回このようなコードが挿入されます→<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>。これはAFFINGER独自のコードではなくどのテーマでも使えるコードです。なので今後テーマを変えたとしても余白は残ります。
結論
「スペーサー」ブロックは余白を広げたい場合に微調整としてたまに使うのがいいと思います。使いすぎには注意しましょう！一括修正できないためあとから修正するのが面倒になりますし、コードも長くなってしまいます。サイトスピードのことを考えるとコードはなるべく短くしたいところです。
メリット
- 簡単(コードをいじらなくても大丈夫)
- 余白ごとに間隔を自由に設定できる
- テーマを変えても余白は消えない
デメリット
- 毎回挿入するのがめんどう
- 修正が大変
- コードが長くなる
特別編：CSSで一括設定する方法
CSSを使って段落間もその他の要素間も一括で広げる方法です。
ここからは中級者向けの設定になります。CSSの使い方が最低限わかる必要があります。
ここからは当サイトのオリジナルカスタム方法になります。動作は十分確認していますが想定外の不具合が発生することも考えられます。万一不具合が起きたら使用を中止してください。問題が起きても当サイトは責任を負いかねます。
CSSコードを追記する
CSSコードを追記します。
子テーマのstyle.cssかカスタマイズ画面の追加CSSに移動してください。
下のサンプルコードをコピーして貼り付けてください。貼り付ける場所は全体の範囲です(@media only...の中に入れない)。
ここでは方向性が違う２つのサンプルコードを紹介します。
コードその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余白を広げる要素を選んでいく方法(足し算方式)
２つ目は足し算方式のコードです。先ほどと逆の考え方になります。要素を１つずつ選んでいき書き足す方法です。こちらはコードが長くなるのであまりおすすめしません。
/* 余白を広げる(段落、画像、表、リスト) */
.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(アフィンガー６)の段落下の余白、要素下の余白を広げる方法を紹介しました。
＼ いいね！お願いします！ ／
この記事が役に立ったよーという方はTwitterにいいねをしてもらうと嬉しいです！フォローもぜひ！
