ワードプレス5.0の新エディター機能「ブロック」の使い方

2018年12月6日からWordpress5.0へ更新が可能になり、エディターが新しくなりました。その中でも特徴的な「ブロック」の使い方について簡単にまとめてみました。

ブロックとは…

これまでのビジュアルエディターの「段落」のようなものです。それがブロックとして一つ一つ独立しました。

なので改行するごとに新しいブロックが自動的に造られます。こうしてブロックとして分けることによって様々な機能が柔軟に使えるようになりました。

さきほど説明した通り、ブロックはエディター内で改行することで自動的に作られます。

新しく作られたブロックにマウスのカーソルを合わせると、左側に“+”マークが表示されます。

なんだかnoteみたいな機能ですが、できることはたくさんあります。これをクリックすると…

こんな風に多すぎてお腹いっぱいになりそうなくらいの機能が出てきます。ここからこれまでのテキストエディターと同じ機能が使えます。

Paragraphが普通の文章です。他に、見出しやリスト、引用、画像・音声・動画の挿入などがあり、ブログやウェブサイト編集の敷居が一気に低くなりました。

[adsense]

これまでの改行がブロックになったことで、新しい機能が追加されていますのでいくつかご紹介します。

文章を入力したり、画像を設定したりしたブロックにマウスのカーソルを合わせると左側に上下に移動できるスライダーが現れます。

これをドラッグするか、矢印をクリックすることでブロック内のコンテンツをまるごと移動できます。これまではコピー＆ペーストだけだったので、今まで以上に柔軟に編集できます。

これまでに無かったカバー写真という機能ができました。カバー写真とは、下の写真のような機能です。

これがカバー写真だ！！

カバー写真では、写真をバックにして文章を入力することができます。文章の文字色や太さから写真の透明度やハイライトカラーまで変えることができるので、自分の好きなようにカスタマイズできます。

Reusableブロックという機能を使えば、何度も使えるブロックを作成して、他の記事でも流用することができます。

イベントの案内や同じ内容を連絡したいときに使えそうですよね。上手に活用してみたいです。

これまでのエディターではビジュアルエディターとテキストエディターを切り替えていました。新エディターでは、ブロックごとにHTMLコードの編集ができます。

これで、ブロックにコードを入力しておけば、ブロックごとにコードを移動させることができます。コピペが無いので手間が省けますね。

エディター全体をHTML編集したいときも右上の設定（3つの点）＞Code Editorを選んでできますよ。好きなように使い分けて使ってみましょう。

せっかく新しくなったエディターに慣れない方は、以前のエディターに戻せる方法をこちらで紹介しています。

ワードプレスのエディターのデザインが急に変わってビックリした人もいるのではないでしょうか。ぼくもビックリしました（笑）。

少しずつ活用して、慣れていきましょう。