みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、WordPressのエディターであるGutenberg(グーテンベルク)の便利な機能や設定方法をご紹介します。
![投稿画面(Gutenberg)](https://kotatsu.info/blog/wp-content/uploads/2021/09/gutenberg-picture-option-menu.png)
エディタ画面でいうと、上のバーや右上のオプションメニューなどから、選択・使用できる機能や設定の解説です。
ツール
![ツールメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/tool-select.png)
画面左上のペンマーク(ツール)をクリックすると、「編集」と「選択」の2つが選択できます。
これを「選択」にしてブロックをクリックすると、どういうブロックを選択しているか表示されます。
![選択ツールで段落ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/tool-select-text-block.png)
「選択」から「編集」ツールへの切り替え方法は、以下のいずれかです。
![ツールの「選択」から「編集」への切り替え(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/YXB6JexGkQ-min.gif)
- 画面左上のペンマーク(ツール)で切り替える
- ブロック名をクリックする
- ブロックを選択した状態でEnterする
- ブロックの中を2回クリック
もしレイアウトが複雑になり、ブロックの選択が面倒になったら、使ってみると良いでしょう。
詳細
![詳細メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/detail-btn.png)
アルファベット小文字の「i」を丸で囲ったマーク(詳細)をクリックすると、現在編集している記事の文字数や見出し、段落やブロック数が確認できます。
あまり使い所はありませんが、文字数が気になった時にご使用ください。
アウトライン
![アウトラインメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/outline-menu.png)
「詳細」右隣りの、長さの違う三本の横線があるアイコンは「アウトライン」です。ブロック構成が確認できます。
リストの中のブロック名をクリックすれば、該当のものを選択できます。
![アウトラインメニューからブロックを選択(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/u8bCtr6la9-min.gif)
こちらも、ブロックの選択や記事全体の確認に使えるツールです。
パターン
Gutenberg(グーテンベルグ)には「ブロックパターン」という、予め用意されているレイアウトやデザインを利用できる機能があります。
![画面左上のブロック追加ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/09/pattern-plus-btn.png)
![新規ブロックメニューのパターンタブ](https://kotatsu.info/blog/wp-content/uploads/2021/09/pattern-tab-select.png)
![パターンのドロップダウンメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/pattern-dropdown.png)
![パターンのドロップダウンメニューを開いた状態](https://kotatsu.info/blog/wp-content/uploads/2021/09/pattern-dropdown-menu-select.png)
![パターン選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/pattern-select-block.png)
![パターンブロック挿入完了](https://kotatsu.info/blog/wp-content/uploads/2021/09/pattern-block-add.png)
あとは自由に文字を装飾したり、色を変更したり、要素を付け加えたりしましょう。
もしうまくレイアウトができない、思いつかない場合は、この「ブロックパターン」を見てみるのも手です。
![オプションメニューツール](https://kotatsu.info/blog/wp-content/uploads/2021/09/option-menu-list-1.png)
今度は、画面右上の「オプション」メニューから見られる、設定や機能を詳しく解説します。
ブロックマネージャー
![オプションメニューのブロックマネージャー](https://kotatsu.info/blog/wp-content/uploads/2021/09/outline-menu-block-manager.png)
特定のブロックを追加無効にできます。
![ブロックマネージャー](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-manager.png)
![ブロック追加メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/left-block-menu.png)
試しに、ポエムなどの記入に最適なブロック「詩」のチェックをオフにしてみましょう。
![ブロックマネージャーから「詩」を非表示](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-manager-poem-off.png)
![ブロック追加メニューから「詩」が消えている](https://kotatsu.info/blog/wp-content/uploads/2021/09/left-block-menu-poem-off-1.png)
画面左上のプラスボタンから見られる、ブロックの追加メニュー(ブロックライブラリー)から、「詩」ブロックが消えています。
空白ブロック右のプラスボタンクリックで表示される、ブロック追加メニューでも同様です。
![「詩」ブロックが有効状態だと、ブロック追加メニューで「詩」と検索すると引っかかる。](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-add-poem-on.png)
![「詩」ブロックが有効状態だと、ブロック追加メニューで「詩」と検索してもヒットしない。](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-add-poem-off.png)
使いやすさを重視したいなら、普段使わないブロックを非表示にしておくと良いでしょう。
キーボードショートカット
![オプションメニューのキーボードショートカット](https://kotatsu.info/blog/wp-content/uploads/2021/09/outline-menu-keybord-shortcut.png)
Gutenbergで使えるキーボードショートカットを確認できます。作業スピードを上げたいときは、参考にしましょう。
![キーボードショートカット一覧](https://kotatsu.info/blog/wp-content/uploads/2021/09/keybord-shortcut.png)
すべて覚えるのは大変です。
スクリーンショットで撮って、編集時はウィンドウの横に置いておくのも良いでしょう。
すべてのコンテンツをコピー
記事を複製したいときは、すべてのブロックをコピーし、「新規追加」した記事にペーストします。
ですが、コンテンツ量が多ければ多いほど、選択だけでも面倒です。
そんなときは、この「すべてのコンテンツをコピー」が便利です。
![すべてのコンテンツをコピー](https://kotatsu.info/blog/wp-content/uploads/2021/09/contents-copy-1.jpg)
![ブロックの貼り付け](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-paste.png)
![ブロックの貼り付け完了](https://kotatsu.info/blog/wp-content/uploads/2021/09/contents-copy-2.jpg)
![「すべてのコンテンツをコピー」を使った記事の複製方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/3FXqHVP3PM-min.gif)
記事の複製や移動に最適です。覚えておきましょう。
設定
![オプションメニューの設定](https://kotatsu.info/blog/wp-content/uploads/2021/09/outline-menu-setting.png)
一番下の「設定」では、操作のしやすさやエディターのデザインなどを設定できます。
基本的には、特に何も変更する必要はありません。
ですが、もし「今のままでは使いにくい」「操作に違和感がある」なら、設定を確認・変更してみるのも良いでしょう。
一般
![設定の一般メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/setting_general.png)
公開前チェックリストの追加
オフにすると、公開する時に確認のメッセージが出ません。
![公開前チェックリストの追加オン](https://kotatsu.info/blog/wp-content/uploads/2021/09/before-public-check-on.png)
![公開前チェックリストの追加オンのときの公開(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/ByjtK88VJF-min.gif)
公開時の動き
![公開前チェックリストの追加オフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/before-public-check-off.png)
![公開前チェックリストの追加オフのときの公開(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/rtRQasRJIz-min.gif)
公開時の動き
間違えて公開するのをふせぐため、ここはオンのままにしておきましょう。
インターフェースの削減
![インターフェイスの削減オン](https://kotatsu.info/blog/wp-content/uploads/2021/09/interface-cut-on.png)
![インターフェイスの削減をオンにしたエディタ](https://kotatsu.info/blog/wp-content/uploads/2021/09/interface-cut-on-gutengerg.png)
![インターフェイスの削減オフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/interface-cut-off.png)
![インターフェイスの削減をオフにしたエディタ](https://kotatsu.info/blog/wp-content/uploads/2021/09/interface-cut-off-gutenberg.png)
オンにすると、今回紹介した下記のボタンが、画面上部のバーにマウスオーバーしない限り表示しなくなります。
![インターフェイスの削減をオンにしたエディターで上部のバーにマウスオーバー(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/zrSirYJpqQ-min-1.gif)
- モード
- 詳細
- アウトライン
- 元に戻す
- やり直し
- プレビュー
その上、画面下部にある、ブロックの階層がわかるバーの表示が消えます。
![画面下部のバー(ブロックのパンくずリスト)](https://kotatsu.info/blog/wp-content/uploads/2021/09/gutenberg-bread-crumb-area.png)
スッキリはしますが不便ですから、オフで良いでしょう。
スポットライトモード
オンにすると、選択しているブロック以外が薄くなります。
![スポットライトモードオン](https://kotatsu.info/blog/wp-content/uploads/2021/09/spot-light-on.png)
![スポットライトモードオンでのブロック選択(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/uGziM3YBzs-min.gif)
ブロック選択
![スポットライトモードオフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/spot-light-off.png)
![スポットライトモードオフでのブロック選択(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/RdUllYY0bP-min.gif)
ブロック選択
![オプションメニューのスポットライトモード](https://kotatsu.info/blog/wp-content/uploads/2021/09/option-menu-spot-light.png)
画面右上の「オプション」から選択できる「スポットライトモード」と全く同じです。
ブロックのパンくずリストを表示
ブロックのパンくずリストとは、画面一番下にあるバーのことです。
![画面下部のバー(ブロックのパンくずリスト)](https://kotatsu.info/blog/wp-content/uploads/2021/09/gutenberg-bread-crumb-area.png)
![ブロックのパンくずリストを表示 オン](https://kotatsu.info/blog/wp-content/uploads/2021/09/bread-crumb-on.png)
![ブロックのパンくずリストを表示でオンにした場合のエディター](https://kotatsu.info/blog/wp-content/uploads/2021/09/bread-crumb-on-gutenberg.jpeg)
![ブロックのパンくずリストを表示 オフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/bread-crumb-off.png)
![ブロックのパンくずリストを表示でオフにした場合のエディター](https://kotatsu.info/blog/wp-content/uploads/2021/09/bread-crumb-off-gutenberg.jpeg)
便利ですし、オフにする理由がありません。オンにしておきましょう。
ブロックのパンくずリストの使用や活用方法については、下記の記事をご参照ください。
外観
![設定の外観メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/setting-outside.png)
ボタンラベルを表示
![ボタンラベルを表示 オン](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-on.png)
![ボタンラベルを表示がオンのエディター](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-on-gutenberg.jpeg)
![ボタンラベルを表示 オフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-off.png)
![ボタンラベルを表示がオフのエディター](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-off-gutenberg.jpeg)
オンにすれば、アイコンのメニューがすべてテキスト表記に変わります。
![ボタンラベルを表示オンのエディター画面上部表示](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-on-top-bar.png)
![ボタンラベルを表示オンの画像ブロックツール](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-on-block-tool.png)
![ボタンラベルを表示オフのエディター画面上部表示](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-off-top-bar.png)
![ボタンラベルを表示オフの画像ブロックツール](https://kotatsu.info/blog/wp-content/uploads/2021/09/button-label-off-block-tool.png)
わかりやすくはなりますが、文字だらけで直感的に選択しづらくなります。ご自身のお好みで選択しましょう。
テーマスタイルの使用
オフにすれば、WordPressに適用しているテーマをエディター内のデザインに反映しなくなります。
![テーマスタイルを使用 オン](https://kotatsu.info/blog/wp-content/uploads/2021/09/use-theme-style-on.png)
![テーマスタイルを使用する場合のエディター表示](https://kotatsu.info/blog/wp-content/uploads/2021/09/use-theme-style-on-gutenberg.jpeg)
![テーマスタイルの使用 オフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/use-theme-style-off.png)
![テーマスタイルを使用しない場合のエディター表示](https://kotatsu.info/blog/wp-content/uploads/2021/09/use-theme-style-off-gutenberg.jpeg)
上記を見比べてみましょう。フォントや余白が若干変わっています。
公開後のイメージがつかないまま編集するのは不便ですから、オンで良いでしょう。
ブロック
![設定のブロックメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/setting-block.png)
よく使用されるブロックを表示
画面左上のプラスボタンのクリックで表示される「ブロックライブラリ」に「よく使うもの」という項目が上に追加されます。
![よく使用されるブロックを表示 オン](https://kotatsu.info/blog/wp-content/uploads/2021/09/often-use-block-on.png)
![よく使うブロックを表示したブロックライブラリー](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-list-often-use-on-652x1024.png)
ブロックライブラリー
![よく使用されるブロックを表示 オフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/often-use-block-off.png)
![よく使用されるブロックを表示しないブロックライブラリー](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-list-often-use-off-641x1024.png)
ブロックライブラリー
便利なので、オンでもいいですね。
ブロック内にテキストカーソルを含める
![ブロック内にテキストカーソルを含める オン](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-cursor-on.png)
![「ブロック内にテキストカーソルを含める」をオンの場合での↓キーを押したときの動き(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/RrGds38gUm-min.gif)
↓キーを押したときの動き
![ブロック内にテキストカーソルを含める オフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-cursor-off.png)
![「ブロック内にテキストカーソルを含める」をオフの場合での↓キーを押したときの動き(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/Qfq2BMqZcd-min.gif)
↓キーを押したときの動き
オフなら、キーボードの上や下矢印キーで、別のブロックへキーボードカーソルを移動できます。
ですが、オンにするとそれができなくなります。不便ですから、オフでいいでしょう。
パネル
![設定のパネルメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/setting-document.png)
文書設定
右メニューの「投稿」にある項目の中で、オフにしたものを非表示にします。
![文書設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/09/document-setting.png)
![右メニューの投稿設定](https://kotatsu.info/blog/wp-content/uploads/2021/09/right-menu-public.png)
- パーマリンク
- テンプレート
ページのテンプレートを選択できる項目です。設定可能のテンプレートがあれば表示されます。 - カテゴリー
- タグ
- アイキャッチ画像
- 抜粋
- ディスカッション
試しに「タグ」をオフにしてみます。
![文書設定で「タグ」をオフに設定](https://kotatsu.info/blog/wp-content/uploads/2021/09/document-setting-off-tags.png)
![右メニューの投稿設定で「タグ」が非表示になっている](https://kotatsu.info/blog/wp-content/uploads/2021/09/right-menu-public-off-tags.png)
右メニューの「投稿」から「タグ」が消えました。
基本的に全部オンのままで良いでしょうが、一部のメニューを使わないなら、このように非表示にしておくのもありです。
それぞれの項目についての解説は、下記のページをご覧ください。
カスタムフィールド
オンにすると、投稿画面の本文記入エリアの一番下に、カスタムフィールドの入力欄が追加されます。
![カスタムフィールドオン](https://kotatsu.info/blog/wp-content/uploads/2021/09/custom-field-on.png)
![カスタムフィールドオンのエディター画面](https://kotatsu.info/blog/wp-content/uploads/2021/09/custom-field-on-gutenberg.png)
![カスタムフィールドオフ](https://kotatsu.info/blog/wp-content/uploads/2021/09/custom-field-off.png)
![カスタムフィールドオフのエディター画面](https://kotatsu.info/blog/wp-content/uploads/2021/09/custom-field-off-gutenberg.png)
「カスタムフィールド」とは、記事に「タイトル」と「本文」の他に、任意の項目と情報を追加する機能です。
![](https://kotatsu.info/blog/wp-content/uploads/2021/09/custom-field-add.png)
例えば、書籍の感想記事に、該当書籍の情報を追加するとします。
「名前」に「書籍名」を入れ、「値」に書籍のタイトルを入れて「カスタムフィールドを追加」します。
作者の情報も入れるなら、「名前」に「著者」を、「値」に作者の名前を記入し、同じく「カスタムフィールドを追加」をクリックします。
![書籍名と著者情報を入れたカスタムフィールド例](https://kotatsu.info/blog/wp-content/uploads/2021/09/custom-field-example.png)
![「カスタムフィールド」設定「有効化してリロード」ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/09/custom-field-reload.png)
設定を変更する場合は、下に「有効化してリロード」というボタンが現れます。カスタムフィールドの場合は、これをクリックしなければ設定が反映されません。ご注意ください。
初心者向けの機能ではないため、使わなけばオフにしておきましょう。
以上、Gutenberg(グーテンベルク)の設定や、覚えておいて損はない機能をご紹介いたしました。