WordPress5.0の新エディタ「Gutenberg(グーテンベルグ)」の使い方

Gutenbergとは、Wordpress5.0から採用された新しいテキストエディタのことだ。

従来のエディタとは画面構成や操作感が大幅に変わっているため、とまどった人もいるだろう。しかし一度操作に慣れてしまえば旧エディタよりも使いやすく、直感的に記事を作成することができる。


1.Gutenbergで何が変わったのか

1−1.ブロック型エディタの採用

Gutenbergでは、「ブロック」という要素で記事を作成する。
その名の通り、ブロックを積み重ねていくようなイメージだ。

たとえば「H2見出し・本文・画像」という構成であれば、下図のようにブロックを配置する。

1−2.ブロック型エディタ採用の目的とは

Gutenbergのブロックエディタは、次のような目的で開発されている。

  • 専門知識がなくても、リッチなコンテンツ作成を可能にする

  • インターフェースを改善し、画面全体を無駄なく活用する

  • コンテンツ作成方法を統一する

専門知識がなくても、リッチなコンテンツ作成を可能にする

Gutenbergにはさまざまなブロックが用意されている。文章や画像をシンプルに配置するだけでなく、ブロックの種類と設定を使い分けることで、柔軟にコンテンツが作成できる。

たとえば「横並びのレイアウトを組む」「テキストの背景に画像を設定する」といった、これまではHTMLやCSSの知識が必要だったデザインも、ブロックによって簡単に実装できる。

インターフェースを改善し、画面全体を無駄なく活用する

編集画面でもっとも頻繁に使用するのは、コンテンツフィールド、つまり記事内容を入力するエリアだろう。

旧エディタでは、ページ上部に新規作成ボタン、タイトル入力ボックス、パーマリンクなどが置かれ、その下にようやくコンテンツフィールドがある。そして右サイドには、使用頻度の低い設定項目が常に表示されている。
種々の要素がコンテンツフィールドを圧迫するような、少しタイトな画面構成だ。

Gutenbergではインターフェースが全面的に見直され、記事作成に最適なレイアウトに改善された。
画面左側にコンテンツフィールド、右側に文書設定&ブロック設定エリアというシンプルな構成となっている。

コンテンツ作成方法を統一する

WordPressはとても柔軟なツールだ。コンテンツを作成する方法が豊富に用意されている。
しかし反面、どの方法が正しいかという判断に迷うことも少なくない。

Gutenbergのブロックについて、下記のような説明がある。

Blocks are the unifying evolution of what is now covered, in different ways, by shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements.

訳)ブロックとは、ショートコード、埋め込み、ウィジェット(中略)など、現在さまざまな方法でカバーされているものを、統一的に進化させたものだ。

引用元 : https://wordpress.org/plugins/gutenberg/

つまり、これまで多様化していた手段が整理され、基本的にはブロックを使えば対応できるということだ。
どのような方法で実装するかという選択に時間を使うことなく、最短で結果を得ることができる。


2.Gutenbergの記事作成の流れ

それでは記事作成の流れを順番に見ていこう。

2−1.タイトルを入力する

「タイトルを追加」をクリックし、入力する。

2−2.コンテンツを作成する

ブロックを使ってコンテンツを作成する。</mark

ここではブロックの基本操作を説明する。

ブロックを追加する

編集画面左上の「+」アイコンからブロックメニューを開き、追加したいブロックを選択する。

まずは「見出しブロック」を使ってH2タイトルを追加してみよう。

追加したブロックに設定を加える。
見出しのテキストを入力し、H2を選択する。

次に本文を追加する。
テキスト入力には「段落ブロック」を使う。
段落ブロックはブロックメニューから追加できるが、画面上に文章を入力するだけでも、自動的に段落ブロックとして扱われる。

ブロックの移動、並び替え

ブロックにカーソルを合わせると、左側に移動アイコンが表示される。
矢印で上下に、または中央アイコンをドラッグで、ブロックの並び替えができる。

ブロックの複製・挿入・削除

ブロックの詳細設定メニューから、ブロックの複製・挿入・削除が行える。

ブロック種類の変更

作成したブロックを、別の種類に変更することもできる。

例として、段落ブロックをリストブロックに変更する。

2つの段落ブロックを選択し、変換メニューからリストブロックを選択する。

すると、2つの段落ブロックが、1つのリストブロックに変換される。

ブロックをHTMLで編集する

詳細設定メニューから「HTMLとして編集」を選択すると、ブロックをHTMLで編集することができる。

2−3.記事の情報を設定する

パーマリンク

パーマリンクは、2カ所から設定できる。

1. 記事タイトルの上
2. 右サイドバーの文書設定

パーマリンクの入力欄が表示されない場合は、記事を下書き保存してみよう。

カテゴリ

アイキャッチ画像

2−4.公開する

右上の「公開する」ボタンをクリックする。
必要に応じて、右サイドバーから公開状況なども設定しておこう。


3.新機能「ブロック」を詳しく知ろう

Gutenbergには、多種多様なブロックが用意されている。
ブロックを組み合わせることでHTMLやCSSの知識がなくても、彩りのあるデザインや読みやすいレイアウト、動画やSNSとの連携など、表現豊かな記事作成ができる。

3−1.ブロックの種類

ブロックには、以下のような種類がある。

一般ブロック

もっとも使用頻度が高いブロック。通常の記事なら、ほぼ一般ブロックのみで作成できるだろう。

ブロック名役割
段落文章を入力する
見出しH2などの見出しを入力する
リストリストを入力する
画像画像を挿入する
ギャラリー複数の画像を並べて挿入する
引用引用ボックスを挿入する
動画動画を挿入する
音声再生可能な音声ファイルを挿入する
ファイルダウンロード可能なファイルを挿入する

フォーマット

HTMLやテーブルなど、さらに表現を広げるためのブロック。

ブロック名役割
カスタムHTMLHTMLコードを入力する
テーブルテーブルを挿入する
整形済み改行や半角スペースなどをそのまま表示する
ソースコードソースコードをそのまま表示する
クラシック旧エディタのTinyMCE機能で編集する
プルクオート引用ブロックを挿入する
改行や半角スペースなどをそのまま表示する

レイアウト要素

レイアウトを整えるためのブロック。

ブロック名役割
ボタンボタンを設置する
カラム2カラムのレイアウトでコンテンツを配置する
メディアと文章画像とテキストを横並びで配置する
続きを読むアーカイブに表示するテキストを設定する
改ページコンテンツを複数のページに分ける
区切り区切り線を挿入する
スペーサー余白を挿入する

ウィジェット

ウィジェットを記事内に設置するためのブロック。

ブロック名役割
ショートコードショートコードでコンテンツを追加する
アーカイブ月別アーカイブページへのリンクを挿入する
カテゴリーカテゴリー別アーカイブページへのリンクを挿入する
最新のコメント最新のコメントを挿入する
最新の記事最新記事へのリンクを挿入する

埋め込み

サイト外のコンテンツを埋め込むためのブロック。対応する34種類から、一部を紹介する。

ブロック名役割
YouTubeYouTubeの動画を埋め込む
InstagramInstagramの記事を埋め込む
WordPressWordPressの記事を埋め込む

以上のブロックを活用して記事を作成する。 

それでは順番に詳しく見ていこう。

3−2.段落

役割 … 文章を入力する
タグ … <p>

3−3.見出し

役割 … 見出しを入力する
タグ … <h2> <h3> <h4> <h5> <h6>

3−4.リスト

役割 … リストを作成する
タグ … <ul> <ol>

番号付きリストと番号なしリストから選択できる。

3−5.画像

役割 … 画像を挿入する
タグ … <img>

パソコンからアップロードや、メディアライブラリから選択するほか、画像を画面上にドラッグして直感的にアップロードすることもできる。

挿入した後は、画像の右と下にある青丸をドラッグすることで、サイズ変更できる。

3−6.ギャラリー

役割 … 複数の画像を挿入する
タグ … <ul>のリストで<img>が並ぶ

複数の画像を選択し、横並びで表示する。

レスポンシブ時は自動で画像幅を調整してくれる。

3−7.カバー

役割 … 背景画像つきのテキストを入力する
タグ … <div> <p> (画像はbackground-imageに設定される)

背景画像には、半透明のオーバーレイが重なっている。
オーバーレイの色は、右サイドメニューから変更できる。

3−8.引用

役割 … 引用ブロックを挿入する
タグ … <blockquote>

3−9.動画

役割 … 動画を挿入する
タグ … <video> <iframe>

mp4などのファイルをアップロードできるほか、URLを入力するだけでYouTube動画を埋め込むことも可能だ。

さらに、ポスター画像を設定することで、動画のサムネイル画像を変更できる。

3−10.音声

役割 … 音声ファイルを挿入する
タグ … <audio>

mp3などの音声ファイルを挿入し、記事上で再生できる。

3−11.ファイル

役割 … ダウンロード可能なファイルを挿入する

ファイルを選択すると、ファイル名とダウンロードボタンが挿入される。
画像、文書、zipなど、さまざまなファイルに対応している。

3−12.カスタムHTML

役割 … HTMLコードを挿入する

プレビューを選択すると、その場で表示を確認できる。

3−13.テーブル

役割 … テーブルを挿入する
タグ … <table>

行数と列数を指定し、生成ボタンをクリックする。

テーブルが挿入されるので、テキストを入力。

テーブルブロックのセルは、すべて<td>で生成される。
項目名には通常<th>タグが使われることが多いが、テーブルブロックの設定では<th>を選択できない。
<th>タグを使いたい場合は、HTMLを直接編集しよう。

3−14.整形済み

役割 … 改行や半角スペースなどをそのまま表示する
タグ … <pre>

3−15.ソースコード

役割 … ソースコードを表示する
タグ … <pre> の中 <code>

HTMLなどのコードを変換せず、そのままテキストとしてブラウザ上に表示する。

3−16.クラシック

役割 … 旧エディタの機能を使う

旧エディタのTinyMCEを使って、記事編集ができる。

入力中に ctrl + Z (command + Z)で取り消すとブロックごと消えてしまう場合があるので、取り消すときはツールアイコンをクリックしよう。

3−17.プルクオート

役割 … 引用ブロックを挿入する
タグ … <figure> の中の <blockquote>

blockquoteタグが挿入されるため、用途としては引用ブロックと同じだろう。
通常の引用ブロックよりも大きな文字で表示されるため、さらに強調する場合などに使おう。

3−18.詩

役割 … 詩を書く
タグ … <pre>

WordPress公式の説明は以下のとおり。「詩ブロックは、詩を書くのに理想的です」とのことだ。

The verse block is ideal for writing poetry on your site.

引用元 : https://en.support.wordpress.com/wordpress-editor/blocks/verse-block/

使用されるHTMLタグは<pre>なので、整形済みテキストと改行や半角スペースなどがそのままブラウザ上に反映される。
また、横スクロール機能がデフォルトでついている。

3−19.ボタン

役割 … ボタンを設置する
タグ … <a>

テキスト、リンク先、色や形などのスタイルを設定できる。

3−20.カラム

役割 … 2カラムのレイアウトでコンテンツを配置する

下図は「見出し・画像・テキスト・テーブル」を並べた例。

レスポンシブ時は縦並びになる。

3−21.メディアと文章

役割 … 画像とテキストを、横並びで配置する

3−22.続きを読む

役割 … アーカイブに表示する抜粋文を設定する

このブロックよりも前にあるテキストが、抜粋文としてアーカイブに表示される。

アーカイブページでは、このようにテキスト1のみ抜粋表示される。

3−23.改ページ

役割 … コンテンツを複数のページに分ける

このブロックの前後で、コンテンツが別のページに分割される。
ページを増やす場合は、改ページブロックをさらに追加しよう。

記事ページには、自動的にページネーションが追加される。

3−24.区切り

役割 … 区切り線を挿入する
タグ … <hr>

3−25.スペーサー

役割 … 余白を挿入する
タグ … <div>

右サイドバーの設定から、余白の高さを設定できる。

3−26.ショートコード

役割 … ショートコードでコンテンツを追加する

3−27.アーカイブ

役割 … 月別アーカイブページへのリンクを挿入する

3−28.カテゴリー

役割 … カテゴリー別アーカイブページへのリンクを挿入する

3−29.最新のコメント

役割 … 最新のコメントを挿入する

3−30.最新の記事

役割 … 最新記事へのリンクを挿入する

3−31.埋め込み

役割 … 動画やSNSなど、サイト外のコンテンツを埋め込む

埋め込み方法は、各ブロックにURLを入力し、挿入ボタンをクリックするだけだ。

34種類の埋め込みブロックが用意されている。
その中から一部を紹介しよう。

YouTube

YouTubeの動画を埋め込むことができる。

Instagram

Instagramの投稿を埋め込むことができる。

WordPress

WordPress記事ページの、ブログカードを挿入することができる。


4.「再利用ブロック」を活用して、ブロック機能をさらに使いこなそう

再利用ブロックとは、ブロックの設定を保存して、いつでも再利用できる機能だ。

たとえば、文字サイズ・背景色・画像などをあらかじめ設定しておけば、再利用ブロックとして呼び出すことができる。

4−1.再利用ブロックの使い方

①コンテンツを作成する。

ブロックを組み合わせて、コンテンツを作成する。

②再利用ブロックに追加する

保存したいブロックをすべて選択し、メニューから「再利用ブロックに追加」をクリックする。

保存画面が出るので、ブロック名を入力して保存しよう。

③保存したブロックを使用する

ブロックメニューから「再利用可能」を開き、作成したブロックを選択する。

再利用ブロックのままでは内容を編集できないので、ブロックの設定メニューから「通常のブロックへ変換」をクリックし、編集可能な状態に戻す。

4−2.活用方法の例

再利用ブロックは、何度もくりかえし利用するコンテンツと相性がいい。
使い方の例をいくつか紹介しよう。

ボタン

お問い合わせページへリンクするボタンなど、利用頻度の高いものは再利用ブロックに登録しておくと便利だ。

バナー

画像ブロックに、HTML編集で<a>タグを追加することで、リンク付きのバナーが作成できる。記事内で繰り返し使うバナーは、再利用ブロックに登録しておこう。

まず、画像ブロックでバナー画像を挿入し、HTML編集画面を開く。

そして、画像の前後にリンクタグを追加する。

<a href=”リンク先URL” target=”_blank”>
画像
</a>

再利用ブロックに保存すれば、簡単にバナーを挿入できる。

強調ブロック

テキストに装飾を加えることで、強調したい部分を目立たせることができる。
段落ブロックをHTML編集して、再利用ブロックに登録しておこう。

テキストの前後にdivタグを追加し、style属性でCSSを設定する。
<div style=”border:1px solid #ccc;border-radius:5px;background:#fff8f2;padding:20px;”>
<p>テキスト</p>
</div>

プレビューを確認しながら、CSSを調整しよう。

項目名が決まっている表

たとえば飲食店を紹介するブログで、記事ごとに店舗情報が必要だとしよう。

「店名・住所・営業時間・定休日・電話番号」というふうに、項目名のみ入力したテーブルを再利用ブロックに登録すれば、テンプレートとして使い回せる。


5.便利なショートカット一覧

5−1.エディターショートカット

ショートカットの説明Linux/WindowsMacOS
キーボードショートカットを表示するShift + Alt + Hcontrol + option + H
変更を保存Ctrl + S⌘ + S
最後の変更を取り消すCtrl + Z⌘ + Z
最後に取り消した変更を再実行するCtrl +Shift + Zshift + ⌘ + Z
設定サイドバーを表示・非表示Ctrl + Shift + ,shift + ⌘ + ,
ブロックナビゲーションメニューを開くShift + Alt + Ocontrol + option + O
ビジュアルエディターとコードエディターを切り替えるCtrl + Shift + Alt + Mshift + option + ⌘ + M

5−2.ブロックショートカット

ショートカットの説明Linux/WindowsMacOS
選択したブロックを複製するCtrl + Shift + Dshift + ⌘ + D
選択したブロックを削除するShift + Alt + Zcontrol + option + Z
選択したブロックの前に新しいブロックを追加する。Ctrl + Alt + Toption + ⌘ + T
選択したブロックの後に新しいブロックを追加する。Ctrl + Alt + Yoption + ⌘ + Y

5−3.テキスト整形

ショートカットの説明Linux/WindowsmacOS
選択したテキストを太字にするCtrl + B⌘ + B
選択したテキストをイタリック体にするCtrl + I⌘ + I
選択したテキストをリンクに変換するCtrl + K⌘ + K
リンクを削除するCtrl + Shift + Kshift + ⌘ + K
選択したテキストに打ち消し線を追加するShift + Alt + D control + option + D
選択したテキストを等幅フォントで表示するShift + Alt + Xcontrol + option + X

6.旧エディタで作った記事はどうなる?

6−1.深刻な影響はないので安心しよう

旧エディタで作成した記事をGutenbergで開いても、特に影響はない。記事内容が消えたり、デザインが崩れるようなことはないので安心しよう。2018年のリリース直後は細かいバグが報告されていたが、2019年時点では修正されている。

6−2.クラシックブロックとは

旧エディタで作成した記事をGutenbergの編集画面で開くと、記事全体が「クラシックブロック」というブロックに入っている。

クラシックブロックとは、TinyMCEの機能がそのまま使えるブロックだ。
つまりこのブロックの中では、旧エディタと同じ要領で記事編集ができる。

6−3.クラシックブロックを、各ブロックに変換する

TinyMCEではなくGutenbergのブロックエディタを使って編集したい場合は、クラシックブロックを各ブロックに分割、変換しよう。

まず、メニューから「ブロックへ変換」を選択する。

すると、クラシックブロックで統合されていたコンテンツが分割され、見出しブロックや段落ブロックなど、それぞれに対応したブロックに自動変換される。

6−4.ブロック変換できない原因と対策

複数のブロック要素が<div>などで囲まれていると、ブロック変換ができない。

<div>
   <h2>見出し</h2>
   <p>テキスト</p>
</div>

たとえば上記のように「見出し <h2>」と「テキスト <p>」が、<div>タグで囲まれていると、見出しとテキストがまとめてカスタムHTMLブロックとして変換されてしまう。

この場合は<div></div>を削除して、メニューからもう一度「ブロックへ変換」すれば、見出しブロックと段落ブロックに分割できる。

<div>だけではなく<section>タグなどでも同様の現象が起こるので、ブロック変換がうまくいかないときは、HTMLソースを確認してみよう。


7.その他のよくある疑問点

7−1.旧エディタに戻す方法

プラグイン「Classic Editor」を使えば、旧エディタに戻すことができる。
どうしてもGutenbergに慣れないという人は、「Classic Editor」をインストールしよう。

https://wordpress.org/plugins/classic-editor/

7−2.カスタムフィールドが表示されない場合の対応

デフォルトの状態では、記事編集画面にカスタムフィールドが表示されていないため、オプションから表示設定する必要がある。

編集画面の右上アイコンからメニューを開き、「オプション」を選択肢する。

オプション画面の「詳細パネル」欄にカスタムフィールド名が並んでいるので、表示したいフィールドにチェックを入れる。


まとめ

Gutenbergの使い方を、ブロックの解説を中心に紹介した。

最初は使いづらいと感じるかもしれないが、UIが分かりやすいので、実際に触ってみるとすぐに慣れるだろう。

Classic Editorプラグインで旧エディタを使うことも可能だ。
しかし、Classic Editorは少なくとも2022年まではサポートされるが、それ以降どうなるかは明記されていない。

Classic Editor is an official WordPress plugin, and will be fully supported and maintained until at least 2022, or as long as is necessary.

引用元 : https://wordpress.org/plugins/classic-editor/

GutenbergはすでにWordPressの標準エディタとなっており、対応するテーマやプラグインも増えてきている。
いずれは、Classic Editorから移行する日が来るはずだ。

ここまで紹介してきたように多くの便利な機能があり、活用できればコンテンツの幅が飛躍的に広がるだろう。

いまのうちに、ぜひGutenbergの使い方を覚えておいてほしい。

コメントはこちらから