WordPress5.0から導入されたGutenberg(グーテンベルク)の使い方〜ブロックの種類まとめ〜

「Gutenberg(グーテンベルク)Tips」は、株式会社コミュニティコムが運営する「 WordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップ」が、 WordPress5.0から導入されたブロックエディター[Gutenberg(グーテンベルグ)エディター]の機能やノウハウ、使い方のヒントを解説するシリーズです。

WordPress5.0から導入された新しいエディター「Gutenberg(グーテンベルク)」
見た目がガラッと変わり、戸惑っている方も多いのではないでしょうか。

本記事では、Gutenbergの基本的な使い方について解説していきます。
旧エディターと基本的な流れは似ているので、まずは見た目や「ブロック」と呼ばれるGutenbergの仕様について慣れていきましょう!

今回は、利用頻度の高いブロックについて紹介していきます。
(本記事のキャプチャは、WordPress5.0からのデフォルトテーマ「Twenty Nineteen」を使用。)

Gutenbergのインターフェースについて

Gutenbergのエディター画面は下図のようなデザインになっています。
基本的なレイアウトはあまり変わっていませんが、本文エリアにあったアイコン群やビジュアル/テキストを切り替えるタブが無かったりと、かなりシンプルな見た目になっています。

Gutenbergエディター画面

主に編集する箇所としては下記の3箇所です。

  • タイトル
    記事のタイトルが入ります。
  • 本文
    記事の文章や画像が入ります。
  • ページ/ブロック設定
    記事の詳細設定や、各ブロックに対応するカスタマイズ機能が設定できます。

基本的な投稿手順は、

  1. タイトルを入力する
  2. 本文を入力する(ブロックを挿入→編集を繰り替えす)
  3. ページ設定をする
  4. 公開ボタンを押して公開する

この4つの手順で簡単に投稿できます。
※ページ設定はそのまま公開する場合は飛ばしてもOKです。

Gutenbergで記事を書いてみよう

タイトルの入力

「タイトルの追加」と書かれている部分をクリックすると入力ができます。
記事のタイトルを入力しましょう。

本文の入力

本文は「ブロック」と呼ばれる機能を使って作成していきます。
レゴブロックや積み木をイメージするとわかりやすいと思います。

文章の段落や画像もそれぞれブロックの一つとして扱われます。
そのブロックをひとつひとつ積み重ねていきページを作成していくといったイメージです。

タイトルを入力し終えたら、下の「文章を入力、または / でブロックを選択」をクリックします。クリックすると文字が打てる状態になり、文章を打つだけならこのまま文章を打つこともできます。

デフォルトブロックに文字を入力

デフォルト状態で文字を打つと、「段落」ブロックに変換されます。
基本的な文章はこの段落ブロックを使っていきましょう。

段落ブロックに文字を入力すると、エディター画面右エリアが「文書」から「ブロック」に切り替わります。左エリアのブロックに対応しているカスタマイズ機能がこのブロックエリアに表示されます。

上図の例だと段落ブロックに対してカスタマイズ可能な機能が表示されています。
文字サイズの変更や、文字色・背景色の設定が可能になります。

他のブロックになるとまたカスタマイズ可能な機能が変わります。

ブロックの種類について

冒頭で少し触れた「ブロック」。Gutenbergエディターではこの機能を使って記事を書いていきます。

まずはどんな種類のブロックがあるか見ていきましょう。

✔ ブロックは6つのカテゴリーに分類されます

Gutenbergの基本的なブロックカテゴリーは以下の6つです。

※プラグインやテーマによってはカテゴリーが増えたりします。

それでは各カテゴリーごとにブロックを見ていきましょう。

各ブロックの説明

✔ インラインブロック

・インライン画像(Inline-Image)

画像の横に文章を打ったり文章中に画像を入れたいときに、このインライン画像を使います。

✔ 一般ブロック

・段落

段落を挿入できます。文章を打つ時などは基本的にこのブロックを使用します。
エディター画面右の設定エリアで、太字やイタリック(斜体)、リンク、文字サイズ、文字色、背景色など設定できます。
段落内で改行をする場合は「Shift + Enter」で改行ができます。

・見出し

見出し1〜見出し6を挿入できます。段落と同様に、太字やイタリック(斜体)、リンクなどを設定することができます。

・画像

画像を挿入できます。キャプション、Alt(代替テキスト)、画像サイズなど設定できます。
画像をアップロードするかメディアライブラリから選択して挿入します。

・ギャラリー

複数の画像を並べた画像ギャラリーを挿入できます。
横並びにする枚数や、画像をクリックしたときのリンク先など設定できます。

アップロードした画像を選択し、「ギャラリーを作成」を押下すると下図のように並べて表示されます。

[キャプチャ]ギャラリー作成時のブロック表示

・リスト

箇条書きリスト/番号付きリストが挿入できます。太字やリンクが設定できます。

✔ フォーマット

・クラシック

Gutenbergエディターの中にクラシックエディターを表示することができます。
従来のエディターに近い状況で操作することができます。

・テーブル

シンプルな表を挿入することができます。行数/列数の指定や、行列の追加や削除ができます。
テーブルのデザインが、デフォルトとボーダーの2種類用意されています。

✔ レイアウト要素

・ボタン

ボタンを挿入できます。ボタンの色やテキストの色、ボタンのスタイル(角丸、角四角、アウトライン)を設定できます。

・カラム

ブロックを横並びにすることができます。横並びにする数を設定できます。

・メディアと文章

左右に画像と文章を配置するレイアウトにしたいときはこのブロックを使います。
左右の要素を入れ替えたりすることができます。
スマートフォンで表示したときに上下に並び替えるなどの設定もできます。

・スペーサー

ブロックとブロックの間に余白を挿入できます。余白は数値(px)で指定できます。

・区切り

水平線の区切り線を挿入できます。

✔ ウィジェット

・アーカイブ

記事の月別アーカイブを挿入できます。ドロップダウン表示、投稿数の設定ができます。

・最新の記事

最新の記事一覧を挿入できます。並び順やカテゴリー分け、記事の掲載数を設定できます。

✔ 埋め込み

・Youtube

YoutubeのURLを貼るだけでYoutube動画を埋め込むことができます。

・Facebook

Facebookの投稿も同様に埋め込むことができます。

・Twitter

Twitterの投稿も同様に埋め込むことができます。

いかがでしたでしょうか。まだ機能的に不便なところもあるこのGutenbergエディターですが、これからドンドン使いやすくなっていくと個人的に期待しています。

初めのうちは時間がかかるかもしれませんが、慣れると簡単に記事を作成できますので、是非使いこなせるようになりましょう!

株式会社コミュニティコムが運営するWordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップでは、弁護士・法律事務所・士業向け WordPress テーマや、歯科医院・歯医者さん向け WordPress テーマなど、 業種・用途特化のWordPressテーマを販売しています。もちろん新エディター「Gutenberg(グーテンベルク)」対応です。
>> コミュニティコムショップのWordPressテーマ一覧

また、1ヶ月間無料の月額サポートプランでの継続的なサポートや、制作代行オプションもご提供しております。
>> コミュニティコムショップのオプション一覧

株式会社コミュニティコムが運営する教育部門「Chiemo(チエモ)」では、WordPress(ワードプレス)でホームページやブログを作り始めたけれど、「ここがわからない!」といったお悩みに対して、プロのデザイナーがマンツーマンでレッスンを行っています。

>> ホームページ制作&WordPressなんでも相談会