ブロックエディタ(Gutenberg)のブロックの操作の基本・ブロックの移動とコピー

ブロックエディタ内で、ブロックの移動やコピーをする方法の説明です。

これは、基本的にどんなブロックでも使えます。

ブロックの操作ツール

まず、ブロックの操作ツールの場所を覚えましょう。

エディタ―上部のツールバーから、三本線のアイコンをクリックし、右側にブロックのリストを表示させてください。

次に移動やコピーをしたいブロックを選択します。そのブロックの所にマウスをあててクリックしてください。

選択したブロックの上に、ツールバーが表示されます。

左側のリストでは、選択済のブロックの行は、塗りつぶしの行になります。

編集しているブロックの数が増えると、ブロックのリスト内も行が増えます。選択中の行に色がつくので、それを目印にしてください。

上の図では、青い点線枠内のブロックを選んでいます。左のリストでは、矢印のついている青い行が、選択したブロックです。

選択中のブロックの上にあるツールバーの右端に、３つの点のアイコンがあります、これをクリックします。（赤枠）

これをクリックすると、図のようにブロックツールバーのその他のメニューが表示されます。

同じように、左側のリストのところで、ブロックの右端にある３つの点のアイコンがあります。（赤枠）

ここをクリックしても、同じ操作ツールが表示されます。

どちらも同じように使えます。

ここでよく使うメニューを紹介します。

ブロックの削除

一番下の行に「段落を削除」という選択肢があります。これは、このブロックをまるごと削除する時に使います。

段落ではないブロックの場合も、同じ位置に選択中のブロック削除の項目が表示されます。

ブロックのコピー

「コピー」をクリックすると、選択したブロックの情報がクリップボードにコピーされます。

コピー＆ペーストをしたい場合は、貼り付けたい位置に移動してペーストすると、ブロックの内容が設定と共に貼り付けされます。

クリップボード内に入っていれば、異なるページの投稿・編集画面にも貼り付けができます。

ただし、クリップボード上で表示されるのはコードです。複数のブロックをクリップボードに置いた場合、見分けがつきにくいので注意してください。

ブロックの複製

コピーと似ているのですが、このボタンを押すと、今あるブロックの真下に同じブロックが複製されます。

あとで紹介する、ブロックの移動ツールと一緒に使うと便利です。

上の図の状態からブロックを複製すると、

選択していたブロックの真下に、全く同じブロックが複製されました。

ブロックを選択するカーソルは新しく複製されたブロックを選択している状態に変更されます。

新しいブロックの追加

選択しているブロックの前か後に新しいブロックを追加したい時は、このツールでも操作可能です。

「前に挿入」「後に挿入」をクリックすると、前後に新しく任意のブロックを追加できます。

ブロックの移動

移動方法その１：使いにくいかも？

このツールに「移動」という項目があります。これは、ブロックを移動するためのツールです。

これを使うと、選択しているブロックの上に棒線が表示されます。

この状態でマウスのカーソルを、動かしたい箇所（ブロック）に動かしてクリックすると、移動先となる位置に棒線が表示されます。

その位置を確認しEnterキーを押すと、ブロックがそこに移動します。

ドラッグ＆ドロップではないので注意してください。

正直言ってちょっと使いにくい気がします。

ということで、この機能は無視して、今回は別の方法を紹介します。

移動方法その２：こちらが便利

ブロックのツールバーの左から３番目に、上下の方向ボタンがあります。

これをクリックすると、選択したブロックが、前後のブロックをひとつづつ飛び越えて上下に動きます。

上方向に１回クリックすると、直前のブロックの前に、下方向に１回クリックすると、直後のブロックの後ろに移動します。

このブロックをボタンの下まで動かしてみます。

ボタンの下に、「このページを見てね」という段落ブロックがあるので、飛び越えるブロックは、段落とボタンの２ブロックです。

下方向を２回クリックします。

方向ボタンは上と下で分かれているので、下に行きたい時は下の方向部分をクリックしてください。

２回クリックして移動したところです。

これを使うと、ブロックが動くところが見えて操作が分かりやすいので、近くへ移動する場合や、複製したブロックを動かす時に便利です。

移動方法その３：リスト内で移動

編集部分だけでなく、リストの部分でブロックを移動することもできます。

その場合は、選択して青くなっている行をドラッグ＆ドロップで、目的の場所まで動かします。

リスト内の選択しているブロックを、下にあるロケットの画像の下まで動かします。

リストで位置を確認すると、ロケットの画像は、画像ブロックです。

ドラッグ＆ドロップで選択中のブロックを動かします。

リスト内で変更すると、編集画面のブロックも移動しました。

これが基本的な編集画面内でのブロックの操作方法です。

よく使う操作なので、実際に作業をしながら覚えると良いと思います。

操作方法が複数ある場合は、試してみて使いやすい方法で慣れていけば良いと思います。