弊社ではWordPressを用いたWEBサイト制作を数多く行っており、ここではそのノウハウを皆様にお伝えするため、様々な情報発信を行っていこうと考えております。
企業のWEB担当者の方や、これからWEB制作を始めたいけれど、どうしたらいいか分からないといった方。当ブログの記事を参考に、WEBサイトの構築や運用を活性化させてみてください。

今回からはWordPressのブロックエディタ「Gutenberg」の使い方を何回かに分けてお伝えしたいと思います。

WordPressのブロックエディタ「Gutenberg」とは？

「Gutenberg（グーテンベルグ）」エディタとは、WordPressバージョン5.0から標準搭載となったエディタのことで、WordPress標準搭載のブロックエディタのことを指します。WordPressバージョン5.0がリリースされたのが2018年の終わり頃なので、最近WordPressを始めたという方はこの「Gutenberg」を既に使用していることになるかと思います。WordPressを新たにインストールすれば、自動的にこの「Gutenberg」エディターが使用できるようになります。

旧来のビジュアルエディターでは、見出し、文章、画像、見出し、文章、画像… といったようなシンプルな構成の記事制作に便利な一方、3列や4列の複雑なレイアウトを作ったり、画像の位置を調整したり、ちょうどいい余白をつけたり、見出しのデザインを調整したりといった少し凝った記事制作を行うためには、HTMLやCSSの知識がないと難しいというデメリットがありました。

「Gutenberg」ブロックエディタの登場により、そういった少し凝ったレイアウトもHTMLやCSSを書くことなく、簡単に行うことができるようになりました。文章や画像などをブロック単位で管理するため、ブロックの位置を入れ替えたりすること容易に行え、より一層利便性を増しています。これからWordPressを始めたいという方は、まずは「Gutenberg」ブロックエディタを使い倒してみることをお勧めします。

「Gutenberg」ブロックエディタの基本機能

それでは、実際に「Gutenberg」ブロックエディタを触っていきましょう。
（注　本記事ではバージョン: 5.8.1を使用していきます）

記事作成モードを選択する

WordPress管理画面にログインし、投稿の「新規追加」ボタンを押します。
すると下記のような画面が立ち上がります。

こちらの画面を使って、記事コンテンツを作っていくことが可能です。
また、こちらの標準画面は上部の管理バーやサイドバーがない「フルスクリーンモード」となっています。
管理バーやサイドバーを表示させたい場合は、画面右上の三点ボタンをクリック（①）し、表示メニューから（②）「フルスクリーンモード」のチェックを外すことで、「フルスクリーンモード」を解除することができます。

管理バーやサイドバーを表示することができました。
個人的には、こちらの画面の方が使いやすいと感じています。皆さんもお好みのモードで編集をしてみてください。

スポットライトモードを使う

「スポットライトモード」は、現在編集中の箇所がわかりやすいように、編集中の箇所のみを濃く表示する機能です。
画面右上の三点ボタンをクリック（①）し、表示メニューから（②）「スポットライトモード」にチェックを入れることによって、「スポットライトモード」を使用することができます。

チェックを入れると、下記のように現在編集中の箇所のみが濃く表示され、それ以外の箇所が薄く表示されました。

ブロックを挿入する

まずは基本的なテキストのブロックを挿入してみします。通常のテキストの入力は「段落」というブロックが積み重なった状態とみなされるため、まずは、「段落」ブロックを追加していきます。
「ブロックを追加するには / を入力」という文字が書かれている箇所をクリックし、キーボードを用いてテキストを入力してください。テキストを入力すれば、任意の「段落」ブロックを追加することができます。

「段落」ブロック以外のブロックを追加したい時は、「ブロックを追加するには / を入力」という文字が書かれている箇所に / を入力します（①）。すると、下記のような代表的なブロックのリストが出現しますので、挿入したいブロックを選んで選択します（②）。画像や見出し、リストを挿入したい場合はこちらの方法が便利です。

また、上記以外のブロックや複雑なレイアウトを構築するためのブロックなどを挿入する場合は、「ブロックを追加するには / を入力」という文字の右側にある黒い十字ボタン（①）を押します。
すると、ブロックを選択する画面が出現しますので、6つの候補から選択するか、検索ボックスにキーワードを入れると該当するブロックを検索できます。
全てのブロックの一覧から探して選択したい場合は、「全てを表示」ボタン（②）を押してください。

「全てを表示」ボタンを押すと、画面左側に全てのブロックのリストが出現します。こちらに利用できる全てのブロックの一覧が表示されていますので、目的にあったブロックを選択しましょう。

また、ブロックとブロックの間に新たなブロックを挿入したい場合は、ブロックとブロックの間にカーソルを合わせると出現する水色の十字ボタンを押します。すると、黒色の十字ボタンと同じように、ブロックを選択する画面が出現します。

ブロックを削除する

次に、不要なブロックを削除する方法をご説明します。
エディター上から不要なブロックをクリックして選択し、ブロック上部のダイアログから三点マークのボタンをクリックします（①）。すると、ドロップダウンメニューが出現しますので、「ブロックを削除」を選択してください（②）。
すると、該当のブロックが削除されます。

もし誤って削除してしまった場合は、エディターの機能で元に戻すことが可能です。
画面右上の左向き矢印ボタンをクリックすることで、編集を一つ前に戻すことができます。
逆に、右向き矢印ボタンをクリックすることで、編集を一つ先に進めることができます。

ブロックの順番を入れ替える

「Gutenberg」ブロックエディタでは、各ブロックをコピー&ペーストすることなく、ブロック同士の順番を変更することが可能です。
エディター上から順番を入れ替えたいブロックをクリックして選択し、ブロック上部のダイアログから「∨」もしくは「∧」ボタンをクリックします。
すると、ブロック同士の順番が入れ替わり、順番を変更することが可能です。

ブロックの構成リストを確認する

画面左上にある三本線の「リストを表示」ボタン（①）を押すことで、そのページに挿入されているブロックをリストで確認することができます。
また、表示された構成リストから特定のブロックを選択することで（②）、編集したい箇所のブロックまでスピーディに移動することができます。

「カラム」ブロックなどを利用し、ブロックを入れ子状に構成している場合は親ブロックと子ブロックがリスト化された状態で表示されます。
もし、何もコンテンツが入っていないにもかかわらず妙な余白が空いているという場合は、この構成リストを確認してみると良いでしょう。「スペーサー」ブロックや、何も入っていない「カラム」ブロックなど、余計なブロックが削除されないままになっているかもしれません。

様々な便利機能がつまった「Gutenberg」

HTMLやCSSを書かなくても、より複雑でデザイン性を重視したページを制作することができる「Gutenberg」ブロックエディタ。多くの機能やオプションが用意されている分、使い方は旧エディターに比べて少し難しく、慣れるまでに多少時間がかかるかもしれませんが、その分格段にクオリティを上げることが可能です。

このブログでは「Gutenberg」ブロックエディタの使い方をはじめ、様々なWEB制作、動画制作に関する記事を更新していきますので、宜しければご覧ください。

WordPressサイトの構築ならマックスストーン

マックスストーンでは、お客様の業種業態に合ったWordPressサイト構築のお手伝いをさせて頂いております。
WEBの知識や経験に乏しいお客様にも、一人ひとり丁寧にご説明差し上げております。
制作事例はこちらからご確認頂けます。ぜひご覧ください。