WordPress特集 - ブロックの追加・選択・削除

ブロックエディターでコンテンツを作成する基本は、ブロックを必要な数だけ追加していくことです。Gutenberg ではできるだけスムーズにブロックが追加できるように、機能を絶えず改良しています。

【記事執筆時の環境】
WordPress 5.8

【参考ページ】
サポート - 新規ブロックの追加

ブロックの追加

ブロックインサーターからの追加

上部ツールバーのブロック追加ボタンをクリックするとブロックインサーターが表示されます。
インサーターに一覧表示されているブロックをクリックすると、コンテンツエリアで選択しているブロックの後ろにクリックしたブロックが追加されます。ブロックを何も選択していないときは一番後ろに追加されます。

またインサーターからマウスでドラッグ&ドロップすると、任意の場所にブロックを追加することができます。インサーターを表示したまま連続して複数のブロックをドラッグ&ドロップすることもできます。

ブロック右の追加ボタンによる追加

空の段落ブロックや見出しブロックの後ろに何もブロックがないときなどは、ブロック追加ボタンが右に表示されます。

ブロック右の追加ボタン

このボタンをクリックすると、よく使用されるブロックが並んだパネルがポップアップで表示されますので、その中のブロックをクリックして追加できます。
パネル内に希望するブロックがないときは、[すべて表示] をクリックするとブロックインサーターが表示されます。

よく使われるブロックパネル

ブロック間の追加ボタンによる追加

ブロック間にマウスポインターをもっていくと、ブロック追加ボタンが表示されますので、クリックすることによりブロック間にさらにブロックを挿入できます。

ブロック間の追加ボタン

ブロックツールバーのオプションボタンによる追加

ブロックツールバーのオプションボタンをクリックして表示されるメニューから、[前に挿入] もしくは [後に挿入] を選択します。空の段落ブロックが前もしくは後に挿入されます。

ブロックツールバーのオプションメニュー

空の段落ブロックからのブロック検索

空の段落ブロックで、スラッシュ'/' の後にブロックの名前を示すテキストを入力すると候補が表示されます。テキストは英単語でも日本語でも構いません。表示された候補をクリックするか矢印キーで選択してEnterを押すことで追加できます。
候補を絞り込むには入力する文字数を多くします。

空の段落ブロックからのブロック検索

ブロックの選択

クリックして選択

基本的な操作としては、コンテンツエリアで文章や画像などのコンテンツ部分をクリックすると、そのブロックが選択されます。

矢印キーによる選択

矢印キーを押すことによって、隣のブロックへ移動することができます。

アウトラインボタンによる選択

上部ツールバーのアウトラインボタンをクリックして選択することもできます。アウトラインボタンをクリックすると追加されているブロックがリスト表示されます。複雑な階層構造をもつブロックの選択には、この方法が便利です。

以前はブロックリストはポップアップで表示され、ブロックを選択すると消えましたが、WordPress 5.8 ではリストは閉じるまで固定表示となりました。

ブロックナビゲーションによる選択

画面の一番下に表示されているブロックナビゲーションをクリックして、選択することができます。階層途中のブロックを選択するときなどに便利です。

親ブロックの選択

階層構造になっているブロックは、ブロックツールバーの左に親ブロックを選択するボタンが表示されます。そのボタンをクリックすると親ブロックに移動します。

親ブロックの選択

複数ブロックの選択

Shiftキーを押しながらブロックをクリックすることで、複数のブロックを同時に選択できます。同じ種類のブロックなら、複数選択して一括で設定を適用できます。

ブロックの削除

Delete/Back Spaceキーによる削除

ブロック全体を選択して Deleteキー もしくは Back Spaceキー を押します。

※ブロックを編集しているときには、Escキーを押すとブロック全体の選択になります。

ブロックツールバーのオプションメニューから削除

ブロックツールバーのオプションボタンをクリックし、メニューから [ブロックを削除] を選択します。

ショートカットキーによる削除

Shift + Alt + Z で削除できます。ショートカットキーは編集モードでも削除できます。

«次の特集記事»
«前の特集記事»

スポンサーリンク

WordPress 特集記事

WordPressの概要

WordPressの仕組み

WordPressのカスタマイズ性

制作環境とインストール

基本設定項目

追加設定項目

Gutenbergエディター

具体的な制作作業

応用・高度機能

実践的なTips

よく使われるテーマ紹介

有用なプラグイン紹介

独自テーマによる制作

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ