Gutenberg

WordPress「Gutenberg」の便利な使い方

投稿日:

WordPress5.0からエディターが「Gutenberg」になり、ブロックを組み合わせて直観的な操作で投稿を作成できるようになりました。

とは言え、以前からWordPressを使っている人には、「返って使いにくくなった」と戸惑っている人が多いのではないでしょうか。

私もそう思って、プラグインをインストールし以前のエディターを使い続けていましたが、「Gutenberg」をある程度いじってみると、便利な機能がたくさんあることが分かってきて、「慣れれば以前よりも使いやすいのでは?」と思うようになりました。

そこで、ここではコンテンツの作成が楽にできる、「Gutenberg」の便利な使い方について説明します。

「Gutenberg」の便利な使い方

それでは、以下に「Gutenberg」の便利な使い方について説明します。

ブロックをドラッグ・アンド・ドロップで移動する

まず、「Gutenberg」の便利な使い方の1つ目は「ドラッグ・アンド・ドロップでブロックを移動する」ことです。

「Gutenberg」は、それぞれのブロックをドラッグ・アンド・ドロップして、位置を自由に移動することができるようになっています。

切り取りやペーストといった操作をせずに、見出しや段落などのブロックが移動できるので、編集作業が簡単になります。

ドラッグ・アンド・ドロップでブロックを移動する方法は、以下のとおりです。

ブロックを移動する方法

  1. 移動したいブロックの左上にカーソルを当てる
  2. 「:::」というマークが表示され、マウスポインターが手のひらの形になったら、その部分をクリックし、ドラッグして移動したい場所でドロップする

まず、ブロックの左側にカーソルを当てると、以下画像のようなマークが表示されます。

Gutenbergのブロックをドラッグアンドドロップで移動するためのアイコン

そのマークの真ん中にある「:::」という部分をクリックして、そのままドラッグ・アンド・ドロップすると、好きな場所にブロックを移動することが可能です。

ちなみに、「:::」の上下にある「∧」「∨」アイコンをクリックすると、ブロックの位置を「ひとつ上」「ひとつ下」に移動することができます。

もし、ブロックの左側にカーソルを当てても、上の画像のようなマークが表示されない時には、エディターの右上にある「ツールと設定をさらに表示」(縦3点リーダーのアイコン)をクリックして、「スポットライトモード」のチェックを外すと表示されるようになります。

Gutenbergのスポットライトモードを解除した時の画面表示

この方法で、見出しや段落などの順序や位置を変えたい時には、ドラッグ・アンド・ドロップやアイコンをクリックするだけで、ブロックを移動して簡単に位置を変えることができるようになります。

画像ブロックをドラッグ・アンド・ドロップで追加する

次に、「Gutenberg」の便利な使い方の2つ目は「ドラッグ・アンド・ドロップで画像ブロックを追加する」ことです。

「Gutenberg」のエディターは、直接その中に画像をドラッグ・アンド・ドロップして画像ブロックを追加することができます。

つまり、画像をドラッグ・アンド・ドロップするだけで、画像のアップロードとコンテンツへの画像の挿入ができるようになっています。

画像をドラッグ・アンド・ドロップでアップロード・コンテンツに挿入する方法は以下のとおりです。

画像をドラッグ・アンド・ドロップでアップロード・挿入する手順

  1. 使いたい画像を選択して、エディターの上にドラッグする
  2. 画像を挿入したい場所までドラッグし、ブルーのラインが表示された位置でドロップする

具体的には、画像をエディターの上にドラッグしてブロックとブロックの間に持ってくると、以下の画像のように、ブルーのラインが表示されます。

Gutenbergに画像をドラッグアンドドロップして挿入する時の画面

そのラインが表示されているところでドロップすると、画像をその位置に置くことができます。

そうすると、以前のクラシックエディターと比べて、簡単な操作・短時間で画像をアップロードして記事の中に挿入することが可能です。

 

「再利用ブロック」を利用する

次に、「Gutenberg」の便利な使い方の3つ目は「再利用ブロックを使う」ことです。

「Gutenberg」は、よく使うブロックを「再利用ブロック」に追加して保存しておき、それを再利用ことができます。

つまり、ブロックを保存しておき、後でまた使いたい時に呼び出して使うことができるので、定型文のように何度も使う文章がある時などに役立ちます。

まず、再利用ブロックの追加方法は以下のとおりです。

再利用ブロックの追加手順

  1. 再利用ブロックに追加したいブロックを選択して、エディターの右上に表示されている「詳細設定」(縦3点リーダーのアイコン)をクリックする
  2. 表示されたメニューの中にある「再利用ブロックに追加」をクリック
  3. 再利用ブロックの名前を入力して「保存」をクリックする

詳しく説明すると、以下の画像のように、「詳細設定」をクリックすると「再利用ブロックに追加」というメニューが表示されます。

Gutenbergでブロックを再利用ブロックに追加する時の操作画面

「再利用ブロックに追加」をクリックすると、再利用ブロックの名前を入力できるようになるので、任意の名前を入力したら、右側の「保存」をクリックします。

Gutenbergで再利用ブロックの名前を編集する時の画面

ここまでの操作で、再利用ブロックの追加が完了です。

ちなみに、再利用ブロックに追加したブロックは、「再利用ブロック」というタイプのブロックになっているので、そのままの状態で編集すると、再利用ブロックの内容を上書きすることになります。

Gutenberg再利用ブロックの画面

これを元のブロックに戻して編集したい時には、「詳細設定」(エディター左上にある縦3点リーダーのマークをしたアイコン)をクリックして「通常のブロックに変換」を選択します。そうすると、通常のブロックに戻るので、コンテンツの一部として編集ができるようになります。

そして、次に再利用ブロックとして追加したブロックを、後で再利用する時の操作手順は以下のとおりです。

ブロックを再利用する時の操作手順

  1. ブロックを追加したい位置で「ブロックの追加」をクリックする
  2. ①の操作で表示されたウィンドウを下までスクロールし「再利用可能」を選択
  3. 使いたい再利用ブロックの名前をクリックする
  4. 「再利用ブロック」がエディターに表示される
  5. そのブロックを選択し「詳細設定」をクリック
  6. 「通常のブロックに変換」をクリックして、元のブロックタイプに変換する

上記①~⑥の操作の流れを具体的に説明すると、まず「ブロックの追加」をクリックすると、以下の画像のようなウィンドウが表示されます。

Gutenberg再利用可能なブロックを選択する時の画面

そうしたら、その中の「再利用可能」をクリックし、使用したい再利用ブロックの名前をクリックします。

そうすると、再利用ブロックがエディターの中に表示されますが、再利用ブロックのままだと、コンテンツとして中身の編集ができないので、内容の編集が必要な時には、通常のブロックに変換する必要があります。

通常のブロックに変換するには、上述した方法と同じように、「詳細設定」をクリックし「通常のブロックへ変換」をクリックすればOKです。

Gutenbergで再利用ブロックを通常のブロックに変換する時の画面操作

再利用ブロックとして保存した時のブロックに変換されて、内容を編集することが可能になります。

 

まとめ

以上、「Gutenberg」の便利な使い方について説明しました。

「Gutenberg」は慣れないと使いづらいですが、以前のエディターと比べて使いやすく便利になった点も多いです。

特に、上記の「ブロックをドラッグ・アンド・ドロップで移動する」「画像ブロックをドラッグ・アンド・ドロップで挿入する」「再利用ブロックに追加する」といった機能を活用すると、コンテンツの作成や編集作業が簡単になります。

今まではプラグインを使わないとできなかったことや、何クリックかの作業が必要だったことが、簡単な操作だけでできるようになっているので、一通り慣れてしまえば、クラシックエディターよりも使い勝手は良いです。

「Gutenberg」が使いづらいと感じている人は、上記のような操作を試してみながら、徐々に操作に慣れていくと良いと思います。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.