使い勝手が大幅に向上!ブロックエディターのおススメ

  • 作成日:2019-10-2

WordPress5から使えるようになったブロックエディター(Gutenberg)は、これまでのエディターからは見違えるように使い安くなっている。HTMLを覚える必要なし見通しのよいソース表示とこれは使わない手はない。

beatiful_morning.jpg Photo
新エディター登場!
Gutenberg

使い勝手が大幅に向上したブロックエディター

これまでWordpressの旧エディターは、まかりまちがっても使いやすいものではなかった。Wordpress5から採用された新エディタ-Gutenberg(グーテンベルグ)は、これまでの使い勝手の悪さを一掃してくれそうなエディターだ。

この新エディターは単純にその動作方法からブロックエディターと呼んでいる。対して、旧エディターはクラシックエディターと呼ぶ。

一つだけ難点をいえば、それこそWordpressブロガーは長年使ってきたクラシックエディターに慣れていて、見かけも全く違うブロックエディターは少しとっつきにくい気がする。

ブロックエディターを使うメリットとデメリット

ここで本当に便利になるのかどうか検討してみよう。従来のクラシックエディターの問題点はソースの見にくさと直接HTML編集しなければならないという点だ。おまけにHTML編集には、ビジュアルエディターとテキストエディターをたびたび切り替える必要があり、この切り替えにはカーソル位置の同期がない。これが見にくいソースとあいまってしばしば編集ポイントを見失う結果となる。

もう、嫌になっちゃいますよね

対してブロックエディターは、ほとんどHTML編集画面を見なくても記事を作成できる。これはブロックそのものに見出しやテーブル、リスト、引用など部品化されており、ただ単に選ぶだけで記事が書ける。おまけにブロックナビゲーションという機能で目的とする編集ポイントへ素早く移動できる。2段組、3段組というレイアウトもカラムというブロックを選ぶことで簡単にできます。

どうですか? もう使う気になりましたか?

以下に、ブロックエディターを使う場合のメリットとデメリットをまとめましたので、ご覧ください。

メリット

  • 見出し、段落、画像などすべてはブロックという単位で管理
  • これまでテキスト画面、ビジュアル編集画面で行き交うと編集ポイントを見失っていたが、それがなくなった。さらに、 ブロックナビゲーションをつかうと、目的の編集ポイントに素早く移動できる。
  • ブロック移動、削除、複製ができる
  • 見出しをはじめ、リスト、引用など種類に応じたブロックコンテンツを
  • 使える。特にカラムコンテンツを使用すると、2段組などのレイアウトをすぐ作れる。
  • クラシックブロックコンテンツを使うと、1ブロックのみ従来のテキスト編集画面として編集できる。
  • ブロックは”再利用ブロックとして追加”するとテンプレートとして再利用できる。
  • ClassicEditorプラグインをインストールすると常時クラシックエディターが起動する

デメリット

  • WordPress5以上でないと使えない
  • 慣れるのに時間がかかる
  • 文字単位などブロック以外の編集は苦手で、どうしてもHTML編集がベースになる。

問題はココ! 本当のところの問題は、Wordpresのバージョンを5にしなければ使えないところかもしれない。問題点としては次があげられる。 ・テーマが対応していないので、表示ができない、またはレイアウトが崩れてしまう。 ・エディター系のプラグインが動作不良となる。 ・PHPのバージョンを7以上にする。場合によっては、ワーニングエラーを引き起こす。

ブロックエディターの新規画面

まず、ブロックエディターの基本画面と構成要素をみていこう。

考え方としては、②の新規ブロックボタンで見出しや段落(通常のテキストも含まれる)、画像といったブロック要素を追加して、文字や画像を配置するという作業になります。

新規投稿画面

ブロックエディターの新規画面

HTML習得必要なし!ブロック要素

ブロックエディターは、HTMLの知識習得も軽減する。ブロックを追加する際に既に用意されたブロック要素の中から選べばいいからだ。

ブロック要素の追加

ブロック要素を追加するには、画面上の+ボタンをクリックすると以下のようなブロックを表示してくれるので、選ぶだけでよい。例えば、リストを作成するには<ul>タグを使わなければなりませんが、直接このようなタグを記述する必要はありません

一般ブロックのブロック要素を表示した画像

一般ブロックのブロック要素

画像のレイアウト配置も簡単

先ほど、カラムブロックコンテンツでレイアウトを組むことが出来るといいましたが、画像の3連装なら、以下のように簡単につくることができました。

画像を3連奏したレイアウト例

画像を3連奏したレイアウト例

ブロックエディターならこのようなレイアウト配置も、画像を3枚選んでドロップするだけ。

手順

  1. 新規で投稿画面を開く
  2. タイトルのみ入力。一度改行して確定します。
  3. windowsエクスプローラー上で、配置する3枚の画像を選択します。
  4. マウスでドラッグして、投稿画面上にドロップ。
  5. ドロップした画像は自動で横並びにレイアウト配置される。

もし、クラシックエディターを使いたいなら…

WordPress5にアップデートしても、これまで通りクラシックエディターを使う方法があります。それは、”ClassicEditor”というプラグインをインストールすれば、従来どおりのクラシックエディターが起動します。 やっぱり従来どおり、クラシックエディターを使い続けたい。または、エディター系のプラグインの動作がいまいちおかしいなんていうときも、このプラグインのインストールで解決するかもしれません。

ダウンロードサイト: https://ja.wordpress.org/plugins/classic-editor/

ClassicEditorプラグインサイト

ClassicEditorプラグインサイト

HTMLソースの互換性

ブロックエディターは、特別な機能をつかっているわけではなく、単に専用のクラスがあるかないかで仕訳しているようです。ブロックエディターで作成したHTMLソースでもWordpress5以前の従来エディターでインポートしても、動作は可能です。

WordPressの更新

WordPressを最新のものに更新するには、下記のボタンでイメージをダウンロードするかWordpress管理画面より直接更新してください。

Wordpress日本語版ダウンロードサイト

  以上

スポンサーリンク

ランキング

記事連動目次

※右側の記事と連動したインデックスです。見たいインデックスをクリックしてください。
ページ上部へ戻る