ブロックエディターの基本を覚えよう

ブロックエディターの基本を覚えようの画像

はじめに

第13章「固定ページを作ってみよう」では、WordPressで固定ページを1枚作ってみました。

その中で、

ブロック

という言葉が出てきました。

現在のWordPressでは、文章や画像、見出し、ボタンなどを、

一つひとつの「ブロック」として組み合わせてページを作る

のが基本です。

ブロックにはたくさんの種類があります。

しかし、最初からすべて覚える必要はありません。

今回は、ホームページ作りでよく使う、

  • 段落
  • 見出し
  • 画像
  • リスト
  • ボタン
  • スペーサー

を中心に触ってみましょう。

これだけでも、かなり多くのページを作れるようになります。

ブロックは「ページを作る部品」

ブロックエディターでは、ページ全体を一枚の大きな文章として編集するのではなく、

内容を部品に分けて組み立てます。

たとえば、

ページタイトル

見出し
文章
画像

見出し
文章
リスト

ボタン

というページなら、

それぞれが別のブロックです。

ブロックごとに、

  • 移動する
  • 削除する
  • 種類を変える
  • 設定を変更する

といったことができます。

つまり、

文章や画像を「部品」として扱える

のがブロックエディターの特徴です。

ブロックを追加する基本操作

新しいブロックを追加するときは、

「＋」ボタン

からブロックを選びます。

ブロック追加の「＋」を開いた画面のイメージ画像

一覧には多くのブロックがあります。

目的のブロックが見つからない場合は、検索欄へ、

  • 段落
  • 見出し
  • 画像
  • リスト

などと入力して探すこともできます。

また、文章を入力する場所で、

/

を入力すると、ブロックを検索して追加することもできます。

たとえば、

/画像

のように入力して画像ブロックを探せます。

最初は「＋」から選ぶ方法だけでも十分です。

1．段落ブロック

最もよく使うのが、

段落ブロック

です。

普通の文章を書くためのブロックです。

新しいページで本文を入力し始めると、基本的には段落ブロックとして文章が入力されます。

たとえば、

私たちは、髪の状態を確認しながら、一人ひとりに合わせた施術をご提案しています。

という通常の文章を書く場所です。

段落ブロックでは、

  • 太字
  • 斜体
  • リンク
  • 文字揃え

などの操作ができます。

ただし、

文章のすべてを太字にする

など、装飾を増やしすぎると逆に読みにくくなります。

強調したいところだけ使うようにしましょう。

Enterを押すと次のブロックへ進む

段落を書いたあとにEnterキーを押すと、次の段落ブロックへ進めます。

普段文章を書く感覚に近いので、難しく考える必要はありません。

一方、

同じ段落の中で改行だけしたい

場合には、Shift＋Enterを使う方法もあります。

ただし、初心者のうちは改行を増やしすぎず、

文章のまとまりごとに段落を分ける

ことを意識すると読みやすくなります。

2．見出しブロック

文章が長くなってきたら、

見出しブロック

を使います。

たとえば、

「初めての方へ」というページの中に、

  • 私たちが大切にしていること
  • ご来店までの流れ
  • よくあるご質問

という区切りを作るイメージです。

見出しブロックを追加した状態

見出しは、文字を大きく見せるためだけのものではありません。

文章の内容を整理し、どこに何が書いてあるのか分かりやすくするためのもの

です。

H2、H3とは？

見出しブロックを使うと、

  • H2
  • H3
  • H4

などの表示を見かけます。

これは、

見出しの階層

を表しています。

たとえば、

ページタイトル

H2　私たちが大切にしていること

H2　ご来店までの流れ

H2　メニューについて
    H3　縮毛矯正
    H3　ヘアカラー
    H3　トリートメント

のように、大きな話題の中に小さな話題を入れて整理します。

H2とH3の見出し階層のイメージ画像

最初は、

大きな区切りはH2、その中をさらに分けるならH3

くらいから始めれば十分です。

見出しの数字を、

「文字を大きくしたいから」

という理由だけで選ばないようにしましょう。

3．画像ブロック

ホームページでは、文章だけでなく写真や図も使います。

画像を入れるときに使うのが、

画像ブロック

です。

画像ブロックを追加した画面のイメージ画像

画像ブロックでは、

  • 新しい画像をアップロードする
  • メディアライブラリから選ぶ

といった方法で画像を追加できます。

一度WordPressへアップロードした画像は、メディアライブラリから再び利用できます。

画像は大きければよいわけではない

スマートフォンで撮影した写真は、そのままだと非常に大きなファイルになることがあります。

大きすぎる画像を大量に使うと、

ホームページの表示が遅くなる原因

になることがあります。

そのため、画像は必要に応じて、

  • サイズ
  • ファイル容量
  • 形式

などを整えてから使います。

画像の最適化については、後の章で詳しく扱います。

今は、

撮影した写真を何でもそのまま大量にアップロードしない

ということだけ覚えておきましょう。

代替テキストという項目

画像を選ぶと、

代替テキスト（alt text）

という項目を見ることがあります。

これは、画像を見ることができない場合などに、

その画像が何を伝えているのかを文章で補うための情報

です。

すべての画像に同じ文章を入れたり、検索キーワードを詰め込んだりするものではありません。

画像の内容や役割に合わせて設定します。

詳しい考え方は画像を扱う章で改めて説明します。

4．リストブロック

複数の項目を並べたいときは、

リストブロック

が便利です。

たとえば、

  • カット
  • カラー
  • 縮毛矯正
  • トリートメント

のような箇条書きです。

WordPressのリストブロックでは、

箇条書き

と、

  1. カウンセリング
  2. シャンプー
  3. 施術
  4. 仕上げ

のような、

番号付きリスト

を使うことができます。

情報を文章で長く並べるより、

項目として見せた方が分かりやすい内容

に使いましょう。

5．ボタンブロック

ホームページでは、読んでもらうだけでなく、

次の行動へ進んでもらう

ことがあります。

たとえば、

  • お問い合わせする
  • LINEで相談する
  • メニューを見る
  • アクセスを見る

などです。

その入口として使えるのが、

ボタンブロック

です。

ボタンには、

押したときに移動するリンク先

を設定します。

見た目だけボタンにしても、リンク先が設定されていなければ目的のページへ移動できません。

そのため、

ボタンの文字とリンク先をセットで考える

ことが大切です。

ボタンの言葉は「次に何が起こるか」を分かりやすく

ボタンに、

「こちら」

とだけ書くより、

  • メニュー・料金を見る
  • アクセスを見る
  • LINEで相談する
  • お問い合わせはこちら

など、

押したあとに何が起こるのか分かる言葉

にすると親切です。

ボタンのデザインについては、あとから整えれば大丈夫です。

まずは、

何のためのボタンなのか

を分かりやすくすることを優先します。

6．スペーサーブロック

ページを作っていると、

「ここにもう少し余白がほしい」

という場面があります。

そのときに使えるのが、

スペーサーブロック

です。

スペーサーブロックは、ブロックとブロックの間に空間を作ります。

ただし、

余白を作るために何個もスペーサーを積み重ねる

ような使い方は避けましょう。

テーマや各ブロックの設定でも余白を調整できる場合があります。

まずは、

必要な場所へ適度な空間を作るためのブロック

として覚えておけば十分です。

空白の段落を大量に入れて余白を作らない

見た目を空けたいからといって、

Enterキーを何度も押して、

空の段落を大量に作る

のはおすすめしません。

パソコンではきれいに見えても、スマートフォンでは不自然な余白になる場合があります。

余白には余白のための仕組みを使う。

これも、ホームページを崩れにくく作る考え方の一つです。

ブロックはあとから動かせる

ブロックエディターの便利なところは、

作ったあとでも順番を変えられる

ことです。

たとえば、

見出し
文章
画像

を、

画像
見出し
文章

へ変更することもできます。

ブロックを選択すると、移動するための矢印やドラッグ操作などが利用できます。

最初から完璧な順番で作る必要はありません。

一度作ってから、

読みやすい順番へ動かす

ことができます。

「リストビュー」を使うと全体が見やすい

ページのブロックが増えてくると、

「今どのブロックを触っているのか」

分かりにくくなることがあります。

そんなときに便利なのが、

リストビュー

です。

リストビューを開くと、ページ内にあるブロックが一覧で表示されます。

ブロックエディターのリストビューのイメージ画像

たとえば、

見出し
段落
画像
見出し
リスト
ボタン

という構造を一覧で確認できます。

ページが短いうちは使わなくても構いません。

しかし、ページが長くなるほど便利になります。

まずは6つだけ使えれば十分

WordPressには、ほかにも、

  • ギャラリー
  • カラム
  • カバー
  • グループ
  • 引用
  • テーブル
  • 動画
  • 区切り

など、多くのブロックがあります。

現在のWordPressにはさらに多くのブロックが用意されています。

でも、

ブロックの数を覚えることが目的ではありません。

初心者のうちは、

  1. 段落
  2. 見出し
  3. 画像
  4. リスト
  5. ボタン
  6. スペーサー

を使えるだけでも十分です。

必要になったときに、新しいブロックを一つずつ覚えていきましょう。

こんなページなら、この6つで作れる

たとえば、

「初めての方へ」

というページなら、

ページタイトル

見出し
段落

画像

見出し
段落

見出し
リスト

ボタン

という形で作れます。

特別な機能を使わなくても、

情報が整理されていれば、十分に読みやすいページ

を作ることができます。

デザインはあとから整えられる

ブロックエディターを触り始めると、

  • 文字の色
  • 背景色
  • 余白
  • 枠線
  • フォントサイズ
  • ボタンの形

など、たくさんの設定が目に入ります。

でも、最初から全部デザインしなくて大丈夫です。

まず、

内容を正しい順番で置く。

次に、

読みやすく整理する。

そのあとで、

見た目を整える。

この順番の方が、ホームページを作りやすくなります。

今回のポイント

  • WordPressでは文章・画像・見出しなどをブロックとして組み合わせる
  • ブロックは「＋」ボタンや / コマンドから追加できる
  • 段落ブロックは普通の文章を書くために使う
  • 見出しブロックは文章の構造を整理するために使う
  • H2・H3は見た目の大きさではなく、見出しの階層として考える
  • 画像ブロックではアップロードした画像やメディアライブラリの画像を使える
  • リストブロックは箇条書きや番号付きの手順に向いている
  • ボタンは文字だけでなく、移動先のリンクも設定する
  • スペーサーは必要な余白を作るために使う
  • 空の段落を大量に入れて余白を作らない
  • ブロックはあとから移動できる
  • ページが複雑になったらリストビューで構造を確認できる
  • 最初からすべてのブロックを覚える必要はない

今回の視点

ブロックエディターには、たくさんの機能があります。

でも、

使える機能を増やすことと、分かりやすいホームページを作ることは同じではありません。

見出しには見出しの役割。

画像には画像の役割。

ボタンにはボタンの役割。

余白には余白の役割があります。

「使えるから置く」のではなく、

「この情報を伝えるために、何を使うと分かりやすいか」

と考えてブロックを選びましょう。

Part 2｜WordPressの基本操作を覚える

前へ：第13章「固定ページを作ってみよう」

目次：初心者向け WordPressで作るホームページ完全Guide

次へ：第15章「WordPressのテーマとは何か？」