【図解付き】WordPressブロックエディタの基本的な使い方を解説

WordPressの投稿画面は、ver.5.0からGutenberg(グーテンベルク)と呼ばれるブロックエディタが標準搭載されています。

しかし、以前のエディタバージョンに慣れていた人や、初めてブロックエディタに触れる人にとっては難しく感じるでしょう。

そこで本記事では、ブロックエディタが

「使いづらい」

「使い方がわからない!」

と言う方のために図解付きで、分かりやすく解説していきます。

この記事を読むことで、快適にコンテンツ作成ができるでしょう。

WordPressのブロックエディタ(Gutenberg)とは?

WordPressにおけるブロックエディタ(Gutenberg)とは、ver.5.0から標準搭載されている記事投稿画面のことです。

文章や画像をブロックごとに管理するため、このように呼ばれています。

ブロックエディタの最大の特徴は、CSSやHTMLの知識がなくても、直感的な操作性で記事作成ができるという点です。

そのため、初心者の方でも使い方を覚えてしまえば高品質な記事を書くことができます。

ブロックエディタの構造

まずは、ブロックエディターがどのような構造になっているのか見ていきましょう。

ブロックエディタは、以下のような画面構成からできています。

  • ヘッダーメニューバー
  • 記事エリア
  • 右メニューバー

ヘッダーメニューバー

ヘッダーメニューバーでは、記事の公開や記事全体に関係する操作ができます。

ここからは、それぞれのボタンの役割を解説していきます。

  1. 投稿一覧画面に切り替え
  2. ブロックの選択・編集モード選択
  3. 元に戻す(操作を一つ前に戻す)
  4. 進める(元に戻した操作を取り消す)
  5. 記事構造を表示
  6. ブロックナビゲーションを表示
  7. 下書き保存
  8. 記事のプレビュー表示
  9. 記事の公開
  10. 右メニューバー表示/非表示
  11. エディタ表示の設定

フッターメニューバーは項目が多いですが、重要な操作が多く含まれているので、覚えておきたい項目です。

右メニューバー

右メニューバーは、各ブロックに関する設定やカテゴリー、アイキャッチ画像など記事公開に関する設定を行います。

以下では、各項目を解説していきます。

投稿タブ

  1. ステータスと記事公開:記事の公開状態や設定をする
  2. パーマリンク:パーマリンクの設定ができる 
  3. カテゴリー:記事のカテゴリーを設定できる
  4. タグ:タグの指定ができる
  5. 抜粋:記事の要約文を入力
  6. ディスカッション:コメント欄の設定を行う

投稿タブでは、記事の公開設定やカテゴリーに関する設定を行います。


ブロックタブ

  1. ブロックの説明:指定しているブロックの説明
  2. タイポグラフィ:文字の大きさを指定できる
  3. 色設定:ブロックごとに文字色や背景色を指定できる
  4. テキスト設定:ブロックの先頭文字を大きな表示にできる
  5. 高度な設定:ブロックにCSSクラスを指定できる

ブロックタブでは、各ブロックの色や文字の大きさを変更できます。

高度な設定は、通常は使いません。

その他の項目は、よく使われるので操作に慣れておくようにしましょう。

記事エリア

記事エリアではタイトルから始まり、各段落の構成や画像の挿入を行いながら記事作成をしていきます。

コンテンツ作りのメインエリアといえる重要なエリアです。

詳細の操作方法は、後ほど解説していきます。

まずは、各エリアの構造をしっかりと頭に入れていきましょう。

ブロックエディタの基本操作

ここからは、ブロックエディタの基本的な使い方について解説していきます。

ブロックエディタを実際に使って記事を書く方法と手順は、以下の通りです。

  • まず覚えておきたい「下書き保存」
  • タイトルを入力
  • 本文を入力
  • 文字の大きさや装飾を変更
  • 見出しを入力
  • リスト(箇条書き)を挿入
  • 引用を挿入
  • 画像を挿入
  • リンク(URL)を挿入
  • パーマリンクを設定
  • パーマリンクを設定
  • プレビュー
  • 記事を公開

まず覚えておきたい「下書き保存」

ブロックエディタで記事を作成していく上で、まず覚えておいてもらいたいのが「下書き保存」です。

下書き保存はヘッダーメニューバーの右側にあります。

下書き保存を利用することで、記事の作成が途中でも設定が保存されます。

「パソコンが壊れてしまって、今まで書いた記事データーがなくなった・・・」

こんな悲劇が起こらないようにするためにも、下書き保存はこまめに行いましょう。

下書き保存は重要な項目なので、覚えておいてください。

タイトルを入力

まず、記事作成で初めにやることはタイトルの入力です。

タイトルの入力は、下の画像の赤枠で囲った部分をクリックし、タイトルを入力します。

ちなみに、タイトルの文字数は32文字以内を目安に作成するようにしましょう。

なぜなら、検索エンジンで表示されるタイトルの長さが決められているからです。

あまりにも長すぎるタイトルは、後半が省略されてしまうため全てが表示されません。

本文を入力

タイトルを入力したら、次に本文を入力していきます。

本文は、下の画像の赤枠で囲った部分をクリックし入力していきましょう。

本文を入力し、エンターを押して改行すると次のブロックに移動します。

同じブロック内で改行する場合には「shift」+「enter」で改行が可能です。

文字の大きさや配置を変更

文字の大きさや配置、装飾を変更するには下の画像の番号で指定したものを使用します。

  1. テキストの配置を変更
  2. 文字を太文字にする
  3. 文字をイタリックに変更
  4. ブロック内の文字の大きさを変更
  5. ブロック内の文字の色を変更

また、指定したテキストだけ色を変えたい場合は、下の画像のようにテキストを指定し①→②の順番で色を変更できます。

見出しを入力

見出しは、記事の構造をユーザー分かりやすく伝えるとともに、記事を読みやすくさせる効果があります。

見出しの挿入方法はまず、下の画像の①のアイコンをクリックし、②の「見出し」を選択します。

すると、見出しの文字が入力できるので作成していきましょう。

見出しの階層を変えたい場合には、下の画像の①をクリックし②の見出しの階層を選択します。

また見出しを使うときのルールには、以下のようなものがあるので抑えておきましょう。

  • H1は1記事に1回だけ使う
  • H2〜H6に使用制限はない
  • 適切な階層構造を形成するように使用する

リスト(箇条書き)を挿入

本文中にリスト(箇条書き)を挿入することで、記事が見やすくなります。

リストを挿入するには、右側にある「+」をクリックして「リスト」を選択します。

デフォルトのリストの状態は、番号なしです。

番号付きのリストにしたい場合は、画面上にある番号リストをクリックしましょう。

引用を挿入

引用は記事や文章を分かりやすく、説得力を持たせるために他に記事などから文章をそのまま記述することです。

引用の記述は、引用したことが分かるように区切って参考元が分かるように明記します。

ブロックエディタの引用方法は、画面右側の「+」をクリックし「引用」を選択します。

すると引用を入力する部分が現れるので、引用文と引用元を入力しましょう。

注意点としては、必ず引用したサイトがわかるように引用元をしっかりと入力することです。

引用したURLを明記すると、なお良いでしょう。

画像を挿入

ブロックエディタで記事に画像を挿入するには、画面右側の「+」をクリックし「画像」を選択します。

次に画像の挿入方法を「アップロード」「メディアライブラリ」「URLから挿入」の三つの中から選びましょう。

ここでは、例として「メディアライブラリ」から画像を挿入してみます。

メディアライブラリを選択すると、アップロードされた画像の一覧が表示されるので、挿入したい画像を選択します。

画像の位置や大きさを変えたい場合は、画像の端についている「●」をドラッグしながら動かすことでサイズ調整が可能です。

また、画像の配置を変更したい場合は、画面上のツールバーから変更できます。

リンク(URL)を挿入

記事にリンク(URL)を挿入することで、外部サイトや他の記事にユーザーを誘導できます。

ブロックエディタでのリンクの挿入方法は、以下の通りです。

  1. URLを反映させたい文字を選択
  2. 画面上のリンクアイコンをクリック
  3. リンクさせるURLを入力
  4. 新規タブでURLを開かせたい場合はチェックを入れる
  5. 入力したURLの下に表示されている部分をクリック

パーマリンクを設定

記事が書けたら、次にパーマリンクを設定していきましょう。

WordPressにおけるパーマリンクとは、ホームページ内のページごとに設定できるURLのことを指します。

URLは、ドメイン名と任意の文字列で構成されており、パーマリンクは投稿の日付や任意の投稿名など自由に設定することができます。

ブロックエディタでのパーマリンク設定方法は、まずサイト管理画面の左メニューバーの「設定」→「パーマリンク設定」をクリックしましょう。

デフォルトのパーマリンクの共通設定は、基本になっているので「投稿名」に変更します。

最後に「変更を保存」を忘れずにクリックし、先程の投稿画面に戻り右メニューバーの「パーマリンク」をクリック。

デフォルトのパーマリンクは日本語で書かれているので、これを英語表記に変更していきます。

パーマリンクは日本語ではなく、英語表記にしたほうが好ましいです。

その理由としては以下のような理由があります。

  • WordPressのバージョンによっては日本語パーマリンクに対応していない
  • 日本語パーマリンクだとブックマークできない場合がある
  • エンコードにすると無駄に長くなってしまう

記事を書くたびに設定しなければならないので、面倒に感じるかもしれませんがパーマリンクは重要な項目なので、しっかりと設定していきましょう。

カテゴリー/タグを設定

カテゴリーやタグは、記事をジャンルごとに振り分けられる機能です。

カテゴリーやタグを設定しておくことで、ユーザーは記事を探しやすくなります。

ブロックエディタでのカテゴリーの設定手順は、以下の通りです。

  1. 右メニューバーからカテゴリーを選択
  2. 「新規カテゴリーを追加」をクリック
  3. カテゴリー名を入力
  4. 「新規カテゴリーを追加」をクリックして完了

既に追加してあるカテゴリーにする場合は、指定したいカテゴリーの左側にチェックを入れて完了です。

基本的にカテゴリーは1、記事に一つ付けるのが好ましいとされています。

次に、タグをブロックエディタで設定していきましょう。

ちなみにタグは、1記事に複数設定が可能です。

タグの設定方法は、以下の通りです。

  1. 右メニューバーの「タグ」をクリック
  2. 「新規タグを追加」の欄にタグ名を入力

複数のタグをつけたい場合は、半角コンマやエンターキーで区切ります。

アイキャッチ画像を設定

WordPressにおけるアイキャッチ画像とは、各記事の看板のようなものです。

ユーザーが一眼見て思わず読みたくなるようなアイキャッチを設定することで、記事を読んでもらいやすくなります。

ブロックエディタでのアイキャッチ画像の設定方法は、以下の通りです。

  1. 右メニューバーの「アイキャッチ画像」を選択
  2. 「アイキャッチ画像を設定」をクリック
  3. アイキャッチ画像を選択
  4. 「アイキャッチ画像を設定」をクリック

アイキャッチ画像の選択は、新規で画像をアップロードするか、メディアライブラリから選択します。

アイキャッチ画像を入れることで記事自体も華やかになりますので、ぜひ設定してみてください。

プレビュー

記事が完成したら、記事を公開する前にプレビュー機能で記事のレイアウトを確認してみましょう。

ブロックエディタでのプレビューで記事を確認する方法は、以下の通りです。

  1. ヘッダーメニューバーの「プレビュー」をクリック
  2. プレビューで表示させたい端末を選択
  3. 「新しいタブでプレビュー」をクリック

プレビュー表示できる端末は、デスクトップ、タブレット、モバイルの3つです。

プレビュー機能でユーザーから記事がどのように見えているのかをチェックしておきましょう。

記事を公開

プレビューで記事のレイアウトを確認したら、いよいよ記事の公開を行います。

ブロックエディタでの記事の公開方法は、以下の通りです。

  1. 画面上のヘッダーメニューバーから「公開」をクリック
  2. 画面が切り替わるのでもう一度「公開」をクリックして完了

これで、記事が全世界に配信され誰でも読める状態になります。

この他にも、非公開などの公開設定をできる機能や、公開日を変更できる機能などがあります。

公開自体は簡単な方法なので、迷うことはないはずです。

まとめ:ブロックエディタに慣れよう

ここまで、ブロックエディタの基本的な使い方と記事作成方法を解説してきました。

ブロックエディタには、さまざまな機能がついているので、慣れるまでは少し難しく感じるかもしれません。

しかし、この記事を参考にしながら、記事を書いていけば慣れてスムーズに記事が書けるようになるはずです。

より良いコンテンツをユーザーに提供できるように、ブロックエディタを使いこなしていきましょう。