小ネタ君適切な間隔調整ができれば、読者にとって読みやすく、デザイン性の高いコンテンツを作成できます。
本記事では、ブロック間の余白が広くなる原因から、テーマ別の対処法、CSSやプラグインを使った解決法まで初心者にもわかりやすく解説します。
なぜブロックの間隔が広くなるの？基本の仕組みを知ろう
WordPressでブロックの間隔が広く見えるのは、複数の要因が重なって起こる現象です。まずはその仕組みを理解することで、適切な対処法を選択できるようになります。
ブロックエディタの余白の仕組み
WordPressのブロックエディタ（Gutenberg）は、各ブロックにデフォルトで上下のマージンを設定しています。これは見出し、段落、画像などすべてのブロックに共通して適用される仕様です。
この初期設定は、一般的な読みやすさを重視して設計されているため、多くの場合で適切な間隔を提供します。しかし、デザインの好みや記事の内容によっては、「もう少し間隔を狭くしたい」と感じることもあるでしょう。
テーマ側のスタイルが影響する理由
使用しているWordPressテーマのCSSが、ブロックの上下間に追加の余白（marginやpadding）を設定している場合があります。テーマによってはデザインの統一感を重視し、ブロック間により大きな余白を設定していることも珍しくありません。
例えば、エレガントなデザインを重視するテーマでは、ゆったりとした余白設定になっている傾向があります。一方、シンプルなデザインのテーマでは、比較的コンパクトな余白設定になっていることが多いです。
ブラウザ上の見え方と実際の構造の違い
ビジュアル上では余白が広く感じても、実際のHTML構造では各ブロックが明確に分かれています。この違いを理解しておくことで、調整時の予想外の結果を避けることができます。
デベロッパーツールを使って実際のHTML構造を確認すると、どこに余白が発生しているかを正確に把握できます。これにより、より効果的な調整方法を選択できるようになります。
ブロック間の余白を調整する基本操作
ブロックの間隔は、WordPress標準の機能でもある程度コントロールできます。まずは手軽に試せる基本的な方法から始めてみましょう。
グループブロックのスペース調整機能
グループブロックには「ブロック間スペース」という便利な設定があります。この機能を使うことで、グループ内のブロック同士の間隔を統一して調整できます。
設定方法は簡単で、グループブロックを選択した状態で右側のパネルから「ブロック間スペース」を探し、「0」または「狭く」を選択するだけです。この調整により、グループ内のすべてのブロックの間隔が一括で狭くなります。
複数のブロックを選択してグループ化し、その後でスペース調整を行うことで、効率的に間隔を調整できます。この方法は、特に関連性の高いコンテンツをまとめて表示したい場合に効果的です。
段落・画像・見出しブロックのマージン設定
WordPress 5.9以降では、多くのブロックで個別のマージン設定が可能になりました。ブロックを選択した状態で右側のパネルを確認すると、「スペース」という項目があります。
ここでは、そのブロックの上下左右の余白を個別に調整できます。数値を入力することで、ピクセル単位での細かな調整も可能です。特に画像ブロックや見出しブロックでは、この機能を活用することで理想的なレイアウトを実現できます。
「高度な設定」メニューから「追加CSSクラス」を設定することで、後からCSSでさらに詳細な調整を行うことも可能です。
スペーサーブロックの活用と注意点
スペーサーブロックを使えば、ブロック間に任意の間隔を作ることができます。高さを数値で指定でき、視覚的に分かりやすい調整が可能です。
ただし、スペーサーブロックを多用すると、後からの編集や管理が複雑になる可能性があります。また、レスポンシブデザインを考慮すると、固定の高さ設定が思わぬ表示崩れを引き起こすこともあります。
適度な使用にとどめ、基本的にはブロック自体の余白設定や後述するCSS調整を併用することをお勧めします。
追加CSSで間隔をもっと細かく調整する方法
WordPress標準機能では調整しきれない細かな間隔調整には、CSSを使った方法が効果的です。初心者でも使いやすいよう、コピペで使える実用的な例を中心に解説します。
追加CSSの入力方法（外観＞カスタマイズ）
追加CSSは、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」から簡単に入力できます。ここに入力したCSSは、使用中のテーマに上書きされる形で適用されます。
テーマを変更しても追加CSSは残るため、テーマ固有の調整には便利です。ただし、テーマによってはHTML構造が変わるため、一部の調整が効かなくなることもあります。
リアルタイムプレビューが表示されるため、調整結果をその場で確認しながら作業できます。変更を適用する前に、必ず表示を確認してから「公開」ボタンを押しましょう。
特定のブロックにだけCSSを当てるには？
個別のブロックに対してCSSを適用したい場合は、該当ブロックの「高度な設定」から「追加CSSクラス」に独自のクラス名を設定します。例えばnarrow-spacingなどの分かりやすい名前を付けましょう。
その後、追加CSSで以下のようにスタイルを指定します：
.narrow-spacing {
margin-bottom: 8px !important;
margin-top: 4px !important;
}
この方法により、特定のブロックだけに狭い間隔を適用できます。クラス名は英数字とハイフンを使用し、日本語は避けるようにしましょう。
よく使う余白調整用のCSSスニペット
以下は、よく使われる余白調整用のCSSコードです。必要に応じてコピペして使用してください：
/* 段落ブロックの余白調整 */
.wp-block-paragraph {
margin-top: 0;
margin-bottom: 12px;
}
/* 画像ブロックの余白調整 */
.wp-block-image {
margin-top: 8px;
margin-bottom: 16px;
}
/* 見出しブロックの余白調整 */
.wp-block-heading {
margin-top: 24px;
margin-bottom: 16px;
}
/* リストブロックの余白調整 */
.wp-block-list {
margin-top: 8px;
margin-bottom: 16px;
}
これらのコードは、一般的なブロックの余白を調整するものです。数値は必要に応じて調整してください。
レスポンシブ対応の余白調整
スマートフォンでの表示を考慮して、画面サイズに応じて余白を調整することも重要です。以下のようなメディアクエリを使用することで、デバイスごとに最適な余白を設定できます：
/* デスクトップ */
@media (min-width: 768px) {
.wp-block-paragraph {
margin-bottom: 16px;
}
}
/* スマートフォン */
@media (max-width: 767px) {
.wp-block-paragraph {
margin-bottom: 12px;
}
}
テーマによって異なるスタイルの扱い方
使用しているWordPressテーマによって、ブロックの余白設定は大きく異なります。主要なテーマでの特徴と調整ポイントを把握しておきましょう。
SWELLの場合：余白が大きくなる原因
SWELLは読みやすさを重視したテーマで、全体的にゆったりとしたマージン設定がされています。特に段落ブロックや見出しブロックでは、比較的大きな余白が設定されています。
SWELLでの余白調整では、以下のCSSが効果的です：
/* SWELL向け段落余白調整 */
.wp-block-paragraph {
margin-bottom: 1rem !important;
}
/* SWELL向け見出し余白調整 */
.wp-block-heading {
margin-top: 1.5rem !important;
margin-bottom: 1rem !important;
}
SWELLでは独自のCSSクラスも多用されているため、デベロッパーツールで実際の構造を確認してから調整することをお勧めします。
Cocoonの場合：マージンが制御しやすい
Cocoonは軽量さを重視したテーマで、比較的シンプルな余白設定になっています。カスタマイザーに「余白調整」機能があるため、CSSを書かなくても視覚的に調整できる点が特徴です。
Cocoonの管理画面から「Cocoon設定」→「全体」→「余白調整」で、サイト全体の余白を調整できます。また、「投稿」タブでは記事内の余白も細かく設定可能です。
CSSでの調整が必要な場合は、以下のようなコードが効果的です：
/* Cocoon向け余白調整 */
.entry-content p {
margin-bottom: 1em;
}
.entry-content .wp-block-image {
margin: 1em 0;
}
THE THORやLightningの対応
THE THORは高度なカスタマイズ機能を持つテーマで、管理画面から詳細な余白調整が可能です。「外観」→「カスタマイズ」→「基本設定」から、ブロック間の余白を数値で指定できます。
Lightningは企業サイト向けのテーマで、比較的控えめな余白設定になっています。Lightning専用のCSSクラスを活用することで、効率的な調整が可能です。
どちらのテーマも子テーマでのカスタマイズが推奨されているため、functions.phpやstyle.cssでの調整も検討しましょう。
プラグインを使ってブロック間隔を調整する方法
CSSが苦手な方や、より直感的な操作で間隔を調整したい場合は、専用プラグインの活用がお勧めです。以下に代表的なプラグインとその使い方を紹介します。
PublishPress Blocks（旧Advanced Gutenberg）の活用
PublishPress Blocksは、ブロックエディタの機能を大幅に拡張するプラグインです。ブロック間のマージンやパディングを視覚的に調整でき、リアルタイムで結果を確認できます。
インストール後、各ブロックの設定パネルに「Advanced Settings」という項目が追加されます。ここから「Margin」と「Padding」の数値を直接入力するか、スライダーで調整できます。
特に便利なのは、上下左右それぞれに異なる値を設定できる点です。例えば、画像ブロックの下だけに大きな余白を設定したい場合も、簡単に調整できます。
Kadence Blocksでの細かい制御
Kadence Blocksは、高度なブロック機能を提供するプラグインです。標準のブロックエディタでは難しい、細かな余白調整が可能になります。
このプラグインの特徴は、レスポンシブ対応の余白設定ができることです。デスクトップ、タブレット、スマートフォンそれぞれに最適な余白を設定できるため、すべてのデバイスで美しいレイアウトを維持できます。
また、カラム内でのブロック間隔調整も得意としており、複雑なレイアウトでも統一感のあるデザインを実現できます。
Ultimate Blocks
Ultimate Blocksは、30以上の追加ブロックを提供するプラグインです。標準ブロックの機能拡張も含まれており、より柔軟な余白調整が可能になります。
このプラグインの「Spacer」ブロックは、標準のスペーサーブロックよりも高機能で、デバイスごとに異なる高さを設定できます。また、「Divider」ブロックでは、セクション間の余白を視覚的に調整できます。
設定画面では、すべてのブロックに対して統一的な余白ルールを設定することも可能です。サイト全体の一貫性を保ちながら、個別の調整も行えます。
プラグイン使用時の注意点
プラグインを使用する際は、以下の点に注意しましょう。まず、テーマや他のプラグインとの競合が発生する可能性があります。新しいプラグインを導入する前には、必ずサイトのバックアップを取っておきましょう。
また、プラグインが提供するCSSが、テーマの標準スタイルと競合する場合があります。特に!importantが多用されているプラグインでは、後からの調整が困難になることもあります。
サイトの表示速度への影響も考慮しましょう。多機能なプラグインは便利ですが、必要以上に重くなる可能性もあります。実際の使用機能と照らし合わせて、適切なプラグインを選択することが重要です。サイトの健全な運用のため、プラグインは最小限に保つのが理想です。
よくある間隔調整の失敗と解決策
初心者がブロック間隔を調整する際に陥りやすい失敗パターンと、その解決策を具体的に解説します。これらを知っておくことで、効率的な調整が可能になります。
スペーサーを使いすぎて逆に見づらくなる
「間隔を調整しよう」と思うあまり、スペーサーブロックを多用してしまうケースがあります。適度な余白は読みやすさを向上させますが、空白が多すぎると読者の視線が分断されてしまいます。
この問題を解決するには、まず「なぜその余白が必要なのか」を明確にしましょう。単に「空いているから埋める」のではなく、「ここで一呼吸置いてもらいたい」「次の段落との関連性を示したい」などの目的を持つことが重要です。一般的に、段落間の余白は1行分（約16px）程度が読みやすいとされています。
マージンとパディングの混乱
CSSでの調整時に、マージンとパディングの違いを理解していないと、予想外の結果になることがあります。マージンは要素の**外側**の余白、パディングは要素の**内側**の余白を指します。
例えば、背景色が設定されたブロックの場合、パディングを調整すると背景色の範囲も変わります。一方、マージンを調整しても背景色の範囲は変わりません。この違いを理解しておくことで、より正確な調整が可能になります。
実際の調整では、デベロッパーツールを使って要素の境界線を確認しながら作業することをお勧めします。
モバイル表示で余白が変になる原因
デスクトップで美しく調整できた余白が、スマートフォンでは崩れてしまうことがあります。これは、固定のピクセル値で余白を設定していることが主な原因です。
スマートフォンでは画面幅が狭いため、デスクトップと同じ余白設定では間隔が広すぎたり、逆に狭すぎたりします。この問題を解決するには、相対的な単位（em, rem, %）を使用するか、メディアクエリでデバイスごとに調整することが効果的です。
また、WordPressの標準的なレスポンシブデザインに合わせて、テーマが提供するCSSクラスを活用することも重要です。
CSSの優先順位による調整が効かない問題
CSSを追加したのに調整が反映されない場合、CSSの優先順位（詳細度）が原因である可能性があります。WordPressテーマやプラグインのCSSが、追加したCSSより優先されている状態です。
この問題を解決するには、!importantを使用するか、より詳細なセレクタを使用します。ただし、!importantの多用は後からの調整を困難にするため、可能な限り避けるようにしましょう。
適切なセレクタを使用することで、!importantを使わずに調整できる場合も多くあります。
まとめ
小ネタ君WordPressのブロック間隔調整は、標準機能からCSSカスタマイズ、プラグインまで多様な方法があります。まずは使用しているテーマの特徴を理解し、WordPress標準の設定を確認することから始めましょう。それでも理想的な調整ができない場合は、追加CSSや専用プラグインを活用することで、より柔軟な調整が可能になります。
適切な間隔調整ができるようになると、記事の読みやすさが向上し、読者の滞在時間延長にもつながります。また、統一感のあるデザインにより、サイト全体の印象も大きく改善されます。
最初は小さな調整から始めて、徐々に高度な手法にチャレンジしていくことをお勧めします。読者にとって快適で美しいコンテンツを作成するための、重要なスキルの一つとして習得していきましょう。細やかな調整の積み重ねが、プロフェッショナルな仕上がりを実現する鍵となります。
