WordPressのプレビューで確認すること｜公開前の表示崩れを防ぐ7項目

WordPressの記事は、編集画面で整って見えていても、実際のページでは見出しの間隔や表の横幅、リンクの位置が意図と違うことがあります。公開前のプレビューは、文章を読み直すだけでなく「読者にどう見えるか」を確かめる工程です。

この記事では、公開前に確認したい7項目を、パソコンとスマートフォンの両方を想定して整理します。特別な知識がなくても、確認順を固定すれば短時間で点検できます。

編集画面の確認とプレビュー確認は役割が違う

編集画面は文章やブロックを組み立てる場所、プレビューはテーマのデザインを含めた見え方を確かめる場所です。誤字や表記ゆれを探す作業は、ブログ記事を公開前に校正する方法と分けると、確認漏れを減らせます。

確認する場所	主な目的	見つけやすい問題
編集画面	内容と構造を整える	文章の抜け、見出し階層、ブロックの並び
プレビュー	読者側の表示を確かめる	改行、余白、表のはみ出し、リンクの押しにくさ
公開後のページ	本番状態を最終確認する	一覧表示、内部リンク、キャッシュを含む実際の表示

WordPressのプレビューで確認したい7項目

1．タイトルと導入文が続けて読めるか

タイトルの直後に画像や広告枠が入るテーマでは、導入文までの距離が長く見えることがあります。最初の画面で記事のテーマが伝わるか、導入文の一文が長すぎないかを確認します。

2．H2・H3の階層と間隔が自然か

H2の下にいきなりH3が連続していないか、見出しだけがページ下部に残っていないかを見ます。見出しの文字サイズだけで判断せず、内容のまとまりも合わせて確認しましょう。

3．箇条書きと表が横にはみ出していないか

長いURL、英単語、列数の多い表は、狭い画面で横幅を取りやすい要素です。スマートフォン幅で見たときに、文章が極端に細くなっていないか、表を読めるかを確認します。

4．リンク先とリンク文が一致しているか

リンク文を押して、意図したページが開くかを確認します。「こちら」だけでなく、リンク先の内容が分かる言葉にすると読者も移動先を判断しやすくなります。内部リンクの基本は内部リンクの貼り方でも整理しています。

5．画像・キャプション・代替テキストの役割が合っているか

画像が本文の説明と対応しているか、キャプションが画像の下に表示されるかを確認します。代替テキストは装飾ではなく、画像が伝える内容を簡潔に補うものです。詳しい考え方は画像のalt属性の書き方を参考にしてください。

6．パソコンと狭い画面の両方で読みやすいか

段落が長く見えないか、ボタンやリンク同士が近すぎないか、表や引用が画面幅に収まるかを見ます。実機が使えない場合でも、ブラウザの幅を狭めるだけで気づける問題があります。

7．記事一覧で使う情報がそろっているか

プレビュー本文だけでなく、タイトル、抜粋、カテゴリー、アイキャッチ画像など、記事一覧に関係する情報も確認します。抜粋の役割と書き方はWordPressの抜粋ガイドにまとめています。

公開前チェックを10分で進める手順

• 編集画面でタイトル、見出し、カテゴリー、抜粋を確認する
• パソコン表示のプレビューを上から下まで一度読む
• 画面幅を狭め、表・画像・リンク周辺を重点的に見る
• 内部リンクと外部リンクを一つずつ開く
• 修正後にもう一度プレビューし、変更箇所だけでなく前後も確認する

実務例：比較表を追加した記事

比較表を追加した記事では、パソコンでは問題がなくても、スマートフォン幅で一列の文章が細くなることがあります。その場合は列を減らす、説明を表の下へ移す、項目名を短くするなど、情報量を保ちながら構造を調整します。

プレビュー時の注意点

プレビューで見えた状態が、公開後の一覧ページや検索結果まで完全に同じとは限りません。また、プレビュー用のURLを第三者へ送っても、権限や有効状態によっては開けないことがあります。共有確認が必要なときは、下書きの共有方法や権限を先に決めてください。

公開日時や公開範囲も表示とは別の確認項目です。下書き・予約投稿・非公開の違いはWordPressの投稿ステータスの使い分けで確認できます。

まとめ

WordPressのプレビューでは、文章だけでなく、見出し、表、リンク、画像、画面幅、記事一覧用の情報まで確認します。確認順を固定し、修正後にもう一度表示を見ることが大切です。公開後は実際のページも開き、リンクや一覧表示を最終確認しましょう。