WordPressで記事を書き始めたとき、多くの人が最初につまずくのが「ブロックエディタの使い方がよくわからない」という壁です。文章を打ち込むだけなら難しくないものの、画像を思い通りの位置に入れたり、表を作ったりしようとすると、途端に操作が止まってしまう方は少なくありません。
この記事では、WordPress標準のブロックエディタ(Gutenberg)の基本操作から、実際の記事作成でよく使うブロックの種類、知っておくと作業が一気に楽になる操作のコツまでをまとめて解説します。WordPressブログの始め方完全ガイドでブログを開設したばかりの方は、この記事を読みながら実際に記事編集画面を開いて操作してみると理解が早まります。
ブロックエディタとは何か
ブロックエディタは、文章・画像・見出し・表・リストといった要素を「ブロック」という単位で1つずつ積み重ねながらページを作っていく編集方式です。以前の旧エディタでは1つの大きなテキストボックスに全てを打ち込んでいく感覚でしたが、ブロックエディタでは要素ごとに区切られているため、順番の入れ替えや装飾がドラッグ操作や設定パネルだけで完結します。
プログラミングの知識がなくても、ブロックを組み合わせるだけである程度整った見た目のページを作れるのが最大のメリットです。最初は戸惑うかもしれませんが、仕組みさえ理解してしまえば、旧エディタよりもむしろ直感的に操作できるようになります。
基本操作｜ブロックの追加・移動・削除
ブロックエディタの操作は、大きく分けて「追加」「移動」「削除」の3つだけ覚えれば、日常的な記事作成には困りません。
ブロックを追加するには、画面左上の「+」アイコンをクリックするか、空の行にカーソルを合わせて表示される「+」ボタンから、追加したいブロックの種類を選びます。移動させたいときは、ブロックを選択した状態で表示される上下矢印アイコンをクリックするか、ブロック左端の「⠿」アイコンをドラッグすることで、狙った位置に並べ替えられます。不要になったブロックは、ブロック右上のメニューから「削除」を選ぶか、内容をすべて消してBackspaceキーを押すことで取り除けます。
記事作成でよく使う基本ブロック
ブロックの種類は数十種類ありますが、実際の記事作成でよく使うのは次の6つに絞られます。まずはこの表の内容を覚えておけば十分です。
| ブロック名 | 用途 |
|---|---|
| 段落 | 通常の文章を入力する、最も基本のブロック |
| 見出し | H2・H3などの見出しを設定し、記事構成を作る |
| 画像 | アイキャッチ以外の記事内画像を挿入する |
| リスト | 箇条書き・番号付きリストを作る |
| テーブル | 比較表やデータを整理して見せる |
| カスタムHTML | 装飾されたボックスなど、独自デザインを反映する |
特に「見出し」ブロックは、記事の骨組みを作るうえで欠かせません。H2を大見出し、H3をその下の小見出しとして使い分けることで、読者にとって読みやすいだけでなく、検索エンジンにも記事の構成が伝わりやすくなります。
作業効率が上がる3つの操作のコツ
基本操作に慣れてきたら、次に覚えておくと執筆スピードが大きく上がる操作のコツを紹介します。
スラッシュコマンドでブロックを一発挿入する
新しい行で「/(スラッシュ)」を入力すると、ブロックの候補一覧がその場に表示されます。「+」アイコンを探しに行かなくても、続けて「見出し」や「リスト」といったキーワードを入力すれば目的のブロックに絞り込めるため、マウス操作を最小限にしてキーボードだけでテンポよく記事を書き進められます。
ブロックをコピーして使い回す
本サイトで使っている装飾ボックスや表のように、同じデザインのブロックを何度も使う場合は、一度作ったブロックを選択した状態で「コピー」し、別の場所に「貼り付け」るだけで、同じ装飾をそのまま再利用できます。毎回スタイルを設定し直す手間が省け、記事全体のデザインも統一しやすくなります。
プレビューでスマホ表示を必ず確認する
パソコンの編集画面ではきれいに見えていても、スマホで見ると表がはみ出していたり、画像が大きすぎたりすることがあります。公開前に画面右上の「プレビュー」から「モバイル」表示を選び、実際の見え方を必ず確認する習慣をつけましょう。
初心者がやりがちな失敗と対処法
ブロックエディタに慣れないうちは、いくつかの失敗を経験しがちです。代表的なのが、画像ブロックを追加したあとにサイズ変更で不自然に画像が引き伸ばされてしまうケースです。この場合は画像を選択した状態で表示される設定パネルから「画像サイズ」を選び直せば、元の比率のまま適切な大きさに戻せます。
また、表をそのまま「テーブル」ブロックで作ると、スマホ表示で文字が縦書きのように崩れてしまうことがあります。凝った表を作りたい場合は、あらかじめHTMLとCSSで組んだコードを「カスタムHTML」ブロックに貼り付ける方法が安定します。このサイトの記事内で使われている表も、この方法で作成されています。
ブロックエディタに慣れたら広がる活用の幅
ブロックエディタの操作に慣れてくると、通常の記事だけでなく固定ページの作成にも同じ知識をそのまま活かせます。プロフィールページやお問い合わせページなど、記事とは違うレイアウトが求められる場面でも、ブロックを組み合わせる考え方は共通しているため、迷わず作業を進められるはずです。
さらに、より多機能なブロックを追加したい場合はWordPressおすすめプラグインで紹介されているような拡張プラグインを導入することで、目次の自動生成やボタンデザインなど、標準機能だけでは難しい表現も実現できるようになります。
まとめ
ブロックエディタは、最初こそ操作に戸惑うものの、追加・移動・削除という3つの基本さえ押さえてしまえば、あとは使うブロックの種類を少しずつ増やしていくだけです。スラッシュコマンドやブロックのコピーといった小さな時短ワザを覚えるほど、記事執筆のスピードは確実に上がっていきます。まずは今回紹介した6つの基本ブロックから、実際の編集画面で触ってみてください。
コメント