【WordPress】新しいブロックエディター Gutenbergのススメ〜正式リリースから半年経ったからこそ言えること〜

2019.07.10  /  2019.07.20 WordPress・PHP
【WordPress】新しいブロックエディター Gutenbergのススメ〜正式リリースから半年経ったからこそ言えること〜

WordPressで新しいブロックエディターGutenbergがリリースされて、半年ちょっと経ちました。

リリースされた当初は、見慣れない編集画面に戸惑ったブロガーやアフィリエイターも多いはず。

困っている受講生
使い方がわからない…前のエディタのほうがよかった!

私も最初はそう思っていました。
やはり、使い慣れたものからの以降はハードルが高いですよね。

実際にリリースされた当初は不安定なところもあり、私はやや意図的に避けていた面もあります。

しかし、新エディターGutenbergを使わざるを得ない場面があっていろいろ試しているうちに、今はすっかり新エディターのファンになりました。

藤ミヤチ藤ミヤチ
もっと新エディターを使う人が増えればいいのになぁ

というのが、今の本音です。

これまで長年にわたって旧エディターを使い続けてきた私だからこそ、新エディターで「かゆいところに手が届いた!」と思えたのです。

実際に、記事を書くときのストレスが減って楽に執筆できるようになりました

そこでこの記事では、リリースから半年たった今だからこそ言える、新エディター Gutenberg の基本的な使い方やオススメポイントをまとめます。

藤ミヤチ藤ミヤチ
ブロガーやアフィリエイターさん含め、いろんな人に新エディターを使ってほしい

WordPressのGutenbergはバージョン5.0で導入された新しいブロックエディター

ブロックエディター Gutenberg とは、2018年12月6日にリリースされたWordPress5.0以上で標準搭載された新しいエディターです。

旧来のエディターとは全く見た目が変わりました。

editor

タイトルと本文を入力するところの区切りがなくなって白一色となりました。

そして一見、旧エディタにあった太字、斜体、文字色変更などのアイコンがなくなった用に見え、戸惑った人も多いハズ。

もちろん、ちゃんと設定箇所はあるんですけどね。

Gutenbergの最大の特徴は、記事の内容を「ブロック」ごとに管理するということ

Gutenbergの最大の特徴は「ブロック」エディターである、ということにあります。

旧エディターでは、見た目からして本文は一つの枠の中に書き込む方式でした。

旧エディター

しかし、Gutenbergでは、見出し・段落・画像などの各要素を1つずつのブロックとして扱っています。

ブロックエディター
わからない受講生
それで、何がどう違うの?

本文の各要素を「ブロック」として独立させたことで、まず以下のことがやりやすくなりました。

  • 「ここいらないな」と思った段落をワンクリックで削除
  • 各ブロックの順序をクリックで入れ替え

ブロックごとに管理をしているので、想定していないところに余白が入ってしまうなどのデザイン崩れもぐんと少なくなったのです。

藤ミヤチ藤ミヤチ
WordPressの初心者でも使いやすいように変わったよ

Gutenbergという名前の由来は、活版印刷技術の発明者

Gutenbergという名前は、活版印刷技術を発明したヨハネス・グーテンベルグに由来しています。

名前から変わるようにドイツ出身の人で、彼の発明した技術により本の大量生産が可能になりました。

そこで「もっとたくさんの人が、簡単に記事をかけるように」という願いを込めて、Gutenbergという名前になったそうです。

笑顏の受講生
旧エディターよりも使いやすくなるように開発されたのがGutenbergだね

WordPressのブロックエディターGutenbergの基本的な使い方

Gutenbergでは、基本的に以下のように記事を書いていきます。

  1. 新しいブロックを追加
  2. デフォルトだと通常テキスト(段落)用ブロックなので、種類を変えたい場合は変更
  3. 中身を書く(設定する)
笑顏の藤ミヤチ藤ミヤチ
文字にすると手間に見えるけど、実際はもっと楽だよ

基本的に文章を書いていくときは旧エディタと同じように「Enter」を押していくと、勝手にブロックが下に追加されていきます。

自動でブロック追加

そのため、ブロックの追加などをわざわざ意識せず、どんどんテキストを書いていくことができます。

書いていくなかで、「画像を追加したい」「見出しにしたい」「引用ブロックにしたい」と思うときは、ブロックの左側に出現する+マークで変更ができます。

ブロックの種類を変更する

また、よく使うものは右側に表示されるのでワンクリックで変更することも可能です。

藤ミヤチ藤ミヤチ
基本はEnterでブロックを増やしながら書き続けていって、何かを挿入するときに変更するイメージだね

WordPressのブロックエディターGutenberg の一番の良さは「スムーズに記事作成ができるようになること」

ブロックエディターGutenbergにして執筆作業を楽に進められるようになった点はたくさんありますが、私が主に「いいな」と思う点は4つです。

  1. ブロックごとに順番の入れ替えが楽にできる
  2. 画像を入れる際の手間が減る
  3. 外部コンテンツの埋め込みがしやすい
  4. コンテンツの横並びが簡単にできる
笑顏の藤ミヤチ藤ミヤチ
正直、この4点だけでもエディターを切り替える理由はあると思う

ブロックごとに順番の入れ替えが楽にできる

Gutenbergの最大の特徴は「ブロック」を基準としたエディターであること。

そのおかげで、執筆中にコンテンツの順葉を入れ替えたくなった場合も簡単に変更ができます。

ブロックの入れ替え

ブロックの左側にマウスを持っていくと表示されるバーのところで、上矢印もしくは下矢印を押すと変更ができます。

複数のブロックを選択して一気に入れ替え、ということも可能です。

藤ミヤチ藤ミヤチ
文の構成を変更するときに役立つよ

画像を入れる際の手間が減る

記事に画像を入れるときって、ちょっと手間ですよね。

旧エディターであれば本文のエディタ左上にある「メディアを追加」をクリックして、メディアライブラリから写真を選択するかアップロードする必要があります。

メディアを追加
困っている受講生
画像を入れる手間を減らしたいな…

と思う人もいると思います。

そんな人に朗報です。

Gutenbergでは、フォルダから写真をドラッグ&ドロップして持ってくるだけで挿入されます。

画像の挿入

正直、これだけで動画の挿入が楽になります。

笑顏の藤ミヤチ藤ミヤチ
もちろん挿入した画像は自動でメディアライブラリに登録されているよ!

外部コンテンツの埋め込みがしやすい

ブログなどで記事を書いていると、YouTube動画やTwitter・Instagram・Facebookの投稿などの外部コンテンツを埋め込みたいときがあると思います。

旧エディターだと、入力モードを「ビジュアル」から「テキスト」に変更して、HTMLタグを貼り付ける、という形で対応していたのではないでしょうか。

中には、慣れていないときに

わからない受講生
HTMLタグ、ってなんぞ???

という段階でつまずいてしまった経験もあるのかもしれません。

しかし、新エディタではHTMLタグを使う必要はありません。

外部コンテツ埋め込み用のブロックが大量に用意されています。

外部コンテンツの埋め込み要ブロック

用意されているのは実に33種類。
日本でよく使われている主要なSNSなどもかなり網羅されています。

  • Twitter
  • YouTube
  • Facebook
  • Instagram
  • Spotify
  • Flickr
  • Dailymotion
  • Hulu
  • Slideshare
  • TED
  • VideoPass
  • Amazon Kindle

など、種類はかなり豊富です。

実際に埋め込むときには、コンテンツページのURLを入れるだけです。

例えばYouTubeのブロックは↓のようになっています。

YouTube埋め込みブロック

URLを入れて右側の「埋め込み」ボタンをクリックするだけで、あとは勝手に動画を埋め込みしてくれます。

笑顏の藤ミヤチ藤ミヤチ
タグに触れなくても埋め込みができるのでかなり楽ちん!

コンテンツの横並びが簡単にできる

記事中のコンテンツを横並びにしたいとき、ありませんか?

そんなとき、旧エディターでは対応しきれていないので、なかなか思うようにできなかった…という経験はあると思います。

画像とテキストの横並びをしてみても、よっぽどうまく画像のサイズなどを設定しないときれいに画面に表示されないんです。

例えば↓のように画像とテキストを横並びに表示させようとします。

回り込み

しかし、画面で見ると入力した通りにはなかなかならない…。

いらない余白がある
困っている受講生
こうしたかったわけじゃないんだ…

でも、Gutenbergだと「カラム」というブロックがあって、それを使えば簡単&キレイにコンテンツの横並びができます。

カラムのブロック

また、カラムのブロックであれば、スマホのときには勝手に縦並びになってくれるのでスマホ対策もOK。

気にせず記事を書いていけます。

笑顏の藤ミヤチ藤ミヤチ
カラムの他に、テーブルのブロックもあるので記事コンテンツの自由度が広がったよ

WordPressのブロックエディターGutenberg のイマイチなところは既存プラグインとの兼ね合い

優れたところの多いGutenbergですが、もちろん「まだまだこれから」なところがあります。

藤ミヤチ藤ミヤチ
Gutenberg利用に際して気をつけるべきことや、対応策をまとめるね

Gutenbergでは、そのままだと使えないプラグインがある

特に気になるところは、デフォルトのままだと「使えないプラグインがある」ということではないでしょうか。

Gutenbergの正式リリースから今までの間に対応してきたプラグインも多いですが、中にはまだGutenbergでは使えないものがあります。

例えば、このブログではプログラミングのコードなどを埋め込むために「Enlighter」というプラグインを使っています。

↓など。

.sample {
  margin: 40px auto;
  font-size: 18px;
}

これはかなり愛用しているプラグインなのですが、Gutenberg上ではうまく動作しません。

Gutenbergで使えないプラグインの場合は、クラシックというブロックを使う

わからない受講生
じゃあ、Gutenbergをやめるしかない?

当初は、私も「Gutenbergをあきらめるしかないのか…」と思いました。

でも実は、Gutenbergで利用できるブロックの中に「クラシック」があります。

クラシックのブロック内では、限定的に旧エディタが使えるという優れもの。

クラシックエディタ

そこで、私はコードを埋め込むときだけ「クラシック」のブロックにして、そこでEnlighterというプラグインを使っています。

藤ミヤチ藤ミヤチ
中にはこれで解決できないプラグインもあるかもしれないけど、私が知っている中ではこれですべて解決しているな

※現在は「Enlighter」もブロックエディタに対応してます。

WordPressの新ブロックエディターGutenbergを使って、記事をよりスムーズに書こう

正式リリースされた当初こそ「使いにくい!」という声の多かったGutenbergですが、半年経って目立ったバグがなくなったほか、対応するプラグインもかなり増えて使わない理由がなくなってきました

私が人にWordPressをオススメするときは、ほぼ100%いっしょにGutenbergでの記事執筆もオススメしています。

藤ミヤチ藤ミヤチ
一度Gutenbergを使い始めてしまうと、旧エディターは使いにくくして仕方がない

というのが本音です。

便利な点が多いので、ぜひGutenbergを使ってみてくださいね!

スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)
シェア


この記事も参考になるかも
【WordPress】bloginfo / get_bloginfo – サイト名などの基本情報を表示
【HBook】WordPressのホテル予約プラグイン 導入方法まとめ
WordPressサイトでの問い合わせ内容をGoogleスプレッドシートに自動で記録する方法