SWELLで行間を設定する方法＆ブロック余白のおすすめ7レシピ

ブログを書いてみたものの、「なんとなく読みにくいな」と感じて、Swellの行間の設定をいじり始めた方も多いと思います。

Swellの行間設定で迷子になっている状態から抜け出して、「自分のブログはこのバランス」という軸を一緒に作っていきましょう。

Swelleで行間を整えると何が変わる？行間設定の基本

行間・段落・ブロック間・字間の違いを整理しよう

まずは「全部まとめて行間」と呼びがちな部分を、4つに分けて考えてみます。

用語	どこの余白か	主な設定場所	見た目の印象
行間	1行と次の行の間のすき間	段落やリストの「タイポグラフィ」内の行の高さなど	詰まっている・スカスカなどの読みやすさに直結
段落（段落間）	段落と段落の間にできるスペース	CSSのmargin（段落下の余白）	文章のまとまりの区切りが分かりやすくなる
ブロック間	見出し・ボックス・画像などブロック同士のすき間	Swellの「ブロック下の余白量」やスペーサーブロック	セクションの区切りやメリハリをつけやすくなる
字間	1文字と次の文字のあいだ	タイポグラフィの「文字間」など	落ち着いた印象・ポップな印象を調整できる

読んでいる人から見ると、これらはすべて「なんか読みにくい」「スカスカしている」といった感覚として伝わりますが、設定としては別物です。

「行間そのものを変えたいのか」「ブロック同士の距離だけ変えたいのか」「文字の詰まり具合を変えたいのか」を頭の中で分けておくと、このあとのSwellでの調整がかなりスムーズになります。

Swelleの行間設定を触る前に決めておきたいこと

誰に読んでほしいかで行間の目安を決める

行間の正解はサイトによって違いますが、想定読者別に「このあたりから始める」という目安を決めておくと便利です。

ブログのタイプ	想定読者	本文フォントサイズの目安	行間（line-height）の目安	コメント
雑記ブログ・日記系	ライトに読みたい一般の読者	15〜16px程度	1.8〜2.0	少し広めでサクサク読める印象に
ノウハウ・解説系	調べものをしている読者	16〜17px程度	1.9〜2.1	少し広めにして読み飛ばしやすくする
ビジネス寄り・文字多め	じっくり読みたい読者	16〜18px程度	1.6〜1.9	文字は大きめ、行間は詰めすぎないバランス
子育て・美容など写真多め	スマホでざっと読みたい読者	15〜16px程度	1.8〜2.2	文章と画像のあいだの余白も合わせて調整

もちろん、この数字はあくまでスタート地点です。「うちのブログはこのあたりを基本にしよう」とざっくり決めておくだけでも、Swellの行間設定で迷う時間がかなり減ります。

SWELL標準機能で行間・余白を調整する3つの方法

ブロック下の余白量で「ブロック間の行間」を整える

まずはSwellならではの便利機能「ブロック下の余白量」です。

これは次のような部分の間隔を変えたいときに使います。

• 見出しと本文のあいだ
• ボックスの下と次の段落のあいだ
• 画像やボタンの下のスペース

各ブロックのツールバーやサイドバーから、ブロック下の余白量を段階的に選べます。テーマのバージョンにもよりますが、「なし」「小」「中」「大」「特大」といった感じで、何段階かに分かれているはずです。

余白量	主な使いどころ	見た目の印象
なし	箇条書きの途中など、あえて詰めたい場所	情報量が多くキュッと詰まった印象
小	同じ話題の中で、ほんの少し区切りたいとき	さりげなく余裕が出る
中	見出しと本文、画像と本文など一般的な区切り	自然で読みやすいバランス
大	セクションの切り替えをはっきりさせたい場所	章と章の境目が分かりやすくなる
特大	CTA前など、一度しっかり間を取りたい部分	強い区切り。多用するとスカスカに見えることも

私がよくやるのは、サイト全体の基本を「中」にしておいて、

• 大事な見出しの前後だけ「大」にする
• 箇条書きの途中などは「小」で少し詰める

という3パターンくらいにルールを絞る方法です。ルールを決めてしまえば、記事ごとに迷わなくなります。

タイポグラフィの「行間（行の高さ）」で本文の行間を調整する

次は、文字の行と行のあいだ自体を変える「行の高さ」の設定です。

段落ブロックやリストブロックを選択した状態で、右サイドバーの「ブロック」タブを開き、「タイポグラフィ」の項目を広げると、行の高さを数値で変えられます。

行の高さ	見た目の印象	おすすめの場面
1.4〜1.6	情報がぎゅっとまとまった印象	短めの文章や、表・専門説明が多い部分
1.8〜2.0	標準的で読みやすく、バランスが良い	一般的な本文。多くのブログで使える設定
2.1〜2.5	ゆったりしていて雑誌っぽい印象	画像多めの記事や、ふわっと読ませたい記事

Swellでは、本文のデフォルトの行間はおおむね読みやすい値に設定されています。まずは大きく変えず、1記事だけ試しに行の高さを少し上下させて、感覚をつかんでみるといいと思います。

例えば、

• 本文は1.9〜2.0くらい
• リストは少し広めに2.1前後

にして、プレビューで見比べてみると違いが分かりやすいです。

スペーサーブロックと再利用ブロックで「余白パターン」を作る

行間をもっと細かくコントロールしたいときは、スペーサーブロックも役に立ちます。

たとえば、

• LPのように縦長で、セクションごとにしっかり余白をとりたいとき
• 画像とボタンのあいだを、感覚的にもう少しだけ広げたいとき

など、数値で説明しづらい「しっくり感」を調整したいときに便利です。

スペーサーブロックは、挿入して高さをドラッグまたは数値入力するだけで使えます。同じ高さをよく使うなら、そのスペーサーをまとめてブログパーツ（再利用ブロック）として登録しておくと、CTA前やセクション区切りなどで毎回同じ余白を簡単に再利用できます。

CSSでSwelleの行間を一括設定する方法

サイト全体の基本行間（本文）をCSSで決める

WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」から、サイト全体に効くCSSを追加できます。

行間を一括で調整するときによく使うセレクタと、影響範囲のイメージは次のとおりです。

セレクタの例	主に変わる部分	使いどころのイメージ
.post_content p	記事本文の段落全体	まずはここで基本の行間を決める
.post_content li	箇条書き（ul, ol）の各行	リストだけほんの少し広げたいとき
.post_content h2, .post_content h3	見出しの行間や上下余白	見出しの周りをキュッとさせたいとき
.toc_list li など	目次の項目部分	目次だけタップしやすくしたいとき

本文とリストの行間を少し広げたい場合は、例えば次のように指定します。

• .post_content p { line-height: 2; }
• .post_content li { line-height: 2.1; }

あまり細かく分けて書きすぎると、あとで自分でも訳が分からなくなるので、まずは次の3つくらいにしぼって管理するのをおすすめします。

• 本文（p）
• リスト（li）
• 見出し（h2〜h3）

リスト・目次だけSwelleの行間を変えたいときの考え方

よくある悩みとして、「本文はいい感じなのに、目次や箇条書きだけ詰まって見える」というケースがあります。

この場合は、リストや目次に使われているセレクタだけに行間を指定してあげるのがシンプルです。

• .post_content ul li, .post_content ol li で箇条書きの行間を調整
• .toc_list li など、目次専用のクラスにだけline-heightを追加

たとえば、スマホで目次が詰まってタップしにくいときは、

• .toc_list li { line-height: 2.2; }

のように、少し広めに設定すると改善しやすいです。

CSSでSwelleの行間を触るときの注意点

CSSで行間を調整するときは、次の点に気をつけるとトラブルを防ぎやすくなります。

• !importantを多用しない（あとから自分が上書きしづらくなる）
• テーマ本体ではなく、子テーマや「追加CSS」に書く
• p, ul, olを一括で指定しすぎない（ピンポイント調整が難しくなる）
• カスタマイザーの設定とCSSの上書きの関係を整理しておく

私も最初の頃、

.post_content p, ul, ol { line-height: 2.1; }

とまとめて指定してしまい、目次やリストの見た目がおかしくなって焦ったことがあります。CSSを書くときは、「どの要素に効くのか」をできるだけ具体的にしておくと安心です。

スマホで読みやすいSwelle行間設定のポイント

PCとスマホでは同じ行間でも見え方が違う

PCとスマホでは、画面の幅も、画面との距離も大きく違います。結果として、同じline-heightでも受ける印象が変わります。

• PCは横幅が広く、行も長くなりやすいので、広げすぎるとスカスカに感じる
• スマホは縦にスクロールしながら読むので、少し広めの行間の方が楽に読める

そのため、PCではちょうど良く見える行間でも、スマホで見ると「なんだか窮屈」と感じることがよくあります。Swellのプレビュー機能でPCとスマホの両方を確認しながら、バランスを探っていきましょう。

PC・スマホ別のざっくり行間設定の目安

行間を考えるときの、おおまかなデバイス別の目安は次のようなイメージです。

デバイス	本文フォントサイズの目安	行間（line-height）の目安	コメント
PC	16px前後	1.8〜2.0	広げすぎると、画面全体が間延びした印象になる
タブレット	16〜17px	1.9〜2.1	PCとスマホの中間くらいの感覚で調整
スマホ	15〜16px	2.0〜2.3	やや広めにして、「詰まって見えない」ことを優先

Swellはレスポンシブ対応がしっかりしているので、まずはPCでベースとなる行間を決め、そのあとスマホ表示だけ念入りにチェックする流れがおすすめです。

リスト・目次・吹き出しなど“クセの強い”ブロックの行間を整える

リストと目次の行間を広めにしてタップしやすくする

リストや目次は、

• スマホでリンクをタップしながら移動する
• 箇条書きをざっと読み飛ばして全体像をつかむ

といった使い方をされることが多いです。そのため、本文よりもほんの少しだけ行間を広げておくと、指でもタップしやすく、ぱっと見で内容も追いかけやすくなります。

よくある悩み	原因の例	対処の方向性
目次が詰まって見える	liのline-heightが本文と同じ	目次用のクラスにだけ行間を少し足す
箇条書きが読みにくい	ul, olの行間を個別に指定していない	.post_content liにline-heightを追加
リストだけ間延びして見える	ul, olに広めのline-heightを上書きしすぎた	line-heightを下げるか、marginで調整する

エディタ上でも、リストブロックのタイポグラフィで行間を調整できます。CSSが苦手な場合は、まずブロック単位での調整から試してみるといいと思います。

吹き出し・ボックス系は上下の余白量でさっと調整

吹き出しやボックス系のブロックは、内容そのものよりも「前後とのつながり方」と「デザインの重さ」が気になりやすいです。

ここでは行間そのものより、ブロック下の余白量を調整して、

• 前後の文章との距離を少し広げる
• シンプルなボックスは余白を少なめにする

といった形で整えていく方が、仕上がりが安定しやすいです。

たとえば、

• 吹き出しの前後は「中」
• 重要な注意書きボックスの前後は「大」

といったように、ブロックの役割ごとに余白の大きさを決めておくと、サイト全体で統一感が出てきます。

見出しブロックの余白を詰めてキレイに見せる

Swellの見出しブロックには、もともとある程度の上下余白が入っています。この余白が少し気になるときは、

• ブロック下の余白量を「小」にする
• CSSでh2やh3のmarginを少し小さめに調整する

といった方法で微調整できます。

見出しの上下を広げすぎると、画面がブツ切りに見えてしまうので、

• 見出しの下は少し余裕を残す
• 見出しの上はやや詰める

くらいのバランスを意識すると、スクロールしたときに流れが自然になります。

よくあるSwelle行間トラブルと解決策

「急に行間が変わった」「前と見え方が違う」場合

テーマやプラグインを調整したあと、「あれ、前と行間が違うな」と感じることがあります。

症状	よくある原因	試したい対処
全体的に行間が広くなった・狭くなった	追加CSSでpやbodyのline-heightを変更している	追加CSSを見直し、怪しい部分をコメントアウトして確認する
特定の記事だけ行間がおかしい	記事個別のカスタムCSSや古いブロックが混ざっている	その記事のカスタムCSSを確認し、必要ならブロックを作り直す
目次だけ行間がおかしい	目次プラグインやSwellの目次用CSSを上書きしている	目次用のCSSを一度コメントアウトし、標準の状態を確認する
スマホだけ行間が窮屈に見える	スマホ用のフォントサイズだけを変更している	メディアクエリでline-heightを指定していないか確認する

特に、サイト全体の行間をCSSで一括変更している場合、別の調整とぶつかって予想外の見た目になってしまうことがあります。行間を大きく変えたあとには、

• トップページ
• 代表的な記事を数本
• 目次やリストを多用している記事

あたりを一通りチェックしておくと安心です。

よくある質問：Swellの行間設定について

Q1. 行間はSwellの標準機能だけで十分ですか？CSSも書いたほうがいいですか？

A. ブログを始めたばかりの段階であれば、まずはSwellの標準機能だけで十分だと思います。

具体的には、

• 見出しやボックスなどの「ブロック下の余白量」を整える
• 本文やリストの行の高さを、タイポグラフィから少しだけ調整する

この2つだけでも、かなり読みやすさが変わります。

「どの記事も同じ行間にそろえたい」「目次だけ別の行間にしたい」といった細かい要望が出てきたら、そのときにCSSでのカスタマイズを検討するくらいの順番がちょうどいいと思います。

Q2. 行間の“正解の数値”ってありますか？

A. これが正解という数値はありませんが、目安はあります。

本文の行間であれば、

• PC表示で1.8〜2.0
• スマホ表示で2.0〜2.3

あたりにしておけば、大きく外すことは少ないはずです。

そこから、読者の年齢層や記事の文字量、画像の多さなどを見ながら、0.1刻みで少しずつ調整していくイメージです。数値よりも、「実際に読んだときに楽かどうか」を優先してあげると失敗しにくくなります。

Q3. 行間を広げると文字数が少なく見えてしまいませんか？

A. 行間を広げると、同じ文字数でも画面の中の情報量は少なく見えます。その分、内容が薄いように感じられることもあるかもしれません。

ただ、読者にとって大事なのは「最後までストレスなく読めるかどうか」です。行間を少し広げて読みやすくしつつ、

• 見出しや画像、ボックスを使って情報量を補う
• 図解や表で情報を整理して見せる

といった工夫をすれば、「ゆったりしているけど中身もしっかりある記事」にできます。

私自身は、多少スカスカに見えても読みやすさを優先し、そのうえで構成や装飾で密度を出していくスタイルに落ち着きました。

まとめ：Swellの行間設定で今日からできる最初の一歩

この記事の内容を振り返ります

そして、今日からできる一番簡単な一歩は、「よく読まれている記事を1本選び、行間を意識して整えてみること」です。

1. アクセスが多い記事を1本選ぶ
2. 本文とリストの行の高さを、タイポグラフィで少し広めにしてみる
3. 見出しやボックスのブロック下の余白量を、「中」と「大」あたりで統一する
4. スマホプレビューで読み返し、「自分なら最後まで読めそうか？」をチェックする

このステップをひととおり試すだけでも、ブログ全体の読みやすさは一段階アップします。Swellの行間設定は、一度自分なりの基準が決まってしまえば、あとはそのルールをコピーしていくだけです。

この記事を参考にしながら、あなたのブログにぴったりな「読みやすい行間と余白」のルールを作ってみてください。