記事の中で話題が切り替わる場所に横線を入れたいときは、ブロックエディターの「区切り」ブロック（英語名 Separator、セパレーター）を使います。挿入するだけで横線が入り、線の種類・色・上下の余白を設定サイドバーで変えられます。この記事では、区切りブロックの挿入方法と各設定、見た目が思いどおりにならないときの確認点、空白だけを入れる「スペーサー」ブロックとの使い分けを説明します。
区切りブロックとは
区切りブロックは、HTMLの hr 要素を出力するブロックです。hr は単なる飾りの線ではなく、「ここで話題や場面が変わる」という区切りを表す要素として定義されています。そのため、画面読み上げソフトでは区切りとして読み上げられることがあります。
使いどころの例は次のとおりです。
- 本文と、記事末尾の補足・プロフィール・関連情報の境目
- 1つの記事の中で、性質の違う内容（手順と体験談など）を分ける場所
- 見出しを立てるほどではないが、話題が変わることを示したい場所
逆に、見出しごとに毎回線を入れる、余白を作るためだけに使う、といった使い方はおすすめしません。見出しで区切りは十分に伝わることが多く、線が多いとかえって読みにくくなります。
区切りブロックを挿入する手順
- 投稿の編集画面で、線を入れたい位置の「＋」（ブロック挿入ツール）をクリックし、「区切り」と検索して選びます。英語名の「separator」でも検索できます。
- 空の段落で「/区切り」または「/separator」と入力して選ぶ方法もあります。
- 空の段落で半角の「---」（ハイフン3つ）を入力して Enter キーを押すと、区切りブロックに変わります。
挿入後に位置を変えたい場合は、ブロックツールバーの上下の矢印か、ドラッグ用のハンドルで移動します。線は細いためクリックして選択しにくいことがありますが、画面左上の「リスト表示」から選ぶと迷わず選択できます。
区切りブロックの設定
区切りブロックを選択すると、右側の設定サイドバーに次のような項目が表示されます。項目の名前や並びはWordPressのバージョンやテーマによって異なる場合があります（2026年10月現在）。
スタイル
コアには3種類のスタイルがあります。
- デフォルト：短めの線。テーマによっては本文の幅いっぱいに表示されます。
- 幅広線：本文の幅に広がる線。
- ドット：線の代わりに点を3つ並べた表示。
どの長さ・太さで表示されるかは、テーマのCSSで決まる部分が大きいため、同じ「デフォルト」でもテーマによって見た目が違います。プレビューで確認してから選ぶと失敗を減らせます。テーマによっては独自のスタイルが追加されています。
色
「色」の設定で線の色を変えられます。テーマのカラーパレットから選ぶか、カスタムカラーを指定します。初期状態では本文の文字色に近い色や、薄いグレーになっていることが多く、背景色によっては線がほとんど見えないことがあります。背景が濃い場所に置く場合は、明るい色に変更します。
透明度の高い色を選ぶとかすかな線になり、区切りとして伝わりにくくなるため、背景との差が十分にあるかを確認してください。
余白（寸法）
「寸法」の設定で、線の上下の余白（マージン）を調整できます。区切りの前後が窮屈に見える場合は余白を広げ、間延びして見える場合は狭くします。
テーマが余白の値をプリセットとして用意している場合は、スライダーや段階で選ぶ形になります。数値を直接入力したい場合は、入力欄の横にある切り替えアイコンでカスタム値の入力に切り替えられることがあります。
スペーサーブロックとの違い
区切りと似た役割に見えるのが「スペーサー」ブロックです。違いは次のとおりです。
- 区切り：線を表示し、HTML上も「話題の区切り」として意味を持ちます。
- スペーサー：何も表示せず、指定した高さの空白だけを作ります。見た目の調整用で、意味は持ちません。
スペーサーは、挿入後に下端のハンドルをドラッグするか、設定サイドバーの高さの欄に数値を入れて空白の大きさを決めます。単位はピクセルのほか、テーマによっては em や rem などを選べます。
使い分けの基本は「話題が変わることを示したいなら区切り、見た目のすき間だけ欲しいならスペーサー」です。ただし、スペーサーをあちこちに入れると、あとからデザインを変えるときに1つずつ直す手間がかかります。ブロック同士の間隔を広げたいだけなら、まず各ブロックの「寸法」で余白を調整し、それでも足りない場合にスペーサーを使うと管理しやすくなります。
うまくいかないときの確認点
線が表示されない・見えにくい
線の色が背景色と近いと、挿入しても見えません。色を変更して確認します。テーマのCSSで線が非表示に近い状態になっている場合もあるため、スタイルを「幅広線」に変えて表示されるかも試してください。
線の長さを細かく変えたい
コアの区切りブロックには、線の長さをピクセルやパーセントで指定する項目はありません。長さはスタイルとテーマのCSSで決まります。特定の長さにしたい場合は、「高度な設定」の「追加CSSクラス」にクラス名を付け、テーマのカスタマイザーの「追加CSS」などで幅を指定する方法があります。
編集画面と公開ページで見た目が違う
編集画面と公開ページで読み込まれるCSSが異なることがあります。キャッシュ系のプラグインを使っている場合はキャッシュを削除し、公開ページで改めて確認します。
まとめ
- 区切りブロックは
hr要素を出力し、話題の切り替わりを示すためのブロックです。 - 挿入は「＋」、「/区切り」、空の段落での「---」＋Enter の3通りがあります。
- スタイルはデフォルト・幅広線・ドットの3種類で、実際の長さや太さはテーマで変わります。
- 線の色は背景との差に注意し、上下の余白は「寸法」で調整します。
- 空白だけが欲しいときはスペーサーを使い、まずは各ブロックの余白設定で足りないかを検討します。