この章では、WordPressのブロックエディターの基本を学びます。
この講座ではクラシックテーマ制作を中心にしますが、投稿や固定ページの本文編集ではブロックエディターを使います。
そのため、テーマ制作とブロックエディターの関係を理解しておくことが大切です。
ブロックエディターとは
ブロックエディターは、文章、画像、ボタン、カラムなどをブロック単位で配置する編集画面です。
以前のように大きな本文欄へ文章を入れるのではなく、段落、見出し、画像などを部品として扱います。
よく使うブロックは次の通りです。
- 段落
- 見出し
- 画像
- リスト
- ボタン
- カラム
- グループ
- テーブル
- 埋め込み
ブロックを使うことで、管理画面からある程度レイアウトを作れます。
段落と見出し
文章の基本は段落ブロックと見出しブロックです。
見出しは、見た目ではなく構造で使います。
固定ページの本文内でも、h2、h3の階層が自然になるようにします。
テーマ側でページタイトルをh1として出す場合、本文中の最初の大見出しはh2から始めることが多いです。
画像と代替テキスト
画像ブロックでは、画像だけでなく代替テキストも設定します。
代替テキストは、画像が表示されない時やスクリーンリーダーで使われます。
クライアントが更新する場合でも、画像の代替テキストの考え方を伝えておくと、サイトの品質を保ちやすくなります。
カラムとグループ
カラムブロックやグループブロックを使うと、ある程度のレイアウトを管理画面上で作れます。
ただし、自由に使いすぎると、デザインが崩れたり、ページごとに見た目がばらついたりします。
実務では、次のように考えます。
- 自由入力させる範囲を決める
- 使ってよいブロックを整理する
- よく使うレイアウトはパターン化する
- デザイン固定部分はテーマ側で作る
ブロックエディターの自由度は便利ですが、運用しやすさとのバランスが必要です。
ボタンブロック
ボタンブロックは、問い合わせ導線や資料請求リンクなどによく使います。
ただし、ボタンの色や余白を編集者が毎回自由に変えると、サイト全体の統一感が崩れます。
テーマ側やエディター設定で見た目を整えるか、ブロックパターンとしてあらかじめ用意しておくと運用しやすくなります。
テーマ側のCSSとの関係
ブロックエディターで入力した内容は、公開画面ではテーマのCSSの影響を受けます。
たとえば、段落、見出し、画像、リスト、テーブルの余白や文字サイズは、テーマ側で整えます。
.entry-content h2 {
margin-top: 48px;
font-size: 28px;
}
.entry-content p {
line-height: 1.8;
}
.entry-content img {
max-width: 100%;
height: auto;
}本文エリアに共通スタイルを用意しておくと、ブロックで入力された内容も読みやすくなります。
自由度と崩れにくさ
ブロックエディターは自由に編集できる反面、崩れやすくもなります。
たとえば、次のような運用は注意が必要です。
- 色や文字サイズを編集者が自由に変更する
- カラムを複雑に組みすぎる
- 余白をブロックごとに毎回調整する
- 同じようなCTAをページごとに手作業で作る
よく使う見せ方は、ブロックパターンとして用意すると安定します。
この章のまとめ
- ブロックエディターは、本文をブロック単位で編集する仕組み
- クラシックテーマでも、投稿や固定ページの本文でブロックエディターを使う
- 自由度を高くしすぎると、ページごとに見た目がばらつきやすい
- テーマ側のCSSで本文エリアの見た目を整える
- よく使うレイアウトは、ブロックパターン化すると運用しやすい