WordPressのブロックエディターを、便利に使い始めるための7つのポイント

カテゴリー:

タグ:


 グーテンベルグと名付けられた新しいエディター(入力画面)が、WordPressに導入されました。

 ブロックを組み合わせるタイプの入力画面は、これまでのエディターとは大きく異なって、新感覚のものです。

  札幌Geezerは新エディターを便利に使っていますが、長いあいだ慣れ親しんだツールを変えるというのは、それがどうやら便利らしいとわかってはいても、なかなかできないものです。

 そこでこの投稿では、ここを押さえてしまえば後は慣れるだけというポイントを7点に絞って、まとめておきました。

 また、この投稿の内容をまとめて説明したYouTube動画を貼り付けておきました。こちらのほうが、文章を読むよりも分かりやすいかもしれません。

 インストール型の方もwordpress.comの方も、ブロックエディターへの移行のキッカケになれば幸いです♫

なぜブロックエディターなのか?

 パソコン上で文書を作成するためのツール(ソフトウェア)は、これまでは全て、決まった大きさの紙に印刷することが前提で作られていましたよね?

 でも、ネット上に公開するものは、見る人によって画面のサイズが大きく異なります。小さいのはスマホですし、大きいのはデスクトップの画面。どれを使っても、「見やすく」なっていなければなりません。

 つまり、前提が全く異なるものを制作するためのツールが、いつまでも変わらないワケがないのです。旧式のエディターは、いってみればワープロ時代(1980年代かな?)のスタイルそのままですよね?

 活版印刷の父として歴史に名前を残す人物名を使ってまで、周囲の抵抗を押し切って導入されたのがブロックエディターのようですが、札幌Geezer的には、その意味が分かるような気がしています。

 では、説明に入りますが、文章よりも動画という方向けに、動画を作成しましたので、最初の5点については、こちらをご参照下さい(2019年10月20日追加):

1. 画面右のサイドバーは、切り替え式になったこと

Gutenberg の入力画面1

 慣れというのはコワイもので、投稿画面の右側に表示されるサイドバーが切り替えタイプになっている(①)ことが、まず気付きにくいと思います。

 このサイドバーは、本文エリアのブロックのひとつを選択(クリック)すると、それに対応したメニューに、表示が自動的に切り替わるようになっています。

 本文のエリア(④)に打ち込むテキスト文章は、一段落がひとつのブロックとして扱われますが、面倒なことは何もありません。自然にタイプして、リターンキーを押すと段落のブロックが自動的に生成されていきます。

 投稿のパーマリンクですが、これはタイトルを入力してそれが認識されると、自動的に②の場所に表示されて編集可能になります。

2.テキスト文以外は、ブロックの種類を先に選択するようになったこと

Gutenbergの入力画面2

 タイトルを入力したら、その下の「本文をここに書く」と表示されている場所からすぐにテキストを入力し始めてOKです。

 あるいは、別のエディターで作成したテキストをコピ&ペーストしても自動的に段落のブロックが生成されます。

 テキスト以外のものを入力する場合には、それ用のブロックを先に選択します。

  カーソルを本文のエリアに持っていくと、よく使うブロックが右側に表示されますので、そこから選ぶか、または①に表示される「+」をクリックすると、その他のブロックが表示されます。

 新しいエディターでは、カーソルをそこに持っていくと現れるアイコンがありますので、以下ではそれらを中心に説明します。

3.ブロックの左側と上とにアイコンが隠れていること

Gutenbergの入力画面3

 これは慣れるととても便利な機能なのですが、各ブロックの左側にカーソルを持っていくと、隠れたアイコン(①)が現れます。

 このアイコンは、ブロックを上げたり下げたりする時と、真ん中部分をクリックすると、②が表示されるようになっています。

 ②の部分は、ブロックの種類によって表示されるものが異なります。

 また、②は、ブロックをクリックすることでも表示されます。

 ブロックを上下させる機能ですが、これは、画像などの位置を上下するときに重宝します。

 右側のサイドバーの表示にもご注目下さい。④をクリックすると、そのブロックの文字と背景の色を変更するための機能が表示されます。

4.文中に画像を挿入するなら、後からのほうが楽ちんなこと

 ブロックとブロックの間に、新しいブロックを追加するのも簡単にできてしまいます。

 その場合は、ブロックの上辺の真ん中あたりにカーソルを持っていくと、またしても隠れアイコン「+」が出現しますので、それをクリックすると、ブロックの選択リストが出現します。

 画像や動画などは、この方法で後から追加するのが、私的にはやりやすいです。

 画像ブロックを挿入してみて、位置を調整したくなった場合には、そのブロックをクリックして左側に現れる上下移動のアイコンを使えばOKです。メチャ簡単にできますよね?

5.画像の大きさの調整が簡単になったこと

Gutenbergの入力画面4

 画像の配置やテキスト文章の回り込みを調整するためには、やはり画像ブロックをクリックします。

 すると、①のアイコンが表示されますので、ここで選べばハイおしまいです♫

 画像の大きさや画像をリンクにする場合も、この時に表示されている右側のメニューから調整することができるようになっています(③)。

 また、画像の代替テキスト(②)ですが、これについてもメニューから入力ができるようになりました。

 代替テキストは、目が不自由な方向けの機能ですので、面倒でも入れておくのが良いと思います。

 旧エディターの場合は、いちいちメディアフォルダーから画像を選んで編集しなければなりませんでしたので、これだけでも随分と楽になりました。

6.古いエディターで入力したものは、一発でブロックに変換可能!

 旧エディターで作成した投稿を新しいブロックエディターで表示すると、クラシック『ブロック』の中に、文章や画像が収められて表示されます。

 このクラシックブロックは、簡単に、通常のブロックに変換することができるようになっています。

 見出しや画像のレイアウト、文字の色などの指定は、そのまま引き継がれますので、とても便利です。

 一度ブロックエディターに慣れてしまうと、クラシックのままでは編集する気になりませんので、この機能は覚えておこましょう♫

クラシックブロックの変換方法

7.使わないブロックは、選択画面から外しておく

 ワードプレス5.2(2019年5月リリース)になって、新たにブロックマネージャーが追加されました。細かなことですが、いつも使うものだけを表示するようにしておくだけで、作業効率がアップします♫

ブロックマネージャーが新登場!

まとめ

 いかがでしたか?

 この投稿では、WordPressの新しいエディターを使い始めるにあたって、最初に知っておくべきだと思うことを7点ほど列挙してみましたが、まだまだ便利になったことがたくさんあります。

 見たことのないアイコンを見つけたら、「これ、なんだろう?」の精神で(笑)、どんどんと試してみましょう。画面の右上にプレビューのボタンがありますので、それを使えば大丈夫です。

 あと、下書きは、一定のタイミングで自動的に保存されるようになっていますので、「せっかく書いたのに保存し忘れた」なんてことまで防いでくれるようになりました。

 ボランティアの集まりで、ここまで作り込んでしまうって、ほんと素晴らしいですよね♫♫

関連する他の投稿

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



%d人のブロガーが「いいね」をつけました。