ブロックエディタ

段落間の余白を広げる方法3つ(スペーサー、ブロック下の余白、CSS追加):AFFINGER6(アフィンガー6)

2021年9月25日

AFFINGER6(アフィンガー6)で段落間の余白を広げる方法3つを紹介

AFFINGER6(アフィンガー6)をカスタマイズ!ここでは段落間の余白を広げる方法についてご紹介します。


ブログをやっている人で段落と段落の間はゆったりさせたい!という人が多いようです。なので今回はAFFINGER6で段落間の余白を広げる方法について調べてみました。調べてわかったのは段落間を広げる専用の設定箇所はないということです。なのでちょっと工夫が必要でした。ここでは段落間の余白を広げる方法を全部で3つ紹介します。自分に合うものを使ってください。それではいってみましょう。

ちなみにAFFINGER6の段落間の余白20pxに設定されています。

AFFINGER6で段落間の余白を広げる方法1:「スペーサー」ブロックを使う方法

まずはブロックエディタ(グーテンベルク)の 「スペーサー」ブロックを使う方法です。一番シンプルで簡単な方法になりますね。

「スペーサー」ブロックを挿入する

まずは余白を取りたい場所にカーソルを合わせ「スペーサー」ブロックを呼び出します。

段落の下にカーソルを持ってきます(段落を選択後 リターンキーを一回押して空のブロックを作る)①。

左上の(ブロックを追加)ボタンを押してブロックを呼び出す画面を展開させてください②。その中から「スペーサー」ブロックを選択します(「デザイン」の項目)③。すると中央の編集画面に「スペーサー」ブロックが追加されます。 

「スペーサー」ブロックの挿入の仕方

間隔を調整する

次に、間隔を調整します。

右にあるブロックを編集する画面を開いてください(歯車マーク→ブロックパネル)。スペーサー設定ピクセル値での高さで間隔が調整できます。値を小さくすると間隔が狭くなり、大きくすると間隔が広がります。

「スペーサー」ブロックの設定で間隔を調整する

「スペーサー」ブロックの使い方は以上です。

解説

「スペーサー(spacer)」ブロックとはブロック間の余白を広げるため(だけ)に存在するブロックです。いろんな場所で使用できます。

スペーサーを挿入すると毎回このようなコードが挿入されます→<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>。これはAFFINGER独自のコードではなくどのテーマでも使えるコードです。なので今後テーマを変えたとしても余白は残ります。

結論

「スペーサー」ブロックは余白を広げたい場合に微調整としてたまに使うのがいいと思います。使いすぎには注意しましょう!一括修正できないためあとから修正するのが面倒になりますし、コードも長くなってしまいます。サイトスピードのことを考えるとコードはなるべく短くしたいところです。

メリット

  • 簡単(コードをいじらなくても大丈夫)
  • 余白ごとに間隔を自由に設定できる
  • テーマを変えても余白は消えない

デメリット

  • 毎回挿入するのがめんどう
  • 修正が大変
  • コードが長くなる

AFFINGER6で段落間の余白を広げる方法2:「ブロック下の余白:大」を使う方法

次にAFFINGER専用のブロック下の余白機能を使う方法です。

Gutenberg設定で「ブロック下の余白」を設定する

まずどのくらいの余白を取るかあらかじめ設定します。設定の場所はGutenberg設定グループブロックの項目です。

ダッシュボード】→【AFFINGER管理】 → 【Gutenberg設定】> "グループブロック"

Gutenberg設定で「ブロック下の余白」を設定する

ブロック下の余白[大]の箇所にお好みの数字を入れてください。その値が余白の大きさになります。決まったらSaveボタンを押します。

「ブロック下の余白」を使ってみる

それでは実際に使ってみましょう。記事の編集画面に移動してください。

ダッシュボード】→【投稿】 → "投稿一覧" or "新規作成"

「ブロック下の余白」を変更する方法

段落を選択します①。そして右にあるブロックを設定する画面を展開します(歯車マーク→ブロック)②。下の方にいくとブロック下の余白という項目があります。それをに変更します③(デフォルトではになっています)。

これで選択した段落の下の余白が広がります。

解説

仕組みはこうです。段落にブロック下の余白を適用するとその段落にhas-st-margin-bottom has-st-margin-bottom-2というclassが付与されます。最初に設定した値はこのclass名を持っているもに対して適用されます。こうして段落の下の余白は広がります。ちなみにこのclass名はAFFINGER独自のものなのでAFFINGERでしか使えません。他のテーマに移行したら余白は消えてしまいます。

ブロック下の余白は段落に関して言えば-大と-にしか反映されません。は使えないので注意です。の場合は段落にclassを付与しませんでした。そのための余白を設定しても反映されることはありません。なぜの設定がが段落には適用されないかは謎です。

さきほども述べたように以外に、-大-小も設定した値が適用されます。マイナスが付いていても実際の値はプラスを使っても大丈夫なようです。これを応用すれば余白の大きさを3段階で使い分けることができます。

結論

「ブロック下の余白」機能は初心者におすすめです。ただし毎回設定を変える必要があるためちょっと手間がかかります。

メリット

  • 簡単(コードをいじらなくても大丈夫)
  • CSSなのでコードに影響しない

デメリット

  • 毎回設定を変えるのがめんどう
  • 1パターン(工夫すれば3パターン)しか大きさは選べない
  • テーマを変えると余白は消える

AFFINGER6で段落間の余白を広げる方法3:CSSで一括設定する方法

3番目の方法はCSSコードを追記して一括で広げる方法です。

ここからは中級者向けの設定になります。CSSの使い方が最低限わかる必要があります。

ここからは当サイトのオリジナルカスタム方法になります。動作は十分確認していますが想定外の不具合が発生することも考えられます。万一不具合が起きたら使用を中止してください。問題が起きても当サイトは責任を負いかねます。

CSSコードを追記する

CSSコードを追記します。

CSSコードを追記する(スタイルシート、追加CSS)

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

ダッシュボード】→【外観】 → 【カスタマイズ】> "追加CSS"

ダッシュボード】→【外観】 → 【テーマエディター】> "AFFINGER Child:スタイルシート(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-bottom0!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-bottom0!important;が付いていたので無視しました。

.p-freeは「見出し付きフリーボックス」ブロックのタイトル部分が上のコードの影響を受けるため再定義しました。消さないようにしてください。

結論

全部に一括して適用できます。CSSがわかって自分で設定できる人におすすめです。上で紹介した「スペーサー」ブロックや「ブロック下の余白」機能を併用すると表現の幅が広がります。

メリット

  • 一括で変更できる(過去の記事にも適応)

デメリット

  • CSSの理解がある程度必要
  • 今後テーマを変えたら引き継がれない

以上、AFFINGER6(アフィンガー6)の段落下の余白を広げる方法3つを紹介しました。

\ いいね!お願いします! /

この記事が役に立ったよーという方はTwitterにいいねをしてもらうと嬉しいです!フォローもぜひ!

-ブロックエディタ