選ばれるAI診断

WordPressのブロックエディタの使い方|貼り付け・見出し・表・画像の基本を、初心者向けに手順で解説

公開日: / カテゴリ: WordPress入稿 / 執筆: エラバレル

WordPressのブロックエディタの使い方|貼り付け・見出し・表・画像の基本を、初心者向けに手順で解説

「WordPressで記事を書こうとしたら、画面がブロックだらけで戸惑った」「見出しや表の入れ方が分からず、1記事に何時間もかかってしまう」。WordPressを使い始めたばかりの方や、久しぶりに触る方から、よく聞く悩みです。

先に結論をお伝えします。ブロックエディタは、文章・見出し・画像・表などを「ブロック」という部品として積み上げて、記事を作る仕組みです。 覚えることは、「ブロックを追加する」「ブロックの種類を変える」「ブロックを動かす」「右側の設定を見る」の4つだけです。さらに、原稿をGoogleドキュメントなどで書いておき、まとめて貼り付ける方法を覚えると、作業の時間は大きく減ります。

この記事では、ブロックエディタの画面の見方、基本の操作、見出し・リスト・表・画像の入れ方、ほかのソフトからの貼り付けのコツ、作業を速くする近道、公開前の確認までを、順番に説明します。

この記事でわかること

  • ブロックエディタとは何か、クラシックエディタとの違い
  • 編集画面の見方(上・左・真ん中・右の4つの場所)
  • ブロックの追加・移動・削除・種類の変更
  • 見出し・リスト・表・画像の入れ方
  • Googleドキュメント・Word・マークダウンからの貼り付けのコツ
  • 作業が速くなる入力の近道と、公開前の確認

ブロックエディタとは?

ブロックエディタは、WordPress 5.0から標準になった、記事を書くための編集画面です。「Gutenberg(グーテンベルク)」という開発の名前で呼ばれることもあります。

ブロックエディタでは、記事を次のような「ブロック」の組み合わせで作ります。

  • 段落のブロック(ふつうの文章)
  • 見出しのブロック(章や節の見出し)
  • リストのブロック(箇条書き・番号つきリスト)
  • 画像のブロック
  • テーブルのブロック(表)
  • ボタン・区切り線・引用・カスタムHTMLなどのブロック

1つの段落、1つの見出し、1枚の画像が、それぞれ1つのブロックです。ブロックごとに、種類の変更や移動、飾りの設定ができます。

クラシックエディタとの違い

WordPress 5.0より前の編集画面(クラシックエディタ)は、ワープロのように1つの大きな入力欄に文章を書く形でした。ブロックエディタは、部品を積み上げる形なので、画像や表の位置を後から入れ替えやすく、見た目も編集画面と公開後でほぼ同じになります。どちらを使うべきか、切り替える方法はブロックエディタとクラシックエディタの違いで説明しています。

編集画面の見方

管理画面の「投稿」→「新規投稿を追加」(WordPressの版によっては「新規追加」)を押すと、ブロックエディタが開きます。画面は大きく4つの場所に分かれています。

場所あるもの使う場面
上の帯(ツールバー)左に「+」(ブロック挿入ツール)、元に戻す・やり直し、リスト表示。右に「下書き保存」「プレビュー」「公開」、設定の表示・非表示、「︙」(オプション)ブロックを探して入れるとき、保存・公開するとき
真ん中(編集の場所)タイトルの入力欄と、本文のブロック文章を書く、ブロックを並べる
右側(設定サイドバー)「投稿」のタブ(カテゴリ・タグ・アイキャッチ・公開日など)と、「ブロック」のタブ(選んでいるブロックの設定)記事の設定、画像の代替テキスト、表の設定など
ブロックの上の小さな帯(ブロックツールバー)ブロックの種類の変更、移動、太字・リンクなどの飾り、「︙」(その他)選んでいるブロックを編集するとき

右側の設定サイドバーが見当たらない場合は、上の帯の右側にある、四角を左右に分けたような形のボタンを押すと表示されます。初めのうちは、この設定サイドバーを常に開いておくと、選んでいるブロックで何を設定できるのかが分かりやすくなります。

メニューの名前や位置は、WordPressの版によって少し違う

WordPressは年に数回更新され、そのたびにボタンの名前や位置が少し変わることがあります。この記事で紹介する名前が見当たらないときは、近い名前や、同じ場所にあるアイコンを探してみてください。基本の考え方(ブロックを積み上げる、右側で設定する)は変わりません。

ブロックの基本の操作

ブロックを追加する

ブロックを追加する方法は、3つあります。

  1. 上の帯の「+」を押す:ブロックの一覧が左側に開くので、使いたいブロックを選ぶ
  2. ブロックとブロックの間にマウスを置く:小さな「+」が出るので、押してブロックを選ぶ
  3. 空の段落で「/」(スラッシュ)を入力する:「/見出し」「/画像」「/表」のように、ブロックの名前を続けて入力すると候補が出る

慣れてきたら、3つ目の「/」を使う方法がいちばん速くなります。キーボードから手を離さずに、ブロックを入れられるからです。

ブロックの種類を変える

段落として書いた文章を、見出しやリストに変えたいときは、ブロックを選んで、ブロックツールバーのいちばん左のアイコン(今のブロックの種類を表すアイコン)を押し、変えたい種類を選びます。

ブロックを動かす

ブロックを選ぶと、ブロックツールバーに上向き・下向きの矢印が出ます。押すと、1つずつ上下に動きます。矢印の横の点々の部分(ドラッグのつまみ)をつかんで、好きな位置まで引っぱって動かすこともできます。

ブロックを複製・削除する

ブロックツールバーの「︙」(オプション)を押すと、「複製」「前に追加」「後に追加」「削除」などのメニューが出ます。同じ形のブロックをくり返し使うときは、複製すると便利です。

ブロックをまとめる(グループ・カラム)

いくつかのブロックをまとめて動かしたり、同じ背景色をつけたりしたいときは、「グループ」を使います。まとめたいブロックを、Shiftを押しながらクリックして複数選び、ブロックツールバーの「︙」から「グループ化」を選びます。グループにしたブロックは、1つのまとまりとして移動できます。

画像と文章を横に並べたいときは、「カラム」のブロックを使います。ただし、スマートフォンでは縦に並び替わることが多いので、横並びにしなくても伝わる内容なら、無理に使わなくてかまいません。

全体の並びを確かめる(リスト表示)

上の帯にある、横線を重ねたようなアイコン(リスト表示、または「ドキュメント概観」)を押すと、記事の中のブロックが一覧で表示されます。見出しの順番を確かめたり、長い記事の中で目的のブロックへ移動したりするときに便利です。

見出しの入れ方

見出しは、記事の章や節の題名です。読む人が記事の流れをつかむためだけでなく、検索エンジンやAIが記事の組み立てを理解するための大事な手がかりにもなります。

  1. 見出しを入れたい場所で、「/見出し」と入力するか、「+」から「見出し」を選ぶ
  2. 見出しの文字を入力する
  3. ブロックツールバーの「H2」「H3」などで、見出しの大きさ(階層)を選ぶ

見出しの階層のルール

見出し使う場所
H1記事のタイトル。テーマが自動で使うので、本文では使わない
H2記事の大きな章
H3H2の中の小さな節
H4H3の中をさらに分けるとき(あまり使わない)

本文の見出しは、H2から始めて、H2 → H3 の順番を守るのが基本です。文字を大きくしたいから H2、少し小さくしたいから H4、というように、見た目で選ばないでください。見た目を変えたい場合は、テーマの設定で調整します。

見出しの文の書き方

見出しの文は、その章を読むと何が分かるのかが、見出しだけで伝わるように書きます。「ポイント」「その他」のような短い言葉より、「料金はいくら? 基本プランと追加の費用」のように、中身が想像できる見出しのほうが、読む人にも検索エンジンにも親切です。読む人がよく抱く疑問を、そのまま質問の形で見出しにして、見出しのすぐ下に1〜2文で答えを書くと、AIの回答にも使われやすい形になります。

見出しを「太字の段落」で代用しない

段落の文字を太字にして見出しのように見せても、検索エンジンやAIには見出しとして伝わりません。目次のプラグインも、見出しとして拾いません。見出しは必ず「見出し」のブロックで入れてください。

リスト・表の入れ方

リスト(箇条書き・番号つき)

  1. 「/リスト」と入力するか、「+」から「リスト」を選ぶ
  2. 1項目めを入力して Enter を押すと、次の項目が増える
  3. 番号つきにしたいときは、ブロックツールバーで「番号付きリスト」に切り替える
  4. 項目の中で Tab を押すと、1段下げた入れ子のリストになる

空の段落で「- 」(ハイフンと半角スペース)や「1. 」(数字・ピリオド・半角スペース)と入力しても、自動でリストに変わります。

表(テーブル)

  1. 「/テーブル」と入力するか、「+」から「テーブル」を選ぶ
  2. 列の数と行の数を入れて「表を作成」を押す
  3. セルをクリックして、文字を入力する(Tab で次のセルへ移動)
  4. 行や列を増やしたいときは、ブロックツールバーの表の編集のアイコンから、「行を上に挿入」「列を右に挿入」などを選ぶ
  5. 1行目を見出しにしたいときは、右側の設定サイドバーの「ブロック」のタブで、「ヘッダーセクション」をオンにする

表は、料金や比較のように、項目ごとに並べて比べたい情報に向いています。スマートフォンでは横幅が狭くなるので、列は3〜4列までにしておくと読みやすくなります。表の作り方と崩れないコツは、Googleドキュメントの表をWordPressに貼る方法でも説明しています。

画像の入れ方

  1. 「/画像」と入力するか、「+」から「画像」を選ぶ
  2. 「アップロード」でパソコンの画像を選ぶか、「メディアライブラリ」から、すでにアップロードした画像を選ぶ
  3. 画像が入ったら、右側の設定サイドバーの「ブロック」のタブを開く
  4. 「代替テキスト」に、画像に何が写っているかを短い文章で書く
  5. 必要なら、画像の下の「キャプションを追加」に説明を書く

画像ファイルを、パソコンのフォルダから編集画面に直接ドラッグしても、画像のブロックとして入ります。

代替テキスト(alt)を忘れずに

代替テキストは、画像が表示されないときや、目の不自由な方が読み上げの機能を使うときに、画像の代わりに読まれる文章です。検索エンジンやAIも、代替テキストから画像の中身を理解します。「画像」「写真1」のような意味のない言葉ではなく、「〇〇市の施工事例。木の床とつくりつけの本棚があるリビング」のように、具体的に書きます。書き方は画像の代替テキストの記事で詳しく説明しています。

アイキャッチ画像

記事の一覧やSNSで表示される「アイキャッチ画像」は、本文の画像とは別に、右側の設定サイドバーの「投稿」のタブで設定します。「アイキャッチ画像を設定」を押して、画像を選びます。

Googleドキュメント・Word・マークダウンからの貼り付け

記事の原稿を、GoogleドキュメントやWordで書いてから、WordPressに貼る人は多いと思います。ブロックエディタは、貼り付けた文章を、見出し・段落・リスト・表などのブロックに自動で分けてくれます。

貼り付けの手順

  1. GoogleドキュメントやWordで、原稿の本文を選んでコピーする(Ctrl + C)
  2. ブロックエディタで、タイトルの下の最初の段落をクリックする
  3. 貼り付ける(Ctrl + V)
  4. 見出し・リスト・表がブロックになったかを、リスト表示で確かめる
  5. 画像のブロックに「外部画像をアップロード」という表示が出ていたら、押してメディアライブラリに取り込む

崩さないためのコツ

うまくいかないこと原因対策
見出しが段落になってしまう原稿の見出しを、太字と文字の大きさだけで作っている原稿で「見出し2」「見出し3」のスタイルを使う
余計な空の段落が入る原稿で、行を空けるために空の行を入れている原稿で空の行を入れない。貼ったあとに消す
画像が表示されなくなる画像がWordPressに取り込まれず、元の場所を参照している「外部画像をアップロード」で取り込む
表が崩れるセルの結合や、表の中の改行原稿の表は、結合せずにシンプルに作る
文字の色や大きさが変になる原稿の書式が一緒に貼られた書式なしで貼り付けてから、見出しなどを付け直す

Wordからの貼り付けで起きやすい崩れは、WordからWordPressに貼り付けると崩れる理由で詳しく説明しています。

マークダウンも貼れる

マークダウン(## 見出し や - 箇条書き のように、記号で文章の構造を書く書き方)で書いた原稿を貼ると、ブロックエディタが見出しやリストのブロックに変換してくれます。テキストエディタで原稿を書いている人に便利な方法です。

ライターの原稿を毎週入稿している場合

よくある状態:〇〇社のブログ担当者が、ライターから届くGoogleドキュメントの原稿を、段落ごとにコピーして貼り、見出しを1つずつ付け直していた。1記事に1時間近くかかっていた。
変えたこと:①ライターに、見出しは「見出し2」「見出し3」のスタイルで書いてもらうようにした ②原稿の本文をまとめてコピーして、一度に貼るようにした ③貼ったあとは、リスト表示で見出しの順番を確かめ、画像だけ取り込みを確認する流れにした。

貼り付けそのものをなくす方法

毎週たくさんの記事を入稿するなら、コピーと貼り付け、画像の取り込みそのものを自動にする方法もあります。

エラバレルのドクポスは、GoogleドキュメントのURLを貼ると、WordPressの記事を下書き・予約・公開のどれかで作るウェブサービスです。見出し・太字・リンク・箇条書き・番号リスト・表・画像・蛍光ペンを、WordPressのブロックに変換します。画像はメディアライブラリにアップロードした状態で入り、空の段落は入りません。表の1行目が太字なら、見出しの行になります。WordPressとは、アプリケーションパスワード(WordPress 5.6以降の標準機能)でつなぐので、ログインのパスワードを渡す必要はありません。5記事まで、カード登録なしで試せます。ドキュメントから記事にする方法の比較は、GoogleドキュメントをWordPressの記事に変換する方法にまとめています。

作業が速くなる入力の近道

ブロックエディタには、キーボードだけでブロックを作れる近道があります。覚えておくと、マウスに持ち替える回数が減ります。

  • 空の段落で ## と入力(半角のシャープ2つと半角スペース)→ H2の見出しになる
  • 空の段落で ### と入力 → H3の見出しになる
  • 空の段落で - と入力 → 箇条書きのリストになる
  • 空の段落で 1. と入力 → 番号つきリストになる
  • 空の段落で > と入力 → 引用になる
  • 空の段落で / に続けてブロックの名前 → そのブロックを入れる
  • Ctrl + B で太字、Ctrl + I で斜体、Ctrl + K でリンク
  • Ctrl + Z で元に戻す、Ctrl + Shift + Z でやり直す

キーボードの近道の一覧は、上の帯の「︙」(オプション)の中の「キーボードショートカット」から確認できます。全部を一度に覚える必要はありません。まずは「/」でブロックを呼び出す方法と、## で見出しを作る方法の2つだけを覚えると、マウスでブロックを探す時間がぐっと減ります。慣れてきたら、リストやリンクの近道を少しずつ足していきましょう。

よく使う形は「パターン」に登録する

記事の最後の案内文や、毎回同じ形のボックスなど、くり返し使うブロックのまとまりは、「パターン」として登録しておくと、呼び出すだけで使えます。ブロックを選んで、ブロックツールバーの「︙」から「パターンを作成」を選び、名前をつけて保存します(WordPressの版によっては「再利用ブロック」と呼ばれています)。

公開前の確認

記事ができたら、公開する前に次のことを確かめます。

  1. 上の帯の「プレビュー」を押し、パソコンとスマートフォンの表示で見た目を確かめる
  2. 右側の設定サイドバーの「投稿」のタブで、カテゴリ・タグ・アイキャッチ画像・URL(スラッグ)を確かめる
  3. リスト表示で、見出しの順番(H2 → H3)が正しいかを確かめる
  4. 公開日を指定したい場合は、「公開」の欄で日時を変え、「予約投稿」にする
  5. 問題がなければ「公開」を押す

公開前のチェックリスト

  • 見出しは「見出し」のブロックで入れ、H2 → H3 の順番になっている
  • 画像に代替テキストが入っている。「外部画像をアップロード」の表示が残っていない
  • 表の1行目が、必要ならヘッダーになっている
  • 空の段落が残っていない
  • リンクが正しいページに飛ぶ
  • カテゴリ・アイキャッチ・スラッグを設定した
  • スマートフォンのプレビューで、表や画像がはみ出していない

よくある質問

ブロックエディタが使いにくいので、クラシックエディタに戻せますか?

「Classic Editor」というプラグインを入れると、クラシックエディタに戻せます。ただし、これからのWordPressはブロックエディタを前提に作られているので、少しずつ慣れていくのがおすすめです。違いと切り替えの方法はブロックエディタとクラシックエディタの違いで説明しています。

改行すると、段落が分かれてしまいます。

ブロックエディタでは、Enter を押すと新しい段落のブロックになります。同じ段落の中で改行したいときは、Shift + Enter を押してください。

ブロックを間違えて消してしまいました。

すぐに Ctrl + Z を押すか、上の帯の「元に戻す」(左向きの矢印)を押すと、元に戻せます。保存したあとでも、記事の「リビジョン」(過去の保存の記録)から、前の状態に戻せることがあります。

HTMLを直接書きたいときは?

1つのブロックだけHTMLで書きたいときは、「カスタムHTML」のブロックを使います。記事全体をHTMLで見たり直したりしたいときは、上の帯の「︙」(オプション)から「コードエディター」に切り替えます。

画像の大きさを変えるには?

画像のブロックを選び、右側の設定サイドバーの「ブロック」のタブで、大きさや幅を選べます。画像の端のつまみをドラッグして変えることもできます。表示が重くならないように、アップロードする前に、画像そのものを適切な大きさに縮めておくのがおすすめです。

保存したはずの内容が消えてしまいました。

ブロックエディタには、書いている途中の内容を自動で保存する機能があります。ブラウザを閉じてしまった場合でも、同じ記事を開き直すと、「自動保存された内容があります」といった案内が出て、復元できることがあります。大事な記事は、こまめに「下書き保存」を押す習慣をつけておくと安心です。

スマートフォンでもブロックエディタは使えますか?

スマートフォンのブラウザや、WordPressのアプリでも使えます。ただ、画面が小さいので、長い記事の入稿や表の編集はパソコンのほうが楽です。

まとめ

WordPressのブロックエディタの使い方のポイントをまとめます。

この記事のまとめ

  • ブロックエディタは、段落・見出し・画像・表などのブロックを積み上げて記事を作る仕組み
  • 覚えることは、追加(「+」か「/」)・種類の変更・移動・右側の設定の4つ
  • 見出しは「見出し」のブロックで、H2 → H3 の順番を守る
  • 画像には代替テキストを書き、貼り付けた画像はメディアライブラリに取り込む
  • 原稿は見出しのスタイルで書き、まとめて貼ると速い。マークダウンも貼れる
  • 公開前に、プレビュー・見出しの順番・記事の設定を確かめる

入稿の作業そのものを短くしたい方は、ドクポスも試してみてください。GoogleドキュメントのURLを貼るだけで、見出し・表・画像の入ったWordPressの記事を作れます。5記事まで、カード登録なしで試せます。

ドクポスを無料で試す

参考にした資料