Gutenbergの基本操作とブロック編集方法【初心者向け/WordPressの使い方】

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS「WordPress」の使い方を、何回かに分けてお伝えいたします。

今回は「Gutenberg(グーテンベルグ)」というWordPressのエディターの基本操作とブロックの編集方法を解説します。

WordPressエディタの仕組み

執筆の前に、投稿に使用するエディタについて解説しましょう。

WordPressで投稿の編集に使用されているエディタは「Gutenberg(グーテンベルグ)」というものです。2018年12月7日のWordPress バージョン5.0から導入されています。

ブロック型エディタのイメージ

ブロック型テキストエディタといわれ、文章や画像、テキストを「ブロック」という形にして配置します。

ウェブ関連の知識がなくても、ほぼ見た目通りにレイアウトの編集ができます。

まずは基本となる、ブロックの作成と文章の記入方法を説明いたします。

ブロックの作成方法

Enterで新しいブロックを作成します。

Enterで新規ブロックを作成

改行はShift+Enterです。必ずShiftを押しながらEnterを押してください

ブロック内を改行する(Shift+Enter)

空白ブロックで余白を開けるのはNG!

ここで少し余談です。

間にいくつか空白ブロックを空けたエディタ画面
エディタ画面

余白を開けようと、このように空白の新規ブロックを作りがちですが、よくありません

エディタ上では、余白ができているように見えますよね。

実際のページ(プレビュー)
実際のページ(プレビュー)

しかし残念ながら、この空白のブロックは実際のウェブ上では見えていません

実は、ページの裏側(ソースコード)では、この空白の段落は出力されてはいます。

空白ブロックのソースコード
<p></p>が空白ブロックの部分

ですが、WordPressのテーマによってはうまく表示されないため、おすすめできません。

余白を追加する方法は、こちらで説明しています。

任意の場所にブロックを追加する

追加したい場所にマウスポインタを置くと、プラスボタン(ブロックの追加)が表示されるのでクリックします。
「ブロックを追加」ボタン
文字の入力は「段落」ブロックです。「段落」を選択しましょう。
「段落」ブロックを選択する
追加できました。
「段落」ブロック追加完了
ブロックを任意の場所に追加(アニメーション)
ブロック追加方法
「前に挿入」と「後に挿入」

選択しているブロックのすぐ前や後に追加する方法もあります。

「︙」(オプション)をクリックし、「前に挿入」もしくは「後に挿入」を選択しましょう。

「前に挿入」と「後に挿入」メニューにあるショートカットキーを使えば、素早く追加できます。

半角スラッシュを入力して追加する

空白のブロックに半角スラッシュを入力すると、ブロックの追加メニューが表示されます。

半角スラッシュを入力してブロックを追加(アニメーション)
  1. 空白ブロックに、半角スラッシュをご入力ください。
  2. ブロックの追加メニューが現れました。
  3. 選択します。
    半角スラッシュを入力してブロックメニューを表示
  4. ブロックが追加されます。

この方法ですと、メニューには最近使ったブロックの一部しか表示されません
そのため、「段落」ブロックや他の挿入したいブロックが、メニューにない場合があります。

元に戻す/やり直し

作業の上でよく使う「元に戻す」「やり直し」は、画面左上にある矢印のアイコンからできます。

「元に戻す」と「やり直し」ボタン
左矢印が「元に戻す」、右矢印が「やり直し」です

ショートカットキーでも可能です。

操作WindowsMac
元に戻す「Ctrl」+「Z」「⌘command」+「Z」
やり直し「Shift」+「Ctrl」+「Z」「⌘command」+「Shift」+「Z」
ショートカットキー一覧

ブロックのコピーと複製

コピーの方法

コピーしたいブロックを選択します。
ブロックの選択
「︙」(オプション)をクリックします。
「コピー」をクリックします。
オプションメニュー→「コピー」ボタン
右下に「段落をクリップボードにコピーしました」と表示されます。
ブロックコピー直後にアラート表示
貼りたいところにペーストします。
ブロックを貼り付け
コピーできました
ブロックのコピー&ペースト完了
ブロックのコピー方法(アニメーション)
ブロックのコピー方法

複製方法

「複製」ボタンの場所

複製」は「︙」(オプション)メニュー内の「コピー」の下にあります。

クリックすると、選択したブロックの下に複製されます。

ブロックの複製方法(アニメーション)
ブロックの複製方法

こちらもショートカットキーが使えます。

操作WindowsMac
コピー「Ctrl」+「C」「⌘command」+「C」
貼り付け「Ctrl」+「V」「⌘command」+「V」
複製「Ctrl」+「Shift」+「D」「⌘command」+「Shift」+「D」
ショートカットキー一覧

ブロックの移動方法

ブロックの移動には、3つの方法があります。

ドラッグで自由に移動

ドラッグでブロックを移動する
ドラッグボタン

ブロックメニューの左から二番目にある点が6つのアイコン「ドラッグ」で、好きな場所に移動できます。

ブロック一つ分移動

ブロック一つ分ずつ移動する
上下にブロックを移動するボタン

ブロックメニューの上下アイコンのクリックで、一つ分のブロック移動ができます。

オプションメニューから移動する

ブロックが多いときに便利な移動方法です。

移動するブロックを選択します。
移動するブロックを選択
「︙」(オプション)をクリックします。
「移動」を選択します。
ブロックツールから「移動」を選択
移動したいところに近いブロックをクリックします。細長い棒の位置が移動先です。
移動先に近いブロックを選択
エンターキーを押します。
移動先の選択後にEnterキーを押す
移動しました。
ブロックの移動完了
「︙」(オプション)メニューの「移動」ボタンでブロックを移動する方法(アニメーション)
オプションメニューから移動する方法

誤って同じブロックを2回押すと、移動先の選択が無効化されます。操作ミスにはご注意ください。

ブロックの削除

削除したいブロックを選択します。
削除するブロックを選択
「︙」(オプション)をクリックします。
一番下の「ブロックを削除」をクリックします。
ブロックオプションメニューからブロックを削除する
削除できました。
ブロック削除完了
ブロックの削除方法(アニメーション)
ブロックの削除方法

ショートカットキー

「ブロックを削除」の横に表記されています。

「ブロックを削除」ショートカットキーの表記
Windows

「Shift」+「Alt」+「Z」

Mac

「^Control」+「⌥option」+「Z」

「︙」(オプション)を開くのが面倒なら、覚えておくと良いでしょう。
ブロックを選択した状態で、Windowsなら「del」か「backspace」キー、Macなら「Delete」キーで削除する方法もあります。

複数削除

複数のブロックを削除する方法

削除するブロックをすべて選択します。

Windowsなら「del」か「backspace」キー、Macなら「Delete」キーで削除します。


以上、ブロックツールの基本的な編集方法を解説しました。

どのブロックでも同じ操作が可能です。自由に編集するために慣れていきましょう。

WordPressの設定や導入している拡張機能、テーマやバージョンによっては、画面が記事と違う場合がありますが、基本的には同じ操作となるはずです。不明な部分がありましたら、お気軽にお申し付けください。

次は、テキストの装飾や編集方法をご紹介いたします。

受付時間 平日10:00~17:00(土日祝除く)

東京オフィス
香川オフィス
関連の事業・サービスの詳細はこちら!
WordPressのログイン画面と投稿管理画面
WordPressの使い方 シリーズ
火燵でも利用しているCMS「WordPress」の使い方です。