こんな悩み、ありませんか？
- 記事のブロック同士の間隔が狭くて読みにくい
- 見出しや段落が詰まっていてデザインが窮屈に感じる
- 余白をCSSで整えたいけど、どのコードを使えばいいかわからない
この記事では、SWELLを含むすべてのWordPressテーマで使える「ブロック間の余白を整えるCSSコード」 を紹介します。
初心者の方でも、コピペで貼り付けるだけ でレイアウトがぐっと見やすくなります。
目次
🎯 コードの目的と効果
このCSSは、記事本文内（.post_content）のブロック要素間に適度な余白を設定することで、
全体の可読性・デザインバランスを改善する目的があります。
たとえば、文章ブロックや画像ブロック、リストなどの間に3.9em（約4行分）のスペースが自動的に追加されます。
💡 完成イメージ
| 適用前 | 適用後 |
|---|---|
| ブロック同士が詰まっていて読みにくい印象 | 適度な余白が入り、読みやすく美しいレイアウトに |
📷（ここにビフォーアフター画像を配置）
🧩 コピペで使えるCSSコード
/* ブロック間の余白を調整（標準設定） */
.post_content > * {
margin-bottom: 3.9em;
}
/* やや狭くする場合 */
.post_content > * {
margin-bottom: 2.5em;
}
/* 広めにしたい場合 */
.post_content > * {
margin-bottom: 5em;
}
⚙️ CSSの貼り付け手順（WordPress管理画面）
- WordPress管理画面 → 「外観」 → 「カスタマイズ」
- 「追加CSS」をクリック
- 上記のCSSコードを貼り付け
- 「公開」をクリック
- キャッシュをクリアして、表示を確認
これだけで、ブロック間の余白が整った美しいレイアウトに変わります。
🧪 動作確認済み環境
このコードは、2025年9月時点の最新環境でテスト済みです。
- WordPress：ver.6.8.2
- SWELL：ver.2.15.0
- PHP：ver.8.4.3
※他テーマでも動作確認済みですが、CSS構造が異なるテーマでは調整が必要な場合があります。
🔍 SEO／デザイン面でのメリット
- 記事の滞在時間アップ：余白により読者の離脱率を下げる
- 視覚的リズムの改善：適切な間隔があると文章がスッと読める
- SWELL公式デザインとの整合性：SWELLの美しい余白バランスを維持しつつ調整可能
これにより、デザイン面だけでなくSEO評価にもプラス効果が期待できます。
⚠️ 注意事項・免責事項
- 本コードは一般的に公開されているCSSを紹介するものです。
- 著作権や所有権を主張するものではありません。
- 利用・改変・再配布は自由ですが、導入・運用は自己責任で行ってください。
- ご利用により生じた不具合・損害・不利益等について、当方は一切の責任を負いません。
- 不具合やトラブルについての個別サポートは行っておりません。
🌿 まとめ
ブロック間の余白を整えるだけで、
あなたのサイトは一気に“読みやすく・整った印象”になります。
複雑なCSS知識は不要。
この1行を追加するだけで、誰でもデザイン性の高いレイアウトを実現できます。
コメント