WordPress サイトの作り方→基本操作と設定 『デザイン重視なら、ブロックエディターの一択』 sapporogeezer.com と記載された画像

【動画2本】ブロックエディターの使い方を2本の動画に分けて初心者向けに解説。ブロックテーマとは言っても、ワープロ感覚で使うこともできて、難しいわけではないことをデモしています。

WB-4:編集画面(ブロックエディター)の使い方、基本編

ブロックエディター vs. クラッシクエディター

 ブロックエディターは、ワードプレス 5.0 (2018年12月にリリース)から提供され始めた新しいタイプの編集画面のことで、これ以降、ワードプレスをインストールすると編集画面はブロックエディターになっています。

 対して、それより以前の編集画面は「クラシックエディター」と呼ばれています。

 クラシックエディターは、ワープロ感覚の「文章」の編集画面であるのに対して、ブロックエディターは、文章を含めたページの「レイアウト」の編集画面になっていることが、両者の大きな違いです。

クラシックエディタ―の限界とは?

 クラシックエディタ―は、ワープロソフトがそうであるように、ページのレイアウトまで含めてデザインするものではありません。レイアウト専用のソフトウェアがワープロソフトとは別に存在するのはこのためだと思います。またワープロの場合は、予め決まっている大きさの紙に印刷することが前提となっています。

 対してネット上に公開するものは、単に文章と画像だけにはとどまらず、ボタンやメニュー、フォームの入力欄、SNS投稿のシェアなど様々な要素をレイアウトすることが必要です。さらに、どのようなサイズの画面に表示されても、それらが自動的にきちんとレイアウト(←ここが重要)されなければなりません。

 そのために便利なのが、ブロックエディターだと考えると分かりやすいと思います。

ブロックエディターの使い方(基本編)

文章と画像だけなら難しいことは何もない

 まずは、「投稿できるようになりましょう」ということで、段落ブロックと画像ブロックを使いながら、投稿文章・画像の入力から公開方法までを一通りデモンストレーションしてみました。

【動画】 WordPress 初めての投稿作成・前編(11分29秒)

【 動画の内容 】

  • 00:30 文章の入力方法
  • 01:05 ブロックの確認方法
  • 01:18 段落ブロック
  • 01:38 段落ブロックのツールバーの操作方法
  • 02:29 リンクの作成方法
  • 02:53 文字単位で文字色を変える方法
  • 03:13 ブロックの設定メニュー
  • 03:29 段落全体の文字色・背景色を変える方法
  • 03:57 文字の大きさ・行間幅の設定方法
  • 04:47 画像の挿入方法
  • 05:50 画像のアップロード方法
  • 06:04 画像ブロックの設定方法(大きさ・配置・角丸)
  • 07:47 公開前の確認方法(パソコン、タブレット、スマホの各サイズで確認)
  • 08:54 投稿の公開方法
  • 09:08 公開したページの確認方法
  • 09:27 投稿の設定メニューとブロックの設定メニューの切り替え
  • 10:00 公開したものを下書きに変更する(公開をやめる)方法
  • 10:22 ブロックのツールバーを固定表示にする方法
  • 11:08 編集画面から管理画面に戻る方法

編集画面(ブロックエディター)の操作と設定

 次の動画では、ブロックエディターの全体的なイメージをつかんでいただくために、便利機能などやや細かな操作方法を含めて、説明しています。

【動画】 WordPress 初めての投稿作成・後編(11分00秒)

【 動画の内容 】

  • 00:19 投稿の詳細設定
  • 00:29 「公開」には、3つの選択肢がある
  • 01:40 公開日時の設定方法
  • 02:45 テンプレートについて
  • 03:32 URL の設定方法
  • 05:56 アイキャッチ画像について
  • 07:19 抜粋について
  • 07:44 コメント欄の表示・非表示の設定
  • 08:38 ブロックの全リストと便利な使い方
  • 09:33 ブロックの「リストビュー」と便利な使い方

 いかがでしたか?簡単そうですよね!

 ワープロソフト使い勝手に慣れ親しんだ私達にとっては、最初のうちは使いにくいと感じるはずです。でも、ポイントを掴みさえすれば、すぐにでも使い始めることができますし、慣れてしまえば、こちらのほうが便利だと実感されるはずです。

ブロックエディターが不要な場合の対処方法

クラシックエディターに戻すには?

クラシック・ブロックを選択した際に表示される入力画面のスクリーンショット
クラシック・ブロックの入力画面

  インストール時はブロックエディターとなっている現在のワードプレスですが、”Classic Editor” プラグインをインストールして有効化すれば、いつでも以前のワープロスタイルの編集画面に変更することができます。

 また、わざわざプラグインをインストールせずとも、「クラシック・ブロック」を選択して、文章を打ち込むことも可能です。

 ページのレイアウトやデザイン的なことに関しての自由度が不要な場合であれば、慣れ親しんだやり方を敢えて変えることなく、ワードプレスを使い続けることができるようになっています。

ブロックエディターとクラシックエディタ―を使い分けることは可能?

 ひとつのサイト内に、クラシックエディタ―で作成したページとブロックエディターで作成したページの両方が混在しても、表示がおかしくなることはないというのが、札幌Geezerの理解です。

 クラシック・ブロックを選択して文章を入力した場合も、もちろん同様です。


参考:もうひとつの編集画面、テーマエディターについて

 余談になりますが、ワードプレスの標準テーマ で、”Twenty Twenty-Two” 以降のものには、新たな編集画面『テーマエディター』が実装されています。

 これは、テーマそのものについてもブロックでレイアウトを編集できる画面で、従来はプログラミングができなければできなかったことが、私たち一般ユーザにもできるようになってきた、ということを意味しています。

 ここで重要なのは、このテーマエディターの編集画面もブロックで構成されているということです。

 これまでにブロックエディターに慣れてしまっている方々には、なんとなくでも使い始められるようになっていますが、そうでない場合には苦労するはずです。その意味でも、ブロックエディターに慣れておくことは重要です。

 テーマエディターの概要については、WB-10:ワードプレスの新機能『フルサイト編集の概要』をご参照下さい。

この講座の要点

  • 現在のワードプレスの投稿(固定ページ)編集画面は、ブロックエディターと呼ばれているタイプになっている。
  • ブロックエディターになったことで、編集画面内でのデザインやレイアウトの設定の自由度が大幅に向上した。
  • ブロックエディターでも、文章と画像の組み合わせであれば、クラシックテーマと使い勝手はあまり変わらない。
  • ブロックエディターと、旧タイプのクラシックエディタ―とを使い分けることが可能(ひとつのサイトに共存可能)。
  • ページレイアウトを自由に設定するためのテーマエディターを使うためには、ブロックエディターに慣れていることが必須条件になっている。

ご質問・ご要望について

 ブロックの使い勝手は今後も便利になっていくと思いますが、そのことは同時に、細かな使い方が変わっていく可能性が大きいということでもあります。

 動画の内容についてお気づきのことがあれば、お問い合わせフォームからご連絡いただければ幸いです。

課題

1.投稿をひとつ作成して公開しよう

 動画の中で紹介したように、いつでも下書きに戻せますから心配ご無用です。というよりも、立ち上げたばかりのウェブサイトを誰かが見に来るようなことは、まあ、ありませんです。

2.設定しよう

 動画の中で紹介したふたつの設定は、覚えているうちに済ませておきましょう:パーマリンクの設定と、ディスカッションの設定です。

2.発信しよう

 「これは参考になった」あるいは何かの「インスピレーションを得た」ようなことがあれば、同じように感じる方が、あなたの周りにもいるかも知れません。学んだことをあなたの言葉で(←ここが重要)人に伝えようとすることで、それが自分のものになることを体験しましょう。


 

[ 前の講座へコースリストへ戻る次の講座へ ]