WordPressクラシックエディタで構築する「お知らせ詳細ページ」のCSS設計ガイド

はじめに

この記事ではWordPressのクラシックエディタを使って「お知らせ詳細ページ（投稿詳細）」を作成する際のCSS設計の考え方と基本ルールを紹介します。

目的は運用担当者がビジュアルエディタのみで更新しても、タイトル・本文・画像・リストなどが崩れず、統一感のある見やすいレイアウトを保つことです。

クラシックエディタの特徴

WordPressのビジュアルエディタでは本文を入力すると次のようなHTMLが出力されます。

<div class="news-detail">
  <div class="news-detail__body">
    <h1>お知らせタイトル</h1>
    <p>本文のテキストです。</p>
    <h2>見出し</h2>
    <p>本文のテキストです。</p>
    <figure>
      <img src="..." alt="">
      <figcaption>画像のキャプション</figcaption>
    </figure>
    <p>本文のテキストです。</p>
  </div>
</div>

ポイントは h2 や p 、 figure など全ての要素が兄弟要素として並ぶことです。つまりHTMLの入れ子構造を使ったレイアウト（例：特定のブロックだけまとめて囲む）ができません。この仕様のため、CSS側で「どんな順番で要素が並んでも整って見える」ルール設計が求められます。

CSSの分離設計

お知らせ詳細ページはサイト全体のCSSとは別に専用スタイルシート（例： news-detail.css ）を読み込むことをお勧めします。こうすることで本文部分だけの余白や行間を調整でき、他ページへの影響を防ぐことができます。

段落や行間の基本余白

下記のいずれかの方法で全ての要素間に一定の余白を保ちます。

• .news-detail__body をFlex化し、 gap を設定
• .news-detail__body 直下の要素に共通の margin-top を設定（先頭要素は0）

これで<p>が続いても、<p>の後に<ul>や<img>が来ても、一定の間隔が確保されます。基本的にはモダンブラウザ中心であれば gap の方がシンプルでメンテナンスしやすいため推奨です。

また、本文テキストの行間（ line-height ）は1.5〜1.8程度、タイトルは1.3~1.5が目安となります。

見出し（h1〜h6）の余白

階層が上がるほどフォントサイズが大きくなるため、見出しの上のマージンを広く取ることで読みやすくなります。

• 上方向の余白のみ調整する
• 見出しレベルが深くなるほど余白を小さくする

ただ、これをきちんと守ろうとするとh1のタイトルが大きく見えてしまうため、使用シーンに合わせて、 h4 , h5 , h6 のサイズを同じ、または近い数値にすることも多いです。

なお、WordPressの記事タイトルに<h1>が出力されるため、本文ないでは<h2>を最上位見出しとして扱う運用が一般的です。

画像の余白

画像の下には、他の要素よりもやや広めの余白を設定します。

画像は下辺の輪郭がテキストよりもはっきりしているため、数値上では同じ感覚でも画像の方が余白が詰まって見えてしまうからです。

画像では通常余白の130%の余白を設けています。具体的な数値はデザインによって調整しましょう。

リスト（ul/ol）の余白

リスト部分は段落と同等の余白でも成立しますが、場合によっては次のように調整します。

• <ul>,<ol>の前後だけ余白を広げる
• <li>同士の間隔を狭める

どちらを採用するかはデザインによって使いわけるようにしましょう。

入れ子になったリストにも同じルールを適用すると階層がより明確になります。

画像の配置

クラシックエディタでは、画像に以下のクラスが自動付与されます。

• 左寄せ（ alignleft ）
• 右寄せ（ alignright ）
• 中央寄せ（ aligncenter ）

これらのクラスに対して、本文が崩れない最低限のスタイルを定義しておきます。

また、画像の横幅はWordPress側で変更可能ですが、画像挿入時のデフォルト値や、表示される画面幅に応じて画像の最大幅をCSSで設定しておくと意図しない見え方を防ぐことができます。

画像を横並びにしたい場合

ビジュアルエディタでは親要素で画像をグルーピングできないため、横並びはコードエディタでの編集が必要になります。テンプレート用のHTMLを事前に用意しておき、更新担当者がコピペする等で対応できるようにしておきましょう。

本文コンテナが狭い場合

限定的な例ですが、noteのように本文コンテナを狭く設定することで、画像を常に横幅100%で表示する設計もあります。この方法なら画像の寄せ配置や横並び対応を省略でき、スマホでも安定した見せ方ができます。デザイン段階でこの構造を前提にするのも有効です。

まとめ

クラシックエディタでの記事編集は、全ての本文要素が兄弟要素として並ぶことを前提に、CSSを設計する必要があります。

その上で全要素に共通する縦方向の余白ルールを基準としながら、見出しや画像、リストといった個別要素ごとのスタイルを丁寧に整え行くことが重要です。

また、ビジュアルエディタのみでは複数の画像を横並びに配置することはできないため、必要に応じてHTMLテンプレートを用意したり、運用フローの中でコード編集を行う想定もしておくと良いでしょう。

最終的には案件の性質やデザインの方向性に合わせて余白やレイアウトの数値を柔軟に調整しながら、更新しやすく見た目の整ったページを実現していくことがポイントです。