新時代のGutenbergエディタの機能を解説！画像関連編

WordPress 5.0へのアップデートを経て正式にWordPressのエディタとなった「Gutenberg」

15年間使われてきたエディタを土台からひっくり返してまで作り直したエディタは各地のWordCampでも賛否両論ある反応で、本リリースまでいったいどうなってしまうんだろう、という目で見ていましたが、実際本リリースされたもので作り直したところ、大変いいものだと改めて実感したところです。

フルリニューアルを経たところで、WordPressはまだ触ったことがない、という人にもクラシックエディタから乗り換えるのを躊躇しているひとの背中を押すという意味でも、その素晴らしい機能群を自分なりにですが、紹介していこうと思います。

今回は、記事に華を添える、画像にまつわる機能群について紹介していきます。

旧エディタから引き続きの画像

こちらは昔のエディタからおなじみの画像…なのですが、これ自体も進化しています。

アップロードが大進化！直感操作で楽々画像掲載。

まず、「メディア」を開かないといけなかった画像をドラッグアンドドロップするアップロードが

投稿画面でできてしまいます！これは後述するギャラリーやカバー、メディアと文章でも同じようにできるんです！便利になりましたね。

普通にメディアライブラリを開いて、以前アップロードした画像を再掲するのにも投稿画面からすぐできます。

旧エディタだと、カーソルがあった位置に追加されていたので、思わぬ位置に画像が出てきて困惑していたのですが、本当に助かります。

画像のあれこれの変更も同一画面でらくらく！

画像に対する右寄せ左寄せの設定、キャプションの追加、大きさや代替テキストの変更、画像のリンク先設定も同一画面上でできるようになっています。大進化ですね。

複数画像もきれいに並べるギャラリー

ところで、さっきから画像がきれいに並んでるの、気になりません？

画像の紹介のところできれいに横に2つずつ並んだ画像がありましたね？こちらが、新機能の「ギャラリー」です。

4つとかでも行けるんですよ。そして、

ご覧のように4つの画像の並びを変更できました。

キャプションはちょっとおしゃれに

さらにキャプションも画像同様に入れられるのですが、画像と違って下の部分に黒の半透明グラデーションをかぶせて、白い字で字幕を入れてくれます。ちょっとおしゃれですね。

まだまだ課題も

ただ、カラム落ちは画像の個数が偶数でないと現状うまくいかない感じもあります。奇数だと、一つだけ大きい画像になってしまったり…

また、カラムを4などに設定しても、スマートフォンサイズにしてしまうとカラム2と同じようになってしまったりと、レスポンシブへの柔軟な対応自体もこれから、という感じがします。

ここら辺はこれから変わっていくんでしょうかね？

画像と文字の組み合わせその1、カバー

キャプションで画像と文字を組み合わせる、というのはやりましたが、それだけだといまいち…という方向けに、「カバー」という新機能があります。上の画像がそうですね。印象的な画像の背景を少し暗くして、白い文字を重ねると、目を引きたい画像の導入部分なんかに使えそうです。

画像と文字の組み合わせその2、メディアと文章

また、画像と文字を組み合わせる、というものの新要素として、メディアと文章、というブロックがあります。

と、このように、画像の左寄せ右寄せよりきれいな写真と文字の組み合わせができたりします。上のように何かを紹介するときに使えそうですね！

画像、右に載せる？左に載せる？

画像をもうちょっと大きくしたい、いや文字をもっと見せたい

スマートフォンでもうちょっとみやすくしたいなあ…

文章説明が短いならばこの設定はオフでもいいと思いますが、スマートフォンで画像が小さくなるのは嫌だ、というかたは「モバイルを重ねる」を活用するといいかもしれませんね！

番外編 アップローダを使って埋め込み

これはちょっとイレギュラーな感じだとは思いますが、imgurという海外の画像アップローダーを使って埋め込む、という方法も使えます。

ちょっと英語だらけなので、敬遠する方も多いかもしれませんが、こんなのもあるよ、という紹介でした。

他にもInstagramも埋め込むことができます。

画像はコンテンツを華やかにできる。

やはり、文字だけで延々と書かれているだけだと、途中で読み飽きてくる、というのは自分もそうなのでわかるのですが、画像があると俄然読みたいという気力がわいてきますね。

以上、どんどん活用していってほしい、と思っているGutenbergエディタの画像関連機能でした。