WordPressのブロックエディタ(グーテンベルク)の使い方

現在のWordPressでは、Gutenberg(グーテンベルク)と言うブロックエディタがデフォルトで使われています。

新しくWordPressを始めた方はもちろん、以前のClassic Editor(クラシックエディタ)に慣れているベテランの方も、「ブロックエディタの使い方がよくわからない。難しい」と感じている方が多いかと思います。

私もクラシックエディタをずっと使っていましたので、ブロックエディタに変わった時は正直かなり戸惑いました。

でも、WordPress講座を行っている立場で、ブロックエディタが使えないなんてことは許されません。

そのためいち早くブロックエディタに切り替えたのですが、実際に使ってみるとブロックエディタの方がはるかに使いやすいと感じています。

ブロックエディタの基本的な使い方をまとめましたので、ぜひこの記事を見ながら使い方を覚えていってください♪

執筆者:保坂 陽平
保坂 陽平
福岡県宗像市在住。SEO対策コンサルティング、WordPress講座、動画制作などを行っています。全日本SEO協会認定SEOコンサルタント。上級ウェブ解析士。

ブロックエディタの基本的な使い方

ブロックエディタでタイトルを入力する

まずは記事のタイトルを入力していきましょう。

block-editor-001

編集画面の一番上に表示されている「タイトルを追加」をクリックして、記事のタイトルを入力します。

ブロックエディタでブロックを作成する

block-editor-002

編集画面左上のプラスのアイコンをクリックすると、編集する候補が表示されます。

タイトル下の書き始めには、リード文が入りますので「段落」をクリックして文章を書き始めましょう。

下書き保存をする

集中して作業をしていると、つい忘れがちになるのが「下書き保存」です。

パソコンがフリーズしてしまったりwi-fi環境が不安定だったりすると、頑張って書いた記事がすべて消えてしまうこともあります。

block-editor-003

頑張って書いた大切な記事が消えてしまう前に、編集画面の右上の「下書き保存」をこまめにクリックしておくクセをつけておきましょう。

ブロックエディタの各ブロックの使い方

ブロックエディタのなかでも、これだけは覚えておきたい機能について説明していきます。

メニューバーについて

段落を作りテキストを入力していくと、そのブロックのメニューバーが表示されます。

block-editor-004
  1. ブロックタイプやスタイルの変更
  2. ブロックの移動
  3. テキストの配置
  4. 太字
  5. 斜体
  6. リンク
  7. テキストの装飾
  8. ブロックの設定

この表示を覚えておくだけでも、作業が効率よく進められます。

見出しの作成

block-editor-005

見出しに入れるテキストを入力して、左上のアイコンをクリックします。


block-editor-006


「見出し」をクリックします。


block-editor-007

このように「見出し」のテキストが装飾されました。


見出しは「H2」から順番に使っていくようにしましょう。
特に必要なければH3以降は使わなくても大丈夫です。

見出しをすっきりさせることでユーザーが読みやすいだけでなく、SEO対策も期待できます。

段落を入れる

長い文章になると、ある程度のゆとりを入れることでユーザーが読みやすくなり、離脱を減らすことが期待できます。

改行だけでは圧迫感を感じる場合もありますので、実際に投稿した時のプレビューも確認しながら段落に分けていくのが良いでしょう。

block-editor-008

左上のプラスを開いて段落を作っても良いですが、カーソルを書き始めの位置に合わせてクリックすることでも、段落を開始することができます。


書き始めたらテキストを入力していき「Enter」で改行していくだけで段落を追加することができます。
段落は変えずに改行だけをする場合には「Shift」+「Enter」で改行します。

うまく使い分けてバランスの取れた文章にしていきましょう。

画像を挿入する

WordPressを運営していたら、必ず必要なのが画像の挿入です。

block-editor-009

左上のプラスから入り「画像」のアイコンをクリックします。


block-editor-010

「アップロード」をクリックし、挿入したい画像を選択してください。

過去の画像を使用する場合には「メディアライブラリ」から選択します。

画像のURLがある場合には「URLから挿入」を選択してください。

リストを作成する

すっきりと見やすい記事にしていくためにも「リスト」の作成方法を覚えておくと便利です!

block-editor-011

左上のプラスから入り「リスト」をクリックします。


block-editor-012

リストの左側に番号を入れたい場合には、数字の入った方を選択します。
あとはテキストを入力すればリストの完成です!

カラムを作成する

画像やテキストを横並びで表示させたい場合には「カラム」を使用します。

block-editor-013

左上のプラスから入り「カラム」をクリックします。


block-editor-014

お好みのレイアウトを選択します。


block-editor-015

カラムのレイアウトを選択したら、各箇所のプラスをクリックして編集していきます。

カスタムHTMLを作成する

独自のカスタムをしたい場合には「カスタムHTML」を使用します。

block-editor-016

左上のプラスから入り「カスタムHTML」をクリックします。


block-editor-017

枠の中に任意のHTMLコードやCSSコードを入力します。


block-editor-018

簡単なコードを入力してみました。
プレビューをクリックすると確認できます。


block-editor-019

簡単なコードでも、文字を目立たせたりと色々なアレンジが可能です。

ブロックを移動する

編集していると、この部分を移動させたいという時が出てきます。

その場合はブロックごとで移動させることが可能です。

block-editor-020

移動したいブロックにカーソルを合わせます。

点が六つ並んだアイコンはドラッグで、上下の矢印はひとブロックごとに移動していきます。

リンクを挿入する

テキストリンクも必要に応じて使用していきましょう。

block-editor-021

リンクを挿入したいテキストを選択し、リンクボタンをクリックします。


block-editor-022

挿入したいURLを入力し、エンターをクリックします。


block-editor-023

リンクが挿入されると、テキストの色が青に変わります。

WordPressの始め方

関連記事