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

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

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

ブロックとは…

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

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

ブロックの機能を確認する

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

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

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

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

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

[adsense]

ブロックの機能で新しいもの

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

ブロックの移動

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

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

カバー写真

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

これがカバー写真だ!!

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

Reusableブロック

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

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

HTML編集

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

画面上にあるツールバーからEdit as HTMLを選ぶことで編集可能!

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

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

これまでの機能を使いたい

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

関連記事:ワードプレス5.0で旧エディターに戻す方法2つ!変更は落ち着いて

さいごに

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

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