月額定額制(サブスク)ホームページ制作 | ビズサイ
お役立ちコラム

WordPressのブロックエディタの使い方を初心者向けに解説

  

WordPressのバージョン5.0で登場したGutenberg(グーテンベルク)は、通称「ブロックエディタ」と呼ばれています。

2018年にWordPressのバージョン5.0で実装されたブロックエディタは革新的で、評価が大きく分かれるものでした。
しかし、使い慣れた人が多くなるにつれて、ブロックエディタは高い評価へと変わっていきます。

『ブロックエディタの使い方がわからない』
『ブロックエディタで記事を作成するのはどうするの?』
『ブロックエディタって何だか使いにくい!』

今回のコラム記事では、上記のような人たちのためにブロックエディタのわかりやすい使い方を解説します。

※今回のコラム記事では、WordPressのバージョン5.8.2で解説しています

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

WordPressのブロックエディタの正式名称はGutenberg(グーテンベルク)ですが、通称としてブロックエディタと呼ばれることが多いです。

WordPress5.0から登場したブロックエディタは、今までのブログエディタにはない、さまざまな特徴があります。
ブロックエディタの登場はWordPress史上、画期的な出来事でした。

どのように登場し、どのような特徴があるのか、かんたんにまとめます。

WordPress5.0でブロックエディタが登場

WordPressのバージョン4.9までは、クラシックエディタが採用されていました。

クラシックエディタ(旧エディタ)は、エディタ画面にいろいろなボタンがあり、入力したテキストを選択してボタンをクリックすることで見出しや太文字、色文字などに変更するエディタのことです。

しかし、WordPressのバージョン5.0からはブロックエディタが採用されました。
ブロックエディタは、柔軟で豊かなコンテンツレイアウトを誰もがデザインできるようにしました。

WordPressの歴史にとってブロックエディタの登場は、画期的だと評価されています。

ブロックエディタの特徴

ブロックエディタの特徴は、以下のようにまとめられます。

  • レイアウトがしやすい
  • 余計なタグが入らない
  • 作業時間が短縮できる
  • 各ブロックの設定内容に応じた表示内容が表示される

ブロックエディタは、HTML やCSSの知識がなくてもレイアウトがかんたんです。
ブロックエディタのレイアウト要素やカラム要素を組み合わせて、自由にレイアウトを行えます。

くわえて、ブロックごとに編集するため余計なタグが入りません。
ソースコードを汚さずに編集ができます。

各ブロックの設定内容に応じた表示内容が出力されるため、操作に迷うことが少なくなります。
どのようなブロックがあるか把握すれば、作業時間も大幅に短縮できます。

ブロックエディタのメリット

ブロックエディタのメリットは、以下になります。

  • ブロックに分けてコンテンツ管理
  • ブロックごとの設定がかんたん
  • レイアウトがかんたんに設定できる

ただし、ブロックエディタを使いこなすには慣れが必要です。
今までクラシックエディタに慣れ親しんだ人にとって、ブロックエディタは最初、使いにくいものに感じるかもしれません。

しかし、慣れるとブロックエディタは非常に優秀なエディタだと理解できます。
ブロックエディタのメリットについて、解説していきます。

ブロックに分けてコンテンツ管理

従来のクラシックエディタには、ブロックという概念はありません。
平面上に広がったエディタのなかで、テキストとボタンを選択して見出しや太文字、画像の挿入を行っていました。

しかし、ブロックエディタでは、ブロックごとにコンテンツを分けて管理できます。
「引用ブロック、」「画像ブロック」「段落ブロック」「テーブルブロック」などに分かれており、それぞれのブロックは独立しています。

そのため、ブロックごとに影響しあわず、余計なタグが入ったりすることがありません。

ブロックごとの設定がかんたん

クラシックエディタでは、設定ボタンがずらりとエディタ上に表示されていました。
しかし、ブロックエディタではブロックごとにシンプルに表示されます。

たとえば、段落ブロックでテキストを入力しているときに表示されるのは、テキストの装飾に関する設定だけです。

表示がシンプルなので、操作も迷いなく行うことができます。

レイアウトがかんたんに設定できる

ブロックエディタ最大の特徴は、レイアウトやデザインがかんたんになったことです。
HTMLやCSSの専門知識がなくても、自由にWebページをレイアウトできます。

たとえば、2カラムや3カラムのレイアウトは、今までのクラシックエディタでは困難でした。
しかし、ブロックエディタではカラムブロックを使えば、かんたんに実現可能です。

かんたんで自由で柔軟なデザインができるブロックエディタでは、多くの人がデザインを楽しめます。

エディタの画面構成

ブロックエディタの画面構成

ブロックエディタの画面構成は「ヘッダーメニューバー」「右サイドのメニューバー」「執筆エリア」の3つに分かれています。

右サイドのメニューバーは、さらに「投稿タブ」「ブロックタブ」に分かれます。

それぞれの持つ役割や機能について紹介します。

ヘッダーメニューバー

ヘッダーメニューバー

ヘッダーメニューバーには、以下のボタンがあります。

  1. ブロックの挿入
  2. ツール(編集・選択モードの切り替え)
  3. 元に戻す・やり直す
  4. テキストの詳細・文字数
  5. ブロックリスト(コンテンツ構造)の表示
  6. 下書き保存
  7. プレビュー
  8. 公開
  9. 設定
  10. オプション

ヘッダーメニューバーには、文章やブロックに依存しないボタンが並んでいます。
「ブロックの挿入」「テキストの詳細・文字数」「下書き保存」「プレビュー」などが特によく使用するボタンです。

右サイドメニューバー

右サイドメニューバー

右サイドのメニューバーは「投稿」「ブロック」にわかれています。

ブロックタブは、ブロックに関する編集や設定を行い、投稿タブではカテゴリーやタグ、パーマリンクなどの設定を行います。

なお、投稿タブで表示する項目は、ヘッダーメニューバーの「オプション」→「設定」から変更できます。
たとえば、タグを利用しないならタグの項目を非表示にすることが可能です。

投稿タブ

投稿タブ

投稿タブでは、デフォルトで以下の設定が可能です。

  1. ステータスと公開状態(公開・非公開の設定など)
  2. パーマリンク(パーマリンクのスラッグの設定)
  3. カテゴリー
  4. タグ
  5. アイキャッチ画像
  6. 抜粋
  7. ディスカッション(コメントの許可)

カテゴリーやタグ、アイキャッチ画像がよく利用する機能です。
普段使わない機能は、ヘッダーメニューバーの「オプション」→最下部の「設定」から変更ができます。

使わない機能を非表示にして、できるだけシンプルにすると作業効率が上がります。

ブロックタブ

ブロックタブ

ブロックタブは、選択しているブロックによって表示内容が変わります。

たとえば、上記の画像は段落ブロックでテキストを編集するブロックの画面です。
フォントサイズやテキストの色のほか、高度な設定としてHTMLアンカーやCSSクラスの追加などが編集できます。

ブロックは段落ブロックのほかにも「画像ブロック」「見出しブロック」「リストブロック」「引用ブロック」など多岐にわたります。

細かい設定をしないのであれば、ブロックタブはあまり利用しません。

ブロックエディタで記事を公開するまでの流れ

ブロックエディタで記事を公開する方法や、流れについて解説します。

0.下書き保存を忘れずに

下書き保存

ブロックエディタに限らず、ブログやコンテンツの執筆では、下書き保存を忘れないようにしたいものです。
下書き保存していなくて書いた文章がすべて白紙に戻ったら、目も当てられません。

なお、WordPressでは自動保存機能も搭載されており、デフォルトでは60秒間隔で自動保存されます。
ただし、自動保存はリビジョンが増えやすく、Webサイトが重くなりがちという欠点があります。

もし自動保存を無効化したり、保存間隔を変更する場合は、下書き保存を忘れないようにしましょう。

1.記事タイトルを入力

記事タイトルを入力

記事を執筆する際はまず、記事タイトルを入力します。
記事タイトルの文字数は決まっていませんが、SEOでは30~35文字がよいとされています。

2.記事を作成

ここでは、記事の作成手順や流れを紹介します。
ブロックエディタとクラシックエディタの記事の作成手順でことなるのは、段落やブロックの追加だけです。

下書きで保存や公開、アイキャッチ画像、カテゴリーの設定などはどちらも操作は変わりません。

ブロックの操作に慣れれば、ブロックエディタを使いこなせたといってもいいです。
WordPressのブロックには、デフォルトで搭載されているもののほか、テーマで追加されるものもあります。

最初は、いろいろなブロックを積極的に使ってみるとよいでしょう。

段落の追加

段落の追加

段落ブロックは、文章を執筆する基本的なブロックです。

段落ブロックは、キーボードのEnterキーで改行していくだけで追加できます。
Enterキーで改行した場合、HTMLコードは以下になります。

<p>段落ブロックの文章</p>
<p>次の文章</p>

段落ブロックを追加せず、通常の改行を行いたい場合は、Shiftキー+Enterキーを押します。
通常の改行を行った場合、HTMLコードは以下になります。

<p>段落ブロックの文章<br>
次の文章</p>

段落ブロックと通常の改行を使い分けることで可読性が上がり、読みやすい文章になります。

フォントサイズや文字色の変更、そのほかの高度な設定は右サイドのメニューバーで行いましょう。

見出しの作成

見出しの作成には、2種類の方法があります。

  • 段落ブロックにテキストを入れ、あとから見出しブロックに変換する
  • 見出しブロックを挿入し、そこにテキストを入力していく

見出しの作成

まず1つめの方法ですが、段落ブロックにテキストを入力します。
その後、段落ブロック上でクリックしてブロックタイプの変更を選択し、見出しに変更しましょう。

最初から見出しブロックを挿入することも可能です。

ヘッダーメニューバーの「ブロックの挿入」から「見出し」を選択

ヘッダーメニューバーの「ブロックの挿入」から「見出し」を選択してください。
見出しブロックが挿入されますので、見出しの内容を入力しましょう。

リストを挿入

リストを挿入

リストは文章の読みやすさを向上させたり、要素を整理したりするのに役立ちます。

リストの挿入方法は、ブロック挿入ボタンからリストを選択するだけです。

見出しを選択

ほかにも、段落ごとに分かれているテキストをまとめて選択し、ブロックタイプの変更からリストに変えることもできます。

なお、リストは設定で箇条書きを黒丸や数字に変更できます。
インデントも変えられますので、複数のリストの組み合わせも可能です。

画像を挿入

ブロックエディタの画像の挿入には、いくつかの方法があります。

  • 画像ブロックを選択してアップロードする
  • 画像をドラッグ&ドロップでブロックエディタに挿入する

画像ブロックを選択して画像を挿入する方法

画像ブロックを選択して画像を挿入する方法は、ブロックの挿入から「画像」を選ぶだけです。
画像ブロックがすぐに出てこない場合は、検索窓に「画像」と入力してください。

画像をドラッグ&ドロップする方法は、表示させたい画像をフォルダからブロックエディタにドラッグ&ドロップしましょう。

画像は設定で配置やAltテキストを変更できます。
また、画像の直下には「キャプション」が表示されますので、画像のタイトルや引用先などを入力するとよいでしょう。

YouTube・SNSなどの埋め込み

YouTubeやSNS、記事などの埋め込みには2つの方法がありますが、後者の方がかんたんでおすすめです。

  • それぞれの埋め込みブロックをブロックの挿入から選択する
  • YouTubeやSNSのURLを段落ブロックにコピペする

YouTube・SNSなどの埋め込み

ブロック挿入の検索窓に「YouTube」と入力して検索します。
表示されたYouTubeの挿入ブロックをクリックし、URLを入力してください。

しかし、ブロックを挿入しなくても、段落ブロックにYouTubeのURLをコピペするだけで挿入ができます。
YouTubeだけでなく、TwitterやFacebookも同様の操作で埋め込み可能です。

3.投稿設定を行う

投稿設定

記事が書き終わり画像の挿入もできたら、いよいよ記事を公開する準備に入ります。

投稿設定では「カテゴリー」「タグ」「パーマリンク」「アイキャッチ画像」などを設定します。
右サイドのメニューバーが消えているときは、ヘッダーメニューバーの「設定」ボタンをしてください。

右サイドのメニューバーにある投稿タブから、それぞれ設定していきましょう。

4.プレビューで確認

プレビューで確認

ヘッダーメニューバーのプレビューで、記事を投稿して公開する前にどのように見えるか確認しましょう。

プレビューには「デスクトップ」「タブレット」「モバイル」の3パターンがあります。
現在のWordPressのテーマは基本的にレスポンシブデザインなので、どのパターンで見てもある程度デザインが整っているはずです。

それぞれのパターンで文章の読みやすさなどを確認するとよいでしょう。

5.記事を公開

記事を公開

プレビューで確認が終わったら、いよいよ記事を公開します。

「公開状態」では「公開」「非公開」「パスワードで保護」が選べます。
通常は「公開」を選択しましょう。

「公開」では、投稿予定日時を決定できます。
予定投稿したい場合は、ここで日時を選択してください。

最後に「公開」ボタンを押すと記事が公開されます。

ブロックの基本操作

ブロックエディタの基本である、ブロックの操作について解説します。

ブロックエディタが不便だと感じる人の大半は、ブロック操作に慣れていないことが原因です。
ブロック操作に慣れてしまえば、ブロックエディタの使い心地は向上します。

ブロックの基本操作は「追加」「変換」「移動」「複製」「再利用」「削除」です。
とくに、追加や変換、削除がスムーズにできるようになると使い勝手がよくなります。

ブロックを追加

ブロックを追加

ブロックの追加は、ヘッダーメニューバーの「ブロック挿入(+ボタン)」や、段落ブロックの横にある「ブロック追加(+ボタン)」から行えます。

くわえて、段落ブロックならキーボードのEnterキーを押すだけで追加されます。

追加したいブロックが一覧から見つからない場合、検索窓にキーワードを入力することでブロックを検索できます。
ブロックの種類は数十種類にも及ぶため、どこにあったか忘れたときは検索するのがおすすめです。

段落ブロックでスラッシュ(/)を入力するとブロックの選択が表示

また、段落ブロックでスラッシュ(/)を入力するとブロックの選択が表示されます。

ブロックの変換

ブロックの変換

ブロックタイプを変換する場合、表示されているブロック上部左の段落ボタンをクリックすると、変換できるブロックが表示されます。

変換できるブロックは、表示されているブロックによってことなります。
たとえば、段落ブロックからリストブロックに変換して、再度変換しようとすると「段落」「見出し」「引用」「カラム」「グループ」「プルクオート」しか選択肢が表示されません。

それ以外のブロックを選択したい場合は、段落ブロックに戻してから行いましょう。

ブロックの移動

ブロックの移動

ブロックエディタの素晴らしい機能として、ブロックの移動が挙げられます。

縦三点リーダー(︙)が2つ重なっているようなボタンの上にマウスを置くと、カーソルが手のマークになります。
このままドラッグ&ドロップすると、そのブロックを好きな場所に移動できます。

上や下に移動する場合は、矢印の形をしたボタンをクリックします。

ブロックの移動は、推敲(すいこう)や編集のときに非常に便利な機能です。
段落やリスト、引用などブロックを選ばずに移動できるため、記事が完成したあとに手を加えたいときも、かんたんに編集できます。

ブロックの複製

ブロックの複製は、入力した内容や装飾をそのまま利用するときに役立ちます。

ブロックの複製

ブロック上部の「オプション(縦三点リーダー)」ボタンをクリックすると「コピー」「複製」「前に挿入」「後ろに挿入」「移動」などのメニューが出てきます。

「複製」をクリックすると、選択したブロックの真下にブロックが複製されます。

なお「コピー」は、ブロック内容をそのままコピーします。
「前に挿入」「後ろに挿入」はブロックの挿入です。

また「HTMLとして編集」をクリックすると、ブロックをHTMLコードエディタとして使えます。
HTML編集をやめたい場合は、同じく「ビジュアルとして編集」をクリックします。

ブロックの再利用

ブロックの再利用

再利用ブロックとしてブロックを保存すると、ほかの記事でも同じブロックを呼び出すことができます。

ブロック上部右にある「オプション」ボタンをクリックして「再利用ブロックに追加」を選択します。

再利用ブロックを作成

再利用ブロックの作成ウィンドウが出てくるので、名前を入力して保存します。

再利用ブロックを管理

ヘッダーメニューバーのブロック挿入ボタンや、ブロック横の「+ボタン」から再利用可能なブロックを呼び出せます。

なお、再利用可能なブロックは同じ記事内だけでなく、違う記事でも呼び出すことが可能です。

「再利用ブロックを管理」をクリック

再利用可能のブロック削除は、ヘッダーメニューバーの「オプション」ボタンから「再利用ブロックを管理」をクリックしてください。
管理画面が表示されたら削除しましょう。

ブロックの削除

ブロックの削除

ブロックの削除は、ブロック上部の「オプション」ボタンをクリックし、「ブロックの削除」を選択するだけです。

そのほかにも、ショートカットキー「Shift+Alt+Z(Windowsの場合)」「Ctrl+Option+Z(Macの場合)」を同時押しすることで削除できます。

ブロックの削除は、ブロックエディタをシンプルに使うための重要な操作です。 ショートカットキーを同時押しする削除方法は、覚えておくと非常に便利です。

ブロックエディタで便利なブロック

WordPressのブロックエディタには、数十種類のブロックが搭載されています。

そのなかでも、便利なブロックについて3つ紹介します。

  • クラシックブロック
  • ショートコードブロック
  • HTMLブロック

クラシックブロック

WordPressのバージョン5.0からブロックエディタが登場して以降、ブロックエディタとクラシックエディタは常に比較されてきました。
WordPressの公式では、クラシックエディタへ戻すプラグイン「Classic Editor」もあります。

しかし、WordPressでクラシックブロックを知っている人は多くありません。
クラシックブロックでは、クラシックエディタと同じように操作ができ、プラグインも必要ありません。

クラシックブロック

クラシックブロックの挿入方法は、ブロックの追加で「クラシック」と検索して追加するだけです。

ショートコードブロック

ショートコードブロック

ショートコードは、WordPressのさまざまな機能をコンテンツ内で実行できます。

WordPressにデフォルトで搭載されているショートコードのほか、functions.phpで定義することでも使えます。

たとえば、問い合わせフォームが設置できる有名なプラグイン「Contact Form 7」では、以下のようなショートコードで問い合わせフォームを設置します。

エラー: コンタクトフォームが見つかりません。

ショートコードブロックでは、こういったショートコードをコンテンツ内に設置できます。

HTMLブロック

HTMLブロック

ブロックエディタには、HTMLブロックもあります。

HTMLブロックは、直接HTMLを入力して編集することができ、編集したHTMLはプレビューが可能です。

ほかのWebサイトでソースコードが掲載されていた場合などに、コピペで利用できます。

まとめ

WordPressのバージョン5.0から登場したブロックエディタ(Gutenberg)について、解説しました。

ブロックエディタは革新的なエディタで、それまでのブログエディタの概念を覆し、使い勝手を一新させました。

急に新しくなったことによって『使いづらい』『操作がわからない』といった評価も多くありました。
しかし、使い慣れた人が多くなるごとに評価は変わっていきました。

ブロックエディタの基本的な操作や記事作成の流れを覚え、使い慣れることで作業効率がより向上するはずです。

ブロックエディタを使いこなして新しいコンテンツを生み出しましょう。

WordPressに関する記事

まずは無料でご相談ください。

お問い合わせ・ご相談や、公開後の修正依頼などに関しては、いずれかの方法にてお問い合わせください。

※年末年始・土日祝は定休日となります
※受付時間 9:00~17:30

ビズサイで補助金使えます 最大450万円
×