WordPressのGutenbergとブロックエディタの使い方

WordPressではバージョン5.0より、「Gutenberg(グーテンベルグ)」という新型のエディタが導入されましたが、従来のエディタ機能とは使い方が全く異なるため、未だに活用できていない人が少なくないようです。

今回はGutenbergの特徴と使い方について解説します。

この記事で分かること

  • Gutenberg(グーテンベルグ)の特徴と機能
  • ブロックエディタの便利な使い方

WordPress標準搭載のエディタ「Gutenberg」とは?

WordPressには記事作成用のエディタが搭載されていますが、2018年にリリースされたWordPress 5.0からは、「Gutenberg」という新しいエディタが導入されています。

Gutenbergは、15世紀に活版印刷を発明したヨハネス・グーテンベルグから取られた名称で、活版印刷の登場により書物が大衆に普及したように、WordPressの記事作成をより多くの人々に開かれたものにする目的で開発されました。

このGutenbergは「ブロックエディタ」とも呼ばれ、ブログの記事を積層的なパーツに分割した「ブロック」を操作するところに特徴があります。

WordPressのブログでよく使われている高度なテクニック――画像の並列表示、カラムによる記事の分割、表の作成、ボタンの配置、各種SNSの投稿の埋め込み……といった処理が、Gutenbergではコードの操作なしに、ブロック単位の設定から可能となっています。

WordPressの旧エディタに搭載されていた「ビジュアルモード」を進化させることで、これまでHTMLやCSSに熟達している人にしかできなかった表現を、誰でも扱えるようにしたところに、ブロックエディタの革新性があります。

その一方で「ブロック」という、これまでに類例のない機能を取り入れていることもあって、一見してとっつきにくく、どう活用していいものか戸惑っている人も少なくないようです。

そこで今回は、Gutenbergの特徴と、注目すべき機能を中心に解説していきます。

合わせて読みたい

【完全ガイド】誰でも10分!WordPressブログの始め方

ブロックエディタの3つのメリット

Gutenberg以外にも、高度なエディタ機能を備えたブログサービスはいくつかあります。

例えば、海外ではMedium、日本ではnoteがよく知られていますが、ブロックエディタはそのいずれにも似ておらず、独特なユーザーインタフェースと、バリエーションに富んだ機能を特徴としています。

Gutenbergが備えているエディタとしての強みには、以下の3点が挙げられます。

HTML・CSSを編集せずに多彩な機能が使える

ブロックエディタが対応している機能は実に多種多様です。

主だったものは以降で解説しますが、従来のエディタではHTMLやCSSの高度な記述が必要とされていた表現が、ブロックエディタではワンクリックで記事内に組み込めます

これまでのWordPressは、HTMLやCSSの知識がゼロの人が使いこなすは困難でしたが、ブロックエディタなら表現の幅が大きく広がるでしょう。

色やサイズといった細部のカスタマイズの容易さ

ブロックエディタの設定項目は多岐に渡り、対象ブロックの色やサイズの変更が簡単に行えます。

フォント、ボタン、囲み、カラムなどの要素によってメニューが変化し、それぞれのブロックに対する設定で、思った通りの表現が可能になります。

設定項目はサイドバーにまとめられているため、初心者に理解しやすいのもメリットでしょう。

ブロックを再利用できる

ブロックエディタの長所のひとつは、作成したブロックを何度でも再利用できる点です。

作成したブロックの複製を作ることで、好きな場所に配置したり、場所を自由に入れ替えたりすることが可能です。

特にバナーやリンクを複数作る際に力を発揮するので、アフィリエイト広告を組み込んだ記事の作成時に活用しましょう。

これらのメリットは、いずれもWordPressの初心者にとって非常に心強いはず。

ブロックエディタは、ブログの初級ユーザーを強力にサポートするためのものと言えるでしょう。

合わせて読みたい

【重要度別ガイド】WordPressインストール後の初期設定

ブロックエディタの特徴的な機能

ここではブロックエディタの特徴的な機能を見ていきましょう。

ブロックエディタが従来のエディタと一線を画すのは、それまではHTMLやCSSで複雑なコードを記述しなければ実現できなかった表示を、コードの知識がない人でも簡単に表現できるようになった点です。

ここではブロックエディタが対応している、最近のWordPressでよく見かける人気の機能について紹介しましょう。

複数画像をまとめて表示する「ギャラリー」

ブログの記事内に、複数の画像をタイル状に並べる表示は、見た目ほど容易にはできない処理ですが、ブロックエディタでは「ギャラリー」よって簡単に実現できます。

記事に多くの画像を掲載したい場合に、余分なスペースを作らず、きれいな横並びにできます。

画面左上の「+」ボタンをクリック。

ブロックの「メディア」から「ギャラリー」をクリックしましょう。

パソコン内の画像ファイルを選択することで記事内に挿入できます。
複数の画像を選択するとブロックの中にまとめて表示が可能。

きれいな横並びにできるほか、画像内にキャプションを追加することもできます。

画像内に文字を表示する「カバー」

アップロードした画像にフォントを重ねることでバナーのような表示にする機能が「カバー」です。

画像編集ソフトで画像を加工する必要がなく、フォントの種類や表示位置、画像の不透明度なども自由に変更が可能です。
タイトルバナーの作成などに活用しましょう。

ブロックの「メディア」の中から「カバー」をクリックしましょう。

画像ファイルを選択し、画像が表示されたら、その中に表示したいテキストを入力しましょう。

右のサイドメニューから画像やフォントの詳細設定が行なえます。

ここではフォントの視認性を残したまま画像の不透明度を下げて、写真の内容が分かるようにしました。

表を簡単に作成できる「テーブル」

記事内での表の掲載も、WordPressでは簡単には行えない作業でしたが、ブロックエディタでは完璧に調整された表を作成できます。

カスタマイズ性も高く、エクセルに近い感覚で行や列を追加することができます。

ブロックの「テキスト」の中から「テーブル」を選択します。

「カラム」で列数、「行数」で行数を指定すると、記事内に表が挿入されます。

表のセルを埋めていきましょう。
表のスタイルや色の指定を行えるほか、行や列を後から追加することもできます。

クリックすると別ページが開く「ボタン」

これまでWordPressの記事内にボタンを表示するには、ボタンの画像ファイルを作成するか、CSSを編集するしかありませんでした。

しかし、ブロックエディタではボタンの追加機能を標準搭載。
もちろん色やサイズについても変更可能です。

ブロックの「デザイン」の中から「ボタン」をクリックしましょう。

ボタンが作成されます。ボタン内のテキストを入力しましょう。
右側のメニューからは、ボタンの形式やサイズ、リンク先の設定が行なえます。

縦方向の列を作成する「カラム」

ブロックエディタのカラム機能では、記事を縦方向に分割することで文章の塊を形成することができます。

画像をカラム内に配置して、文章と併置することも可能です。
カラムの内部にカラムを作ることで、さらに細かく分割することもできます。

ブロックの「デザイン」にある「カラム」をクリックしましょう。

カラムのパターンを指定します。ブロックを最大で3分割できます。
ここでは例として3分割の「33/33/33」を選択。

3つのカラムが作成されました。それぞれのカラムをクリックするとメニューが表示されます。テキストを入力する場合は「段落」を選択。

3つのカラムにそれぞれテキストを入力できます。
各カラムにはテキストだけでなく、画像やボタンを配置することも可能です。

画像と文章を左右に表示する「メディアとテキスト」

ブログでは、画像と文章を横並びで表示したい場面がよくあります。
「メディアとテキスト」は、画像と文章を左右に並べて表示するための機能です。

画像だけでなく動画や音声などのファイルを指定することも可能です。

ブロックの「メディア」から「メディアとテキスト」をクリック。

ブロックの左右にメディアとテキストの入力欄が表示されます。
「メディアエリア」に画像を指定し、「コンテンツ」にテキストを入力しましょう。

画像とテキストが左右に配置されました。
画像とテキストの左右は入れ替えられるほか、サイズを変更したり枠線を表示したりといった設定も行えます

記事の本文を途中で折りたたむ「続きを読む」

記事が長文になると、画面をどこまでもスクロールしなければならなくなります。

キリのいいところで折りたたんで「続きを読む」をクリックすることで、後半が展開されるようにすることで、見た目にもスマート。

ブロックエディタなら「続きを読む」機能で簡単に実現できます。

ブロックの「デザイン」から「続き」をクリックします。

指定したラインから記事の本文が自動的に折り畳まれます。
「続きを読む」をクリックすると記事の全文が表示されます。

合わせて読みたい

WordPressブログに設置すべき4種の固定ページ

Gutenbergから旧エディタに戻すには?

Gutenbergを使ってみたものの、あまり好みではないという人もいるでしょう。
WordPressの旧来型のエディタの方が使いやすい人は、以前のエディタに戻した方がいいかもしれません。

WordPress 5.0には、Gutenbergを無効化する設定はありません。
旧来型のエディタに戻すには、プラグイン「Classic Editor」をインストールしましょう。

インストール後は、新規記事の作成画面が自動的に旧エディタに切り替わります。

WordPressの管理画面から「プラグイン」の「新規追加」をクリック。

検索欄に「Classic Editor」と入力して検索。
表示されたら「今すぐインストール」をクリックし、その後「有効」をクリックしましょう。

Classic Editorのインストールが完了したら、「記事」の「新規作成」を開いてみましょう。エディタが旧来のものに変更されています。

Gutenbergに戻したい場合は、「プラグイン」の「インストール済みプラグイン」でClassic Editorを無効化しましょう

合わせて読みたい

WordPressにお問い合わせフォームを設置する方法

まとめ

今回はWordPressのエディタであるGutenbergの特徴と使い方について解説しました。

Gutenbergを標準搭載したWordPress 5.0は2018年末に公開されたので、登場から既に2年以上の年月が経過していますが、Gutenbergに対する評価は未だ定まっていません。

HTMLやCSSが苦手な初心者に高度な記事作成の可能性を開いた点は評価されているものの、旧来型のエディタとかけ離れたユーザーインタフェース、直感的とはいい難い機能の配置、HTMLでの編集のしにくさなどには批判も多く、長くWordPressを使い続けているユーザーほど、Gutenbergに否定的な印象を抱いているようです。

もっとも、プラグイン「Classic Editor」によって、新旧どちらのエディタを使うかの選択肢は用意されているので、あとはユーザーの好みで使いやすい方を選べばよいでしょう。

WordPress公式はプラグイン「Classic Editor」について、必要とされなくなるまでサポートを続けると表明しており、将来的に旧バージョンのエディタが使えなくなる心配はないようです。

様々な声のあるGutenbergですが、WordPressがブログの記事作成機能を一段上のレベルに上げようとした、挑戦的な取り組みであることは確かです。

食わず嫌いをせずに、一度は使ってみることをオススメします。

ブログを始めるなら「お名前.com」

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。
ブログに挑戦してみようと考えている方は、以下のリンクから、ぜひご利用ください。

ブログに使うドメインを
今すぐ取得

Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

このサイトの管理人
知るくま先生

国内最大級のドメイン公式登録サービス お名前.comの担当者。Webの制作から運用までのハウツーを初心者にも分かりやすく解説します!

WEB学園をご覧になった方限定!
ここからお申込みでドメイン登録料金無料
お申込みはこちら

 

\ 今なら無料 /ブログを始めるなら
「お名前.com」

「お名前.com」は、国内N.1のドメイン登録サービス。独自ドメインとあわせてWordPress対応のレンタルサーバーも利用できるので、初めての方でもスムーズに始められます。

\ 3分でできる /ドメインを今すぐ取得