第4回WordPress5.0 Gutenberg 段落ブロックの追加・編集・削除

こんにちは、ながまさです。
前回まではWordPress5.0 Gutenbergの画面構成を見てきましたので、今回からは実践編として、各ブロックの追加・編集・削除の方法を見ていきたいと思います。
その前に、WordPress5.0 Gutenbergは今までのエディターと大きく変わります。
自動投稿ツールを使っている方およびテーマによっては、対応していない場合があります。
なので、バージョンアップする前に、必ず各サポートフォーラムなので対応状況を確認の上バージョンアップしてください。

段落ブロックの追加・編集・削除

段落ブロックの追加

Gutenbergでの最初の段落ブロック追加は、テキストを入力すれば自動的に作成されます。
ですから、深く考える必要はありません。
では、2つ目の段落ブロックはどうすればよいのでしょうか。

第1回でご紹介しましたが復讐のためにもう一度ご紹介します。
が、これも難しいことではありません。
改行は Shift + Enter です。
段落は Enter です。
もうお分かりですよね。新しい段落ブロックは Enter で追加できます。

段落ブロックの構造

それでは、段落ブロックってどのようになっているのでしょうか。ソースコードを見てみたいと思います。ソースコードは「コードエディター」で見ることができます。

サンプル 段落ブロック1

サンプル 段落ブロック2

<!-- wp:paragraph -->
<p>サンプル 段落ブロック1</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプル 段落ブロック2</p>
<!-- /wp:paragraph -->

段落ブロックは以上のような構成になっています。

段落ブロックを上下に移動する

段落に限りませんが、ブロックは上下に簡単に移動することができます。
それでは、以下のブロックを入れ替えてみましょう。
どのようにするかと言うと

サンプル 段落ブロック2

サンプル 段落ブロック1

マウスを左に移動すると、矢印が現れます。
移動したい矢印をクリックすると移動することができます。

段落ブロックを上に追加する

段落ブロックを、上に追加したい場合ですが、Enter以外にも方法があります。

真ん中上あたりにマウスを持っていくと「+」が現れます。
それをクリックすると、上に新しい段落ブロックが現れます。
Gutenbergって、どらえもんみたいですよね。

段落ブロックの編集

基本的な段落ブロックの編集

ブログのデザインはテーマによって大きく変わっってきます。
もちろん、操作方法も変わってきます。
なので、ここではGutenbergに用意されているものをご紹介します。
とはいっても、旧sディタ―と変わらないので説明する必要はないかと思いますが。

段落ブロックにテキストを入力すると、以下のような編集メニューが上部に現れます。

編集メニュー

この編集メニューを使って編集します。
この編集メニューは、ブロックごとに現れます。
即ち、個々のブロックで編集できます。
編集メニューが少ないので、これではあまり意味がないかもしれませんが・・・。
一応、こんなこともできるんだ程度に覚えておいてください 。

段落ブロックの削除

段落ブロックの削除方法

段落ブロックの削除はとても簡単です。
以下の画像を見ていただければわかると思います。

行を広く開けたい時スペーサーブロック

Gutenbengでの段落ブロック間の行間は1行分しかありません。
どうやっても1行以上あくことができません。
ではどのようにするか。
「+」のブロック追加 → レイアウト要素 → スペーサー
で選択できます。

スペーサーとは、間に挟んで空間を作るという意味があります。
なるほどなと思いました。

前の段落ブロックとの間にスペーサーブロックを入れてみました。
これで問題解決ですね。

まとめ

Gutenbeng は、まるでどらえもんみたいだなとつくづく感じてしまいました。
真っ白な画面が、テキストを入力することで、次から次とアイテムが現れてきます。
メインブログでは無理かもしれませんが、テスト用に一つ Gutenberg に変えてみてはいかがでしょうか。実際使ってみるとはまってしまうかもしれませんよ。
て、自分のことか~~。

次回は、見出しブロックの操作についてを予定しています。

では、次回をお楽しみに。

最新情報をチェックしよう!