こんにちは。バナナデスクです。
WordPressで記事を作っていて、文章の途中へ画像を入れたら、思っていた場所と違うところへ入ってしまった。そんなときは、ページ全体を一枚の紙として見るより、「どの部品を選んでいるか」を確認すると直しやすくなります。
Gutenbergと呼ばれるWordPressのブロック編集では、段落、見出し、画像、表などを組み合わせます。ここでは、架空の講座案内を一つ作る例を使い、記事の組み立て方と、共通部分を次の記事へ再利用するときの注意点を説明します。
まず、文章を役割ごとのブロックに分ける
本文の大きな区切りは「見出し」、説明は「段落」、順番や持ち物は「リスト」、比較する項目は「表」と、内容の役割に合わせて選びます。文字を大きく太くした段落を見出し代わりにすると、文書の構造が分かりにくくなります。
WordPress公式のエディター解説では、ブロックの挿入、文書概要のリスト表示、見出し構造の確認、ブロックと投稿の設定を説明しています。見た目を調整する前に、リスト表示で自分がどのブロックを編集しているか確認すると、画像や段落の位置を整理しやすくなります。
記事タイトルは投稿のタイトル欄へ、本文の節は見出しブロックへ入れます。多くのテーマでは記事タイトルがページの主見出しになるため、本文の大区分はH2、その下の区分はH3といった階層で組みます。最終的なHTMLは使っているテーマでも確認してください。
架空の講座案内を、部品の構成へ落とし込む
編集時に用意した架空の完成例は、次の構成です。WordPress Playground上のWordPress 7.1.2、テーマTwenty Twenty-Five 1.5、PHP 8.3.33で確認しました。ブログ本番とは別の検証用環境です。
| 部品 | 入れた内容 | この形にした理由 |
|---|---|---|
| 段落 | 操作確認用の架空の講座案内という説明 | 実際の募集と誤認させない |
| リスト | 準備するもの／当日の流れへのリンク | 知りたい節へ移動できる |
| H2＋段落 | 準備するもの、筆記用具と案内文 | 見出しと具体的な準備を分ける |
| H2＋段落 | 当日の流れ、説明→個人作業→確認 | 流れを短い文で先に伝える |
| 画像 | 説明・作業・確認の3段階の図解 | 順序を視覚でも示す |
| 表 | 説明10分、作業15分、確認5分 | 合計30分の配分と作業内容を照合する |
この例の最初の文章とブロック構造、図と表の配置には、編集用に作ったブロック形式のデータとAPIを使っています。一つずつすべてのブロックを管理画面で入力した実演ではありません。以下のパターン作成、挿入後の文章編集、同期パターンの変更と保存は、実際の管理画面で操作して確認しました。
自分で作るときの進め方
- 最初に記事の本文を短い段落で入力し、大区分へ見出しブロックを置きます。
- ブロック挿入の「＋」から必要な画像、リスト、表を選びます。追加した位置が違ったら、リスト表示で対象を選び、前後の部品を確認して移動します。
- 画像は本文で説明する箇所の近くへ置き、役割に合う代替テキストを設定します。単に大きく表示するためのリンクは付けません。
- 表は列数を増やす前に、読者が横へ比較する項目を決めます。今回なら「内容・時間・行うこと」の3列で足ります。
- 下書きを保存し、実際のページの表示で見出し順、リンク先、画像、表を確認します。
横並びのレイアウトを早く作ろうとして、段落を空白や改行で位置合わせするのは避けます。画面幅が変わると同じ位置を保てないためです。文章の構造が整ってから、必要な箇所だけグループやカラムを使うほうが修正しやすくなります。
同期パターンと非同期パターンを使い分ける
同じ説明を何度も使うなら、パターンとして保存できます。ただし、「次の記事でも同じ形から書きたい」と「すべての記事で同じ文を保ちたい」は別の用事です。
WordPress公式の同期パターン資料では、同期したパターンの変更が利用先へ反映されることや、個別に編集したい場合の扱いを説明しています。今回の確認でも、編集したい段落のメニューから「Create pattern」を開き、「Synced」のオン・オフを選べました。表示言語や版により項目名が違うことがあります。
非同期は、ひな型から個別の文章を作るときに使う
最初の段落「この記事は操作確認用の架空の講座案内です。」を、Syncedをオフにして保存しました。パターン一覧から挿入した段落だけを「この段落だけを書き換える練習です。」へ変えて保存すると、元の段落はそのままで、二つの別の文として残りました。
記事ごとに違う導入や事例を作るなら、このような使い方が合います。ひな型に入れた架空の日付や価格をそのまま残さないよう、差し替える項目も一緒に点検します。
同期は、全記事で共通に保つ部分へ使う
次に「筆記用具と、改善したい案内文を一つ用意します。」をSyncedをオンにしたパターンとして保存し、二つの架空記事へ配置しました。一方の編集画面で元パターンを開き、「一つ」を「二つ」へ変更して保存したところ、両方の公開画面と取得した本文で「二つ」への反映を確認しました。
二つ目の記事への設置にはAPIを使い、パターンの作成・変更・保存は管理画面で行っています。この試験は同じパターンを参照する二つの記事での観測です。別のパターンを作り直したものや、切り離したコピーまで同じように変わるという意味ではありません。
共通案内の更新は便利ですが、ある記事だけ条件が違うなら同期を続けると誤りが広がります。変更前に利用先を確認し、共通に保つ理由がある部分だけを同期してください。
使いにくいと感じたときの確認先
- 文章を選んだつもりで全体が動くときは、リスト表示で親のグループと内側の段落を区別します。
- 右側の設定が見つからないときは、投稿全体の設定か、選択したブロックの設定かを確認します。
- 別の記事まで変わったときは、同期パターンの元データを編集していないか確認します。
- 編集画面と公開ページの見た目が違うときは、保存結果と公開側のテーマ表示を分けて確認します。
スマホ幅で、表と画像を最後に確認する
完成したデモは390px幅の表示でも確認しました。3段階の画像は本文の幅へ収まり、3列の表も画面内に収まりました。一方、表の説明文は複数行に折り返され、PCより縦に長くなります。これは画像の元サイズを見るだけでは分からない点です。
ご自身のサイトでも、使っているテーマで確認してください。図の文字が読めるか、表の列が細くなりすぎていないか、必要なら表の中だけ横へ動かせるかを見ます。編集画面で形を整え、公開側で読みやすさを確認する。この二段階で点検すると、再利用する部品も安心して増やせます。