WordPressの記事が長くなり、見出し・画像・ボタンを選びにくくなったら「リストビュー」を使います。左上のドキュメント概要を開くと、記事内のブロックを階層で確認でき、目的の場所への移動、並べ替え、複数選択、不要ブロックの発見ができます。
リストビューでできること
| 困りごと | リストビューでの解決 |
|---|---|
| 長い記事の画像を探せない | 画像ブロック名を選び、その位置へ移動 |
| 見出しの中身が分からない | 字下げされた階層で所属を確認 |
| ブロックを安全に並べ替えたい | 項目をドラッグし、挿入線を確認 |
| 複数ブロックをまとめたい | 範囲選択してグループ化 |
リストビューは公開ページへ表示される目次ではなく、編集者が記事の構造を見るための画面です。ここで並び順を変えると本文も変わるため、操作後は必ずプレビューします。
リストビューを開く手順
- 「投稿」または「固定ページ」から編集したい記事を開きます。
- 画面左上にある三本線を含む「ドキュメント概要」を押します。
- 開いたパネルで「リストビュー」タブを選びます。
- 見出し、段落、画像などが上から並ぶことを確認します。
画面幅が狭いとパネルが本文へ重なることがあります。確認が終わったら同じアイコンを押して閉じます。アイコンが見つからない場合は、上部ツールバーを表示しているか、編集画面を全画面表示にしていないかを確認します。
目的のブロックへ移動する
リスト内の「画像」「見出し」「ボタン」などを押すと、そのブロックが本文側でも選択されます。似た画像が複数ある場合は、一つずつ選び、本文側のプレビューを見て対象を特定します。
見出しを押したとき、配下の段落が字下げされて表示される場合があります。これは見出しの親子関係そのものではなく、グループやカラムなどの入れ子を示すこともあるため、見出しレベルは右側のブロック設定でも確認します。
ブロックを並べ替える手順
- 移動したいブロック名を一度押し、本文側の内容と一致するか確認します。
- リスト内の項目を移動先へドラッグします。
- 青い挿入線と字下げ位置を見て、同じ階層か内側かを判断します。
- 手を離し、本文側で意図した見出しの前後へ移動したか確認します。
- プレビューを開き、文章と画像のつながりを読み直します。
移動後にレイアウトが崩れたら、直後なら上部の「元に戻す」を押します。保存後ならリビジョンで変更前と比較します。位置が分からないまま何度もドラッグせず、一度戻してからやり直します。
あわわ…画像を動かしたつもりで、見出しの中身を全部まとめて動かしそうになりました。
青い線がどこに出れば正解なのか、まだ自信がないです…。
移動前に項目名と字下げを見よう。
移動先の青い線が同じ字下げなら同じ階層、内側なら別のブロックの中へ入る合図だよ。
線の位置だけじゃなく、字下げも見るんですね。
まず一つだけ動かして、プレビューで見出しの下に入ったか確かめます。
その進め方なら安心だね。
複数選択は慣れてから使い、最初は一ブロックずつ移動しよう。
複数ブロックをまとめて選ぶ
連続する項目は、最初を選んでからShiftキーを押しながら最後を選ぶとまとめて選択できます。選択後のオプションからグループ化、複製、削除などを実行できます。
ただし、選択範囲に見出しや画像が混ざると、想定より広い範囲を操作することがあります。最初は二つの段落だけで試し、選択色が付いた項目名を上から確認してから操作してください。
入れ子になったブロックを見分ける
グループ、カラム、ボタン、カバーなどは、親ブロックの内側に別のブロックを持ちます。リストビューでは開閉用の矢印と字下げで表示されます。画像だけを移動したいのに親のカバーを選ぶと、文字やボタンもまとめて動くため、選択名を確認します。
目的の子ブロックが見えない場合は親の矢印を開きます。選択中のブロックは本文側にも枠が出るので、「画像」「段落」「グループ」のどれを触っているか照合します。
空ブロックや重複を見つける
何も書かれていない段落、誤って二つ挿入した画像、使っていないスペーサーは、本文だけでは見落とすことがあります。リストビューを上から追い、不自然に連続する「段落」や「スペーサー」を選んで内容を確認します。
空に見えても、アンカー、余白、レイアウト目的で使われている場合があります。名前だけで削除せず、右側設定と公開プレビューを見て判断します。
リストビューで動かせないとき
鍵のアイコンがある
ブロックの移動または削除がロックされています。管理者が共通レイアウトを守るため設定している場合があるので、理由を確認せず解除しません。
ドラッグ先が内側へ入ってしまう
挿入線が字下げされた位置にあります。同じ階層の左側へ線が出る場所まで動かすか、上下矢印で一段ずつ移動します。
クリックしても本文が動かない
親ブロックを選んでいる、ズームアウト表示、または編集画面のフォーカスが別の場所にある可能性があります。子要素を開き、具体的な段落や画像を選びます。
公開前に行う構造チェック
- リストビューを上から見て、H2の順番が記事の説明順になっているか確認します。
- 各H2の後に本文があり、空見出しがないか見ます。
- 画像とボタンが意図した節の内側にあるか確認します。
- 本文プレビューを最初から読みます。
- スマートフォン幅でカラム、表、ボタンの位置を確認します。
リストビューなら、空っぽの段落や同じ画像が二つあるのも見つけやすそうです。
公開前に上から名前を追うだけなら、私にも続けられそうです。
うん、記事の骨組みを見る道具として使うといいよ。
並べ替えた後は本文表示も読み、リストと読者画面の両方で確認しよう。
編集しやすい画面と、読者が見る画面は別なんですね。
最後にスマホでも開いて、移動した画像やボタンが変な場所にないか見ますね。
それで大丈夫だよ。
リストビューで構造、プレビューで見た目と覚えておけば迷いにくいよ。
これからWordPressを始める人へ
リストビューはWordPress本体の編集機能なので、現在のサイトで使えている人はサーバー変更不要です。これから新しいサイトを用意し、ブロック編集を一から覚えたい人は、WordPressの簡単設置とサポートを確認できる環境を選ぶと開始時の負担を減らせます。
エックスサーバー
WordPressを新しく用意し、ブロックエディターで記事を作り始めたい初心者向け
向いている人 新しいWordPressを簡単設置から始め、困ったときの問い合わせ先も欲しい人。
向いていない人 現在のサーバーで編集と表示に問題がない人。
最新料金とWordPressの利用条件を確認するまとめ
リストビューは、長い記事のブロックを階層で見つけ、正しい範囲を選び、並べ替えるための編集画面です。項目名、字下げ、青い挿入線を確認し、一ブロックずつ操作します。変更後は本文とスマートフォンのプレビューまで確認すれば、構造と見た目の両方を安全に整えられます。
よくある質問
リストビューを開いたまま執筆できますか？
できます。記事が長い場合は開いたまま見出し間を移動し、本文幅が狭く感じたら閉じます。
リストビューの名前を変更できますか？
多くのブロックは種類名で表示されます。グループなど一部はオプションから名前を付けられるため、長いページでは「料金表」「問い合わせ導線」のように管理名を付けると探しやすくなります。