ブロックエディターの使い方とサンプル

WordPressでは記事の本文を作成する際に、文章や画像などをブロックという単位で管理するブロックエディターという機能を使用します。

下記は、各ブロックのサンプルです。記事作成の参考にしてください。

まず、上記は【区切り】ブロックを使用しています。ラインを１行引かれるイメージです。

区切りブロックは、コンテンツの間を視覚的に区切りたいときに使います。
セクションのまとまりごとに区切り線を入れて、読みやすくしたいときなどに有効的です。

次に、【段落】ブロックについて説明します。

段落ブロックは、一般的な文章・説明文を書くときに使用します。
Wordやメモ帳で書く文章と同じイメージです。
※今この文章を書いているのも段落ブロックです。

文章を書く際に注意してほしいのが、段落と改行の違いです。
「Enter」で新しい段落ブロックが自動で作成されます。
「Shift + Enter」で同じ段落内に改行できます。（段落を増やさない）

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

見出しは、コンテンツを階層的に整理するために使います。
SEO的にも重要で、H2〜H4を適切に使うと検索エンジンが内容を理解しやすくなります。

H2 | セクションのタイトル（大見出し）

上記は【見出し】ブロックの【H2】を使用しています。
H2は主に、ページ内の大きな区切りの見出しとして使用します。

上記は【見出し】ブロックの【H3】を使用しています。
H3は主に、H2内の個別項目の見出しとして使用します。

上記は【見出し】ブロックの【H4】を使用しています。
H4は主に、H3内のさらに細かい補足見出しとして使用します。

次に、【リスト】ブロックについて説明します。

リストは、複数の要素を箇条書きで整理したいときに使います。
説明文や手順を分かりやすく提示できます。
普通のリスト（・）や番号付きリスト（1.）を選べます。

次に、【画像】ブロックについて説明します。

画像ブロックは、写真やバナー画像などを挿入するときに使います。
アップロード、メディアライブラリ、URL指定のいずれかで挿入することができます。

小さい画像の場合、配置も選択してレイアウトを整えてください。
下記は「配置」を「中央揃え」にした場合の配置になります。

次に、【テーブル】ブロックについて説明します。

テーブルブロックは、料金表や比較表、スケジュール表など、行と列で情報を整理したいときに使います。

※列を増やしすぎると、スマホの時に見にくくなってしまうので注意してください。

次に、【カラム】ブロックについて説明します。

カラムブロックは、横並びレイアウトを作りたいときに使います。
例：画像とテキストを左右に並べる、3つの特徴を並べる、など。
各カラム内に段落・画像など、他のブロックを入れられます。

例えばこれは「50/50」のカラムを使用し、左に画像を、右に段落を使用したサンプルになります。

PCだと横並びになりますが、スマホだと左→右の順に縦並びになります。
スマホのときにどういう表示になるのかも踏まえて、カラムを適切に使用してください。

最後に、【スペーサー】ブロックについて説明します。

スペーサーブロックは、コンテンツの間に余白（スペース）を調整したいときに使います。
↓この下の余白はスペーサーブロックを使用して作られています。

↑ここまでの余白がスペーサーブロックです。
高さ100pxで作られています。
視覚的に余白が調整されて便利ですが、スマホにした場合も同じ高さが余白となります。
PCよりも広く感じられるため、あまり大きな余白にならないよう注意してください。

以上がよく使用されるブロックの紹介と使用サンプルになります。

どのブロックを選ぶかで、記事の読みやすさや印象が大きく変わります。
投稿を作成するときは、目的に合ったブロックを選びながら、
読み手にとって見やすく・分かりやすい構成を意識してみてください。