みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS「WordPress」の使い方を、何回かに分けてお伝えいたします。
今回は「Gutenberg(グーテンベルグ)」というWordPressのエディターの基本操作とブロックの編集方法を解説します。
WordPressエディタの仕組み
執筆の前に、投稿に使用するエディタについて解説しましょう。
WordPressで投稿の編集に使用されているエディタは「Gutenberg(グーテンベルグ)」というものです。2018年12月7日のWordPress バージョン5.0から導入されています。
![ブロック型エディタのイメージ](https://kotatsu.info/blog/wp-content/uploads/2021/07/gutenberg-block-images.png)
ブロック型テキストエディタといわれ、文章や画像、テキストを「ブロック」という形にして配置します。
ウェブ関連の知識がなくても、ほぼ見た目通りにレイアウトの編集ができます。
まずは基本となる、ブロックの作成と文章の記入方法を説明いたします。
ブロックの作成方法
Enterで新しいブロックを作成します。
![Enterで新規ブロックを作成](https://kotatsu.info/blog/wp-content/uploads/2021/07/image40.gif)
改行はShift+Enterです。必ずShiftを押しながらEnterを押してください。
![ブロック内を改行する(Shift+Enter)](https://kotatsu.info/blog/wp-content/uploads/2021/07/shift-enter-1024x556.gif)
空白ブロックで余白を開けるのはNG!
ここで少し余談です。
![間にいくつか空白ブロックを空けたエディタ画面](https://kotatsu.info/blog/wp-content/uploads/2021/07/blank-blocks.png)
余白を開けようと、このように空白の新規ブロックを作りがちですが、よくありません。
エディタ上では、余白ができているように見えますよね。
![実際のページ(プレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/07/blank-blocks-preview-1024x637.png)
しかし残念ながら、この空白のブロックは実際のウェブ上では見えていません。
実は、ページの裏側(ソースコード)では、この空白の段落は出力されてはいます。
![空白ブロックのソースコード](https://kotatsu.info/blog/wp-content/uploads/2021/07/source-code.png)
ですが、WordPressのテーマによってはうまく表示されないため、おすすめできません。
余白を追加する方法は、こちらで説明しています。
任意の場所にブロックを追加する
![「ブロックを追加」ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/block-add-btn-1024x538.png)
![「段落」ブロックを選択する](https://kotatsu.info/blog/wp-content/uploads/2021/07/block-add-paragraph-1024x813.png)
![「段落」ブロック追加完了](https://kotatsu.info/blog/wp-content/uploads/2021/07/block-add-paragraph-after-1.png)
![ブロックを任意の場所に追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/hIH8v6UxRH-min.gif)
![「前に挿入」と「後に挿入」](https://kotatsu.info/blog/wp-content/uploads/2021/07/block-add-front-or-back.png)
選択しているブロックのすぐ前や後に追加する方法もあります。
「︙」(オプション)をクリックし、「前に挿入」もしくは「後に挿入」を選択しましょう。
「前に挿入」と「後に挿入」メニューにあるショートカットキーを使えば、素早く追加できます。
半角スラッシュを入力して追加する
空白のブロックに半角スラッシュを入力すると、ブロックの追加メニューが表示されます。
![半角スラッシュを入力してブロックを追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/estKDfiYPr-min.gif)
- 空白ブロックに、半角スラッシュをご入力ください。
- ブロックの追加メニューが現れました。
- 選択します。
- ブロックが追加されます。
この方法ですと、メニューには最近使ったブロックの一部しか表示されません。
そのため、「段落」ブロックや他の挿入したいブロックが、メニューにない場合があります。
元に戻す/やり直し
作業の上でよく使う「元に戻す」「やり直し」は、画面左上にある矢印のアイコンからできます。
![「元に戻す」と「やり直し」ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/reversion-redoing.png)
ショートカットキーでも可能です。
操作 | Windows | Mac |
---|---|---|
元に戻す | 「Ctrl」+「Z」 | 「⌘command」+「Z」 |
やり直し | 「Shift」+「Ctrl」+「Z」 | 「⌘command」+「Shift」+「Z」 |
ブロックのコピーと複製
コピーの方法
![ブロックの選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/copy-block-select.png)
![オプションメニュー→「コピー」ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-option-copy-btn.png)
![ブロックコピー直後にアラート表示](https://kotatsu.info/blog/wp-content/uploads/2021/09/copy-block-alert.png)
![ブロックを貼り付け](https://kotatsu.info/blog/wp-content/uploads/2021/09/copy-block-paste.png)
![ブロックのコピー&ペースト完了](https://kotatsu.info/blog/wp-content/uploads/2021/09/copy-block-finish.png)
![ブロックのコピー方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/07/image6.gif)
複製方法
![「複製」ボタンの場所](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-option-replication-btn.png)
「複製」は「︙」(オプション)メニュー内の「コピー」の下にあります。
クリックすると、選択したブロックの下に複製されます。
![ブロックの複製方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/07/image23.gif)
こちらもショートカットキーが使えます。
操作 | Windows | Mac |
---|---|---|
コピー | 「Ctrl」+「C」 | 「⌘command」+「C」 |
貼り付け | 「Ctrl」+「V」 | 「⌘command」+「V」 |
複製 | 「Ctrl」+「Shift」+「D」 | 「⌘command」+「Shift」+「D」 |
ブロックの移動方法
ブロックの移動には、3つの方法があります。
ドラッグで自由に移動
![ドラッグでブロックを移動する](https://kotatsu.info/blog/wp-content/uploads/2021/07/image51-1024x784.gif)
![ドラッグボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-btn-drag.png)
ブロックメニューの左から二番目にある点が6つのアイコン「ドラッグ」で、好きな場所に移動できます。
ブロック一つ分移動
![ブロック一つ分ずつ移動する](https://kotatsu.info/blog/wp-content/uploads/2021/07/image61-1024x590.gif)
![上下にブロックを移動するボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-btn-move.png)
ブロックメニューの上下アイコンのクリックで、一つ分のブロック移動ができます。
オプションメニューから移動する
ブロックが多いときに便利な移動方法です。
![移動するブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/move-block-select.png)
![ブロックツールから「移動」を選択](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-option-move.png)
![移動先に近いブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/move-block-tool-select.png)
![移動先の選択後にEnterキーを押す](https://kotatsu.info/blog/wp-content/uploads/2021/09/move-block-destination.png)
![ブロックの移動完了](https://kotatsu.info/blog/wp-content/uploads/2021/09/move-block-finish.png)
![「︙」(オプション)メニューの「移動」ボタンでブロックを移動する方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/07/image19.gif)
誤って同じブロックを2回押すと、移動先の選択が無効化されます。操作ミスにはご注意ください。
ブロックの削除
![削除するブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/delete-block-select.png)
![ブロックオプションメニューからブロックを削除する](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-option-delete.png)
![ブロック削除完了](https://kotatsu.info/blog/wp-content/uploads/2021/09/delete-block-finish.png)
![ブロックの削除方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/07/image20.gif)
ショートカットキー
「ブロックを削除」の横に表記されています。
![「ブロックを削除」ショートカットキーの表記](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-option-delete-key.png)
「Shift」+「Alt」+「Z」
「^Control」+「⌥option」+「Z」
「︙」(オプション)を開くのが面倒なら、覚えておくと良いでしょう。
ブロックを選択した状態で、Windowsなら「del」か「backspace」キー、Macなら「Delete」キーで削除する方法もあります。
複数削除
![複数のブロックを削除する方法](https://kotatsu.info/blog/wp-content/uploads/2021/07/image56.gif)
削除するブロックをすべて選択します。
Windowsなら「del」か「backspace」キー、Macなら「Delete」キーで削除します。
以上、ブロックツールの基本的な編集方法を解説しました。
どのブロックでも同じ操作が可能です。自由に編集するために慣れていきましょう。
WordPressの設定や導入している拡張機能、テーマやバージョンによっては、画面が記事と違う場合がありますが、基本的には同じ操作となるはずです。不明な部分がありましたら、お気軽にお申し付けください。
次は、テキストの装飾や編集方法をご紹介いたします。