【WordPress】ブロックエディタの使い方 – 基本編 –

WordPress
よーすけ
よーすけ

WordPressでWebサイトを運用されている方に質問ですが、WordPressの投稿画面ってすごく使いにくくないですか?

名称をブロックエディターというのですが、投稿画面の各種UIも、チュートリアルが特にないのでわかりづらいですし、文章を書いたり、画像を掲載するのもわかりにくい…

僕は、WordPressの投稿画面が今の状態になった際に、率直にそう感じました。

しかし、しっかりと使い方を理解すれば、ただ文章を書くだけのエディターよりも間違いなく使いやすく、スピーディーにページの作成をすることが可能です!

今回は、そんなWordPressの投稿画面に採用されている、ブロックエディターの使い方について、基本編として紹介をさせていただきます。

これからWordPressを触るという方や、現在WordPressを運用していて、使いにくさを感じているという方はぜひこちらの記事をご覧ください!

ブロックエディターとは

ブロックエディターは、WordPressで「投稿」や「固定ページ」で新規ページを作成する際に使用するエディターになります。

2018年に旧エディター(クラシックエディター)から、正式名称Gutenberg(グーテンベルク)というブロックエディターになりました。

そもそもエディターとは、以下のようなものを指します。

編集用アプリケーションプログラムの総称。文字データを扱うことからワープロ・ソフトと似ているが、主にプログラムを作成するためにつくられたもの。単にエディターーという場合、文字情報の編集を目的とするテキストエディターーを指す。ワープロ・ソフトに比べて規模が小さく、市販ソフトのほか、インターネットで配布されているオンラインウェアも多い。テキストエディターーのほか、画像を編集するグラフィックエディターー、音楽を作成する音楽エディターー、HTMLやCGIを作成するためのHTMLエディターーなど、さまざまな種類のエディターーがある。

出典元:コトバンク

ということで、有名なものだと、Windowsのパソコンに入っている「メモ帳」や、MicrosoftのWord(ワード)などは、文字を扱うエディターの一種ですね。

さまざまな用途に対してエディターという言葉が使われていますがWordPressのブロックエディターは、文章や画像などのページのコンテンツを作成、編集するためのものだと思えばOKです。

このブロックエディターの特徴として、文章や画像といったコンテンツを、それぞれ一つのブロック(かたまり)として組み立てていくものとなっています。

一つひとつがブロックで構成されている

この特徴の利便性については、別のセクションにてより理解できる形でご説明していきます。

投稿・固定ページを作成する流れ

投稿や固定ページを作るためにはこのような流れでページを作成していきます。

ページ作成の流れ

この過程で、ブロックエディターを扱い、コンテンツ部分を作成したり、記事の公開設定などを行っていく形になります。

投稿、固定ページともに、ページを作成する方法は別の記事でまとめていますので、こちらをご覧ください。

基本的なブロックを覚える

では、さっそくブロックエディターを使って、ページのコンテンツを作っていきましょう。
今回の記事では、ページを作るうえで使用頻度の高いブロックを4つご紹介します。

よーすけ

ブロックエディターの操作画面の解説はこのあと説明します。
まずは、操作画面をより理解するために、まずはブロックの概念をつかみましょう。

これから紹介する4つのブロックは、それぞれ投稿画面の上部にある青いプラスマークをクリックし、各種ブロック選択画面より使用していきます。

WordPress投稿画面

段落ブロック

まずは、段落ブロックについて説明します。

WordPress投稿画面

段落ブロックとは、その名の通り、文章の段落を作成する場合に使用するブロックです。

投稿も固定ページも、ほぼ必ず文章が入力されるはずですので、その文章の段落ごとにこの段落ブロックを使用することになります。
おそらく一番利用されるブロックです。

段落ブロックの使用方法

ブロックの選択画面から「段落」を選択しするか、コンテンツエリアで「Enterキー(改行)」を行うことで使用することができます。

WordPress投稿画面

段落ブロックを選択中、「Enterキー」を入力すると改行ではなく新しい段落ブロックを生成します。
もし、一つの段落ブロック内で文章の改行を行いたい場合は、「Shiftキー+Enterキー」を入力して、段落ブロック内で文章の改行を行いましょう。

WordPress投稿画面

また、段落ブロックは、テキストの左寄せ・中央寄せ・右寄せを指定することができます。

WordPress投稿画面

見出しブロック

次は、見出しブロックについて説明します。

WordPress投稿画面

見出しブロックは、文章の見出しになる箇所に対して使用するブロックです。

見出しは、文章や情報を適切に区切り、その内容を簡潔に表す項目としての役割があります。そのため、投稿や固定ページにおいても欠かせない存在です。

なので、段落ブロックに次いで、使用頻度の高いブロックとなります。

見出しブロックの使用方法

ブロックの選択画面から「見出し」を選択することで使用することができます。

WordPress投稿画面

見出しには情報の親子関係、入れ子関係によって、大見出し・中見出し・小見出しのようにいくつかの種類があります。

具体的には、H1〜H6までの6段階の見出しが用意されているので、文章構造によって、使用する見出しの大きさを使い分けましょう。
※見出しを適切に用いることは、Googleのサイト評価にもつながっていきます

WordPress投稿画面

段落ブロックと同様、左寄せ・中央寄せ・右寄せも可能という点も覚えておきましょう。

画像ブロック

次は画像ブロックです。

WordPress投稿画面

画像ブロックは、図や写真などの画像を用いたい場合に使用するブロックです。
わかりやすいページを作るためには適宜画像を用いると効果的ですので、こちらも利用頻度の高いブロックといえます。

画像ブロックの使用方法

ブロックの選択画面から「画像」を選択することで使用することができます。

WordPress投稿画面

「アップロード」から掲載したい画像をアップロードするか、すでにアップロードされた画像をメディアライブラリから選ぶ、画像のURLを直接挿入する方法があります。

WordPress投稿画面

掲載した画像は、その画像の見出しないし説明文となるキャプションを入力することができます。

WordPress投稿画面

他にも

  • 画像の配置変更
  • 画像へのリンク設定
  • 画像の切り抜き
  • 画像の上にテキストの配置
  • デュオトーン加工

などが行なえます。

WordPress投稿画面

また、画像に関しては右側のサイドバーから以下の設定も行えます。

  • 画像の角丸などのスタイル指定
  • Altテキストの指定
  • 画像サイズの指定
  • 寸法指定
WordPress投稿画面

特に、「Altテキストの指定」は重要です。
これは、画像が表示されない場合にここに入力したテキストが画像の代わりに表示され、画像の説明になることや、Googleの検索エンジンのクローラーに画像の内容を伝える役割も果たしています。

WordPress投稿画面

リストブロック

最後はリストブロックです。

WordPress投稿画面

リストブロックは、何か情報をリスト形式で掲載したい場合に使用するブロックです。
箇条書きで項目をまとめる場合にも利用できます。

リストブロックの使用方法

ブロックの選択画面から「リスト」を選択することで使用することができます。

WordPress投稿画面

1つ目の項目を記入した後、「Enterキー」で改行をすることで、リストを増やすことができます。

WordPress投稿画面

また、リストの文頭で「Spaceキー」を入力することで、インデントをズラすことができます。

WordPress投稿画面

リストの種類も、

  • 箇条書きリスト
  • 番号付きリスト

と選ぶことができるので、手順などを記したい場合は「番号付きリスト」を選択してもよいでしょう。

WordPress投稿画面

まず、この4つのブロックを扱うことができれば、簡単なページ構成を作成することができます。

ブロックエディター(投稿画面)の画面説明

では、基本的なブロック4つを覚えたうえで、ブロックエディターの投稿画面の画面説明を行っていきます。

ブロックエディターの投稿画面は、大きくこのように分けることができます。

WordPress投稿画面

それぞれ、以下のような名称となります。

No名称
No1WordPressエディタートップメニュー
No2ブロックエリア※正式名称ではありません
No3エディター
No4ブロックツールバー
No5WordPressエディターサイドバーメニュー

それでは、順番に解説していきます。

WordPressエディタートップメニュー

投稿画面の上部が、「WordPressエディタートップメニュー」となります。

WordPress投稿画面

それぞれの機能を紹介します。

No機能
No1クリックすると管理画面(ダッシュボード)に戻ります
No2ブロックを追加するため、ブロックエリアを表示します
No3ブロックの編集モードと、選択モードの切り替えを行います
No4ブロックの編集操作の取り消しとやり直しを行います
No5エディター内の文字数・見出し数・ブロック数などの情報や、見出しなどの文書構造を確認できます
No6エディターに使われているブロックをリスト表示ができます
No7現在のページの制作状況を下書き保存したり、公開ページを下書きに戻したりできます
No8エディターの内容を実際のページイメージでプレビューできます
No9ページを公開したり更新したりできます
No10WordPressエディターサイドバーメニューの表示非表示が行えます
No11各種投稿画面のカスタマイズが行えます

ブロックエリア

これは正式名称ではないのですが、ブロックを追加するためのエリアをブロックエリアとしました。

WordPress投稿画面

ブロックエリアには、今回紹介した4つのブロックだけでなくさまざまなブロックが用意されています。

応用編となる記事では、より実践的なブロックの紹介やその使い方などもご紹介する予定なので、記事の公開をお待ちください。

エディター

文章を書いたり、画像を掲載したりと、ページのコンテンツを作成する部分がエディターになります。

WordPress投稿画面

ここで、ブロックを用いたページの作成を行っていきます。

ブロックツールバー

エディターにブロックを配置した際に出現するのがブロックツールバーです。

WordPress投稿画面

ブロックツールバーは以下のような構成になっています。

No機能
No1ブロックを変更したい場合にここから選択できます
No2ドラッグ&ドロップでブロックの位置を動かせます
No3上下矢印でブロックの位置を動かせます
No4そのブロック専用のカスタマイズ項目です
No5テキスト系のブロックに太字やリンクなどの装飾を施します
No6ブロックのコピー・削除・移動などが行えます

各ブロックに応じたカスタマイズ設定の項目が用意されているだけでなく、よく使用するブロックを定型文のように登録する機能などもあります。

このあたりも応用編となる記事の方で詳しく説明いたします。

WordPressエディターサイドバーメニュー

画面右側のサイドバーが、WordPressエディターサイドバーメニューになります。

WordPress投稿画面

WordPressエディターサイドバーメニューは、ページを公開するにあたって行う設定やブロックの詳細設定などを行います。
なお、固定ページの場合は項目が投稿と異なります。

詳しくは以下のような構成になっています。

No機能
No1ページの公開状態の変更や公開日時などの設定が行えます
No2パーマリンクと呼ばれる、そのページのURLとなる文字列の項目です
No3ページのカテゴリを選択できます
No4ページのタグを入力・選択できます
No5ページのアイキャッチ画像を設定できます
No6そのページを要約した文章を設定できます
No7そのページでコメントやトラックバックを許可するか設定できます
No8そのページに親子関係をもたせることができます

まとめ

今回は、WordPressのエディターであるブロックエディター(Gutenberg)の説明と、基本的な4つのブロックをご紹介、投稿・固定ページの投稿画面の画面説明を行いました。

記事を読む前よりも、WordPressの投稿画面について親しみを持っていただけたのではないでしょうか?

今回ご紹介したブロックを使いながら、まずは投稿画面に慣れていただくことでブロックエディターの使いやすさを少しずつ実感していっていただければと思います。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
よーすけ

よーすけ
グロースハッカー / デザイナー / ディレクター

よーすけ
グロースハッカー / デザイナー / ディレクター

すべて平均点より一歩上ができる器用貧乏。という言葉がピッタリな人。 Webデザイン・HTML/CSSコーディング・ディレクション/企画・ライティング・動画撮影/編集といった幅広い領域のWeb制作(+管理職)を経験してきたため、さまざまな視点を持ち合わせている強みがあります。 声優の高野麻里佳さんが大好きです!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。