WordPressのブロックエディタ(Gutenberg)の使い方を解説

WordPressのブロックエディタ(Gutenberg)の使い方を解説のアイキャッチ画像

今回は、WordPressのブロックエディタ(Gutenberg)の使い方を解説していきます。

以前はビジュアルエディタやテキストエディタが使われていましたが、WordPressのバージョン5以上からブロックエディタが使えるようになりました。

ビジュアルエディタやテキストエディタに慣れていない人は使いにくいと感じるかもしれませんが、慣れれば問題ないでしょう。

旧エディタはサポート終了予定

ビジュアルエディタやテキストエディタは「Classic Editor」というプラグインをインストールすれば今でも利用可能です。

ただし、「Classic Editor」のサポートは2021年末までの予定となっています。それ以降サポートされるかは、その時に判断が下されるようです。

旧エディタのサポートが終了される可能性があるので、今のうちにブロックエディタに慣れておいた方が良いでしょう。

ブロックエディタ の特徴

ブロックエディタには、編集画面と実際にWEB上で表示される見た目が近いという特徴があります。

また、ブロックを操作するとこで、レイアウトや並び替えを行うのが従来のエディタよりも楽になりました。

以前よりも直感的に操作ができるのがブロックエディタ の特徴です。

ブロックエディタ(Gutenberg)の使い方

それではブロックエディタの使い方を説明していきます。

段落の挿入

まずは、普通のテキストを入力する方法です。

段落はエディタに文字を打っていけば、自動で段落になります。

HTMLで言えばp要素として表示されます。

左上のアイコンをクリックすると、別のブロックに変換することができます。

よく使う物であれば、「見出し」や「リスト」でしょう。

見出し

上記のように左上のアイコンをクリックして、「見出し」を選択すると見出しに変換することができます。

H2〜H4は表示されますが、H5やH6を使う場合は右サイドーから選択します。

リスト

左上のアイコンをクリックして「リスト」を選択すると、リストに変換されます。

リストというのはいわゆる箇条書きのことです。

数字付きの箇条書きにしたい時は、下の画像の赤枠のボタンをクリックします。

これで数字付きのリストに変換されました。

テーブル(表)の挿入

ブロックエディタで便利なのが、テーブル(表)の挿入です。

ブロックにカーソルを当てると左に「+」のアイコンが出てくるので、これをクリックします。

「+」のアイコンをクリックするとメニューが出てくるので、「フォーマット」にある「テーブル」をクリックします。

そうすると、列と行の数を指定してください。列と行の数は後から追加・削除できます。

これでテーブルのブロックが生成されます。

上の画像の赤枠のアイコンをクリックすると、行や列を追加・削除することができます。

これで表の行・列の数を操作できます。

左上のアイコンをクリックすると、テーブルのデザインを変更することもできます。

これでストライプの表に変換されます。

ブロックの削除

ブロックを削除したい場合、以下の手順で削除します。

まず右上のアイコンをクリックします。

クリックするとメニューが出てくるので、「ブロックを削除」をクリックしてください。

ボタンリンク

ボタンの形をしたリンクを挿入することもできます。

「+」アイコンをクリックして、「レイアウト要素」の「ボタン」を選択してください。

「ボタン」をクリックすると、

ボタンのテキストとURLを入力できるようになります。

例えば、以下のように入力します。

ボタンの色と文字の色を変更することもできます。

色の設定は、右サイドバーにあります。

色を変更すると、以下のようになります。

ブロックの順番を変える

ブロックエディタの便利な機能の1つが、順番を簡単に変えられるところです。

ブロックの左に上下のボタンが表示されるので、並び替えたい方向をクリックします。

これで簡単に順番を並び替えることができました。

コンテンツの順番を変えることは頻繁にあるので、便利な機能です。

記事のまとめ

ここに挙げたのは一部の機能だけで、ブロックエディタにはまだいろいろな機能が実装されています。

最初は使い勝手が悪いと思いましたが、慣れれば便利でしょう。

この記事を参考に、ブロックエディタを使ってみてください。