AFFINGER7の余白・行間を調整する方法｜Pタグ・ブロック間の設定を解説

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

この記事では、AFFINGER7で本文の行間やPタグの余白、ブロック間の間隔を調整する方法を、設定場所や実際の画面を確認しながらわかりやすく解説します。

「サイト全体の設定」と「記事内の個別設定」を使い分けて、読みやすく整った記事レイアウトを作る方法を確認していきましょう。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7の余白・行間を調整する方法

AFFINGER7で記事の読みやすさを整えるなら、「行間」と「余白」を分けて考えるのがポイントです。

行間は、文章の1行ごとの間隔を調整する設定です。

一方、余白は、段落・画像・見出しなどのブロック同士にできるスペースを指します。

AFFINGER7では、主に次の方法で調整できます。

調整する場所	できること
フォント設定	本文の文字サイズや行間を調整
ブロック下の余白	段落やブロック同士の間隔を調整
スペーサー	記事内の好きな場所に余白を追加

特に「文章そのものが詰まって見える」場合は行間を、「段落や画像との間隔が狭い」場合はブロック下の余白を調整するとわかりやすいです。

また、サイト全体の見た目をまとめて変更したい場合と、特定の記事だけを調整したい場合では、使う設定が異なります。

AFFINGER7の余白・行間調整

まずは、それぞれの役割を簡単に確認しておきましょう。

① フォント設定で行間を調整（グローバル設定）

本文の文字サイズや行間の基本設定を変更します。

サイト全体の本文の読みやすさを調整したい場合に使用します。

② ブロック下の余白を調整（記事内の個別設定）

記事内の特定のブロックに設定される下余白を調整します。

「この段落だけ余白を広げたい」といった、部分的な調整に便利です。

③ スペーサーで余白を追加（記事内の個別設定）

記事内の特定の場所に、任意の高さの余白を追加できます。

「この画像と見出しの間だけ少し空けたい」といった個別調整に便利です。

④ Gutenbergでブロック下の余白を調整（基本値）

段落などのブロック下に設定される余白の基本値を調整します。

それでは、それぞれの設定方法を順番に見ていきましょう。

AFFINGER7で本文の行間を調整する

AFFINGER7では、本文の文字サイズや行間を「AFFINGER管理」→「全体設定」→「フォントのサイズ」から調整できます。

行間を広げると文章にゆとりが生まれ、狭くすると1画面に表示できる情報量を増やせます。

ただし、行間を広げすぎると文章が間延びして見えるため、文字サイズとのバランスを見ながら調整することが大切です。

❶ フォントのサイズを開く

Menu『WordPress管理画面 → AFFINGER管理 → 全体設定 → フォントのサイズ』をクリックします。

• 「フォントのサイズ」が表示されるところまで、画面を下にスクロールします。

❷ フォントのサイズを設定（グローバル設定）

「フォントのサイズ」では、各項目のフォントサイズと行間を、スマホ・タブレット・PCごとに設定できます。また、「全体（一括設定）」では、段落（Pタグ）下の余白や文字間隔（字間）をまとめて設定できます。

スマホ（～599px）閲覧時

タブレット（959px～600px）閲覧時

PC（960px以上）閲覧時

全体（一括設定）

設定を変更したら、「Save」ボタンをクリックして変更内容を保存します。

❸ 本文の行間を調整する

本文の行間を変更したい場合は、フォントサイズの設定項目から本文に該当する項目の行間を調整します。

例えば、現在の行間が狭く感じる場合は数値を少し大きくし、文章が間延びして見える場合は少し小さくして表示を確認します。

ここで重要なのは、行間だけを見て調整しないことです。

実際の記事では、

• 本文の文字サイズ
• 行間
• 段落間の余白
• 見出しとの間隔
• 画像との間隔

が組み合わさって、全体の読みやすさが決まります。

そのため、行間を変更したらPCだけでなくスマホ表示も確認しながら調整するのがおすすめです。

行間を広げれば必ず読みやすくなるわけではありません。
本文の文字サイズと段落間の余白も合わせて確認し、サイト全体のバランスを整えましょう。

なお、設定値によってはレイアウトやデザインに影響する場合があります。変更後は実際のページを表示して、表示崩れがないか確認してください。

ここまでが文章そのものの「行間」の調整です。

次は、段落やブロック同士の間隔を調整する「ブロック下の余白」について解説します。

ブロック下の余白を調整する

AFFINGER7では、投稿・固定ページの編集画面から、ブロックごとの下余白を調整できます。

「全体（一括設定）」で設定した段落（Pタグ）の余白とは異なり、記事内の特定のブロックだけ余白を調整したい場合に便利な機能です。

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

投稿・固定ページの編集（エディター）画面で、余白を調整したいブロックを選択します。

右側の設定パネルに表示される「ブロック下の余白」から、余白の設定を変更します。

例えば、特定の段落の下にもう少し余白を入れたい場合は、その段落ブロックを選択して「ブロック下の余白」を調整します。

この方法なら、サイト全体の設定を変更することなく、必要な場所だけ余白を微調整できます。

AFFINGER7のデフォルト設定では、行間やブロックの下の余白が、以下のように表示されます。

• 赤枠の設定は「AFFINGER管理」、青枠の設定は「Gutenberg設定」で行います。

Pタグの余白との違い

AFFINGER7には、段落（Pタグ）の余白を設定する方法と、ブロック単位で下余白を調整する方法があります。

それぞれの役割は次のとおりです。

• 段落（Pタグ）下の余白：記事全体の段落間隔をまとめて調整（グローバル設定）
• ブロック下の余白：特定のブロックだけ下余白を調整（記事内の個別設定）

まずは「全体（一括設定）」で記事全体の基本的な余白を整え、バランスを調整したい箇所だけ「ブロック下の余白」で微調整すると効率的です。

なお、見出しの余白については、この設定とは別にカスタマイザーの見出し設定で調整する項目があります。

「ブロック下の余白」と「見出しの余白」は設定場所が異なるので、混同しないようにしましょう。

関連記事 見出しの詳しい設定方法については、以下の記事で解説しています。

スペーサーで自由に余白を追加する

AFFINGER7では、Gutenbergの「スペーサー」ブロックを使って、記事内の好きな場所に余白を追加できます。

「ブロック下の余白」のようにブロックの設定を変更するのではなく、スペーサーそのものを配置して空白を作る方法です。

例えば、

• 画像と見出しの間に余白を入れたい
• 特定のブロックの前後だけ間隔を広げたい
• 通常の余白設定では足りない部分を調整したい

といった場合に便利です。

スペーサーを挿入する

投稿・固定ページの編集（エディター）画面で、余白を追加したい位置にカーソルを置きます。

「＋」ボタンからブロック一覧を開き、「スペーサー」を選択します。

スペーサーを挿入すると、ブロック間に空白が追加されます。

スペーサーの高さを調整する

スペーサーを選択すると、設定画面からスペーサーの高さを調整できます。

余白を大きくしたい場合は高さを増やし、少しだけ間隔を広げたい場合は小さく設定します。

実際の表示を確認しながら、必要な分だけ調整しましょう。

余白設定を使い分ける

ここまで紹介した設定を整理すると、次のように使い分けられます。

設定	用途
段落（Pタグ）下の余白	段落の間隔を全体的に調整
ブロック下の余白	特定のブロックの下余白を調整
スペーサー	記事内の任意の場所に余白を追加

まずは全体の余白を整え、必要な部分だけブロック単位で調整します。

それでも余白を追加したい場所があれば、スペーサーを使って細かく調整すると、記事全体のバランスを保ちやすくなります。

Gutenbergでブロック下の余白を調整する

投稿・固定ページの編集（エディター）画面右側の設定パネルにある「ブロック下の余白」の基本値は、Gutenberg設定画面で変更できます。

Gutenberg設定を開きます。

Menu『WordPress管理画面 → AFFINGER管理 → Gutenberg設定 → グループブロック』をクリックします。

関連記事 Gutenbergについて詳しくはこちらの記事をご覧ください。

読みやすい記事を作るポイントとコツ

この章では、読みやすい記事を作るポイントとテクニックをご紹介します。

以下のポイントを意識しましょう。

• 行間は適度に確保（フォントのサイズに対して、1.5〜1.8倍が一般的です）
• ブロック間の余白を統一して、統一感を持たせます。
• スペーサーブロックを適切に活用し、重要な要素を強調します。（使いすぎない！）
• スマホやタブレット表示でのバランスを確認し、読みやすさをチェックします。

pタグ → 文章を書くときに使う改行について

• 通常の改行では、テキストの次に配置されるブロックの種類に応じて余白を調整します。
• Shift + 改行は、自動折り返しによって文章の区切りが悪くなる場合に使用すると、読みやすくなります。

まとめ！AFFINGER7の余白・行間を調整する方法｜Pタグ・ブロック間の設定を解説

AFFINGER7では、CSSを使わなくても行間やブロック間の余白を細かく調整できます。

今回紹介した方法を使い分けることで、記事全体のバランスを整えながら、読みやすいレイアウトに仕上げられます。

• Pタグの行間 → AFFINGER管理の「フォントのサイズ」で調整
• ブロック下の余白 → Gutenberg設定で基本値を調整
• 特定の場所だけ余白を追加 → 「スペーサー」ブロックを使用

まずはサイト全体の行間や余白を設定し、必要な部分だけ個別に調整するのがおすすめです。

特にスマホでは、余白が広すぎるとスクロール量が増えてしまうため、PCだけでなくスマホ表示も確認しながら、適度な余白に調整しましょう。

行間と余白を整えるだけでも記事の印象は大きく変わります。AFFINGER7の設定を活用して、読者がストレスなく読み進められる記事に仕上げてみてください。