SWELLの区切り線の使い方とおしゃれに整える5つのコツ

SWELLで区切り線を入れてみたものの、「なんだか薄い…」「デモサイトみたいな雰囲気にならない」とモヤモヤしていませんか？

この記事では、SWELLの区切り線の基本から、コピペで使えるCSS、フルワイドブロックで波線やななめ境界を作る方法まで、ひと通りまとめてお伝えします。

ざっくり言うと、「種類ごとに役割を分けて、最低限のCSSだけ当てておく」と、SWELLの区切り線は一気に整い、デザインも読みやすさもグッと良くなります。

SWELLで使える区切り線の種類を整理しよう

区切りブロック（hr）で本文を区切る基本

いちばん出番が多いのが、ブロックエディターの「区切り」ブロックです。記事の途中に線を入れて、段落と段落の切れ目を見せるためのもので、HTML的にはいわゆるhrタグにあたります。

全体像をざっくり整理すると、こんなイメージです。

種類	主な用途	出し方の例	調整方法のメイン
区切りブロック（hr）	本文中の段落の区切り	ブロック追加 → デザイン → 区切り	ブロック設定＋CSS
フルワイド境界線	セクション同士の境目	フルワイドブロックの境界線設定	ブロック設定
タイトルやメニューの縦線	サイトタイトル横の「｜」など	テーマカスタマイザーやメニュー設定	CSS

このあと説明していくカスタマイズの多くは、いちばん上の「区切りブロック（hr）」を対象にしています。記事本文の中でサクッと使う線は、基本的にここをいじると考えてOKです。

フルワイドブロックの境界線でセクションを区切る

次に、トップページやLP（ランディングページ）でよく使われるのが、フルワイドブロックの上下に付けられる境界線です。背景色の違うセクションの境目に、波線やななめ、ギザギザの形を付けられる、あのパーツですね。

こちらは、本文中のちょっとした区切りではなく、ページ全体の「セクションの始まりと終わり」を見せるための線です。存在感が強めなので、使う場所を決めておくとページがごちゃごちゃしにくくなります。

その他の「区切りっぽい」線も把握しておこう

細かいところだと、次のような「線」もあります。

• サイトタイトルのあとに付いている「｜」
• グローバルナビやヘッダーメニューの区切り線
• ウィジェットタイトルの下に出るライン

これらもCSSで調整できますが、この記事では「記事中」と「セクションの境目」に関わる線に絞って解説します。とはいえ、サイト全体で線のルールを決めるときに一緒に考えることになるので、頭の片隅に置いておいてください。

SWELL標準の区切り線が物足りなく感じる理由

「細い・短い・中央寄せ」で目立ちにくい

初期状態のhrは、とても控えめなデザインになっています。一見やさしいのですが、情報量が多い記事だと埋もれやすいのが正直なところです。

よくある状態をざっくりまとめると、こんな感じです。

項目	初期状態の傾向	読まれ方の印象
太さ	かなり細め	明るい画面だと背景になじみやすい
長さ	本文幅より短く、中央に寄っている	「区切り」より「ちょっとした飾り」に見える
色	薄いグレー系でコントラスト低め	テキストとのメリハリが弱くなる
余白（上下）	そこまで広くない	文章の流れを止める力が弱い

悪い意味ではなく、「とても控えめ」な作りなので、ボリュームが多い記事ほど区切りとしては気づかれにくくなります。

読みやすさとデザイン、どちらも中途半端になりやすい

区切り線には、本来いくつかの役割があります。

• 話題の切り替わりを視覚的に見せる
• 読者に「一息ついていい場所」を示す
• スクロール中の視線をいったん止める

線が弱すぎると、読者はずっと同じテンションで文章を追うことになり、そのぶん疲れやすくなります。結果として、途中で読むのをやめてしまうきっかけにもなりやすいです。

かといって、やたら太い線や真っ赤な線を多用すると、今度は線ばかりが目立ってしまい、これもまた読みにくさにつながります。大事なのは「きちんと区切るけれど、主張しすぎない」というバランスです。

区切りブロックの基本操作と簡単カスタマイズ

SWELLの区切り線を挿入する手順

区切り線の挿入方法自体はとてもシンプルです。ブロックエディター上で、次のどちらかの操作を行います。

手順	操作内容
方法1	「＋」ボタン →「デザイン」→「区切り」を選ぶ
方法2	段落で「—

方法2のショートカットは、一度慣れてしまうと手放せません。文章を書いていて「あ、ここで区切りたいな」と思ったタイミングで「—」を打ってEnterキーを押すだけで済むので、作業のリズムを崩さずに済みます。

ブロック設定パネルでできる範囲の調整

区切りブロックを選択すると、右側や上部のブロック設定パネルに、いくつかの項目が表示されます。

• 線のスタイル（実線・点線など）
• 線の配置（左寄せ・中央・右寄せ）
• 線の幅（幅広など）

まずはここだけで、「幅広」「実線」「少し濃いめのグレー」といった設定にするだけでも、区切り線としての役割を果たしやすくなります。あとでCSSを足す前提でも、この段階で基準となる見た目を作っておくと後がラクです。

まず試したい基本レイアウト例

私が個人ブログでよく使っている、無難で扱いやすい組み合わせはこんな感じです。

• 幅広の実線
• 太さはやや細め（1px〜2pxくらい）
• 色は本文より少し濃いグレー

これだけでも、「同じテーマなのに読みやすさが変わった」と感じることが多いです。CSSを触るのに抵抗がある場合は、まずブロック設定だけで「太さ・幅・色」をいじってみて、使いやすい組み合わせを探してみてください。

CSSでSWELLの区切り線を「いい感じ」にする方法

テーマを崩さないフェードラインのCSS例

定番のアレンジとして、両端が少し薄くなる「フェードライン」風の区切り線があります。例としては、次のようなCSSです。

.post_content hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.3), transparent);
  margin: 2.5em 0;
}

borderで線を描くのではなく、backgroundのグラデーションで線を表現しているのがポイントです。中央部分だけ少し濃くなるので、主張しすぎないのに、区切りとしてはちゃんと目に入ってくれます。

余白と太さで読みやすさを底上げする

区切り線の印象を決めるのは、デザインだけではありません。太さや上下の余白も、読みやすさに大きく関わってきます。

項目	読みやすくするポイント	注意点
太さ	1px〜2px程度が使いやすい	太くしすぎると見出しとケンカする
余白	上下2〜3emほど空ける	狭いと「区切り」として機能しにくい
色	本文より少し濃い／薄いグレー	真っ黒や強い原色は疲れやすい

特に余白は、実際にプレビューを見ながらスマホでの見え方を基準に調整するのがおすすめです。パソコンだけを見ていると、つい余白を詰めがちなので注意してください。

レスポンシブ対応でスマホ表示を微調整する

パソコンではちょうどよくても、スマホで見ると「少し間延びしているな」と感じることがあります。そういうときは、メディアクエリを使って、スマホだけマージンを少し狭めるのも一つの手です。

@media (max-width: 768px) {
  .post_content hr {
    margin: 2em 0;
  }
}

数値はサイトのフォントサイズや行間にもよるので、プレビューを見ながら感覚的に調整してOKです。「スマホでスクロールしたときのテンポ」を意識しながら微調整してみてください。

フルワイドブロックでセクション区切りをデザインする

フルワイドブロックの挿入と境界線の選び方

大まかな手順はこんな流れになります。

• フルワイドブロックを追加する
• 背景色を指定する
• 上下どちらに境界線を付けるか選ぶ
• 境界線の形（波線・ななめ・ギザギザなど）を選ぶ

境界線の形は、ざっくりとした印象で選ぶと決めやすいです。

形状	印象	合いやすいサイト
ななめ	動きがあり、スタイリッシュ	LP、サービス紹介ページ
波線	柔らかく、親しみやすい	ブログ、教室・スクール系
ギザギザ	ポップで元気な雰囲気	子ども向け、イベント系
円弧	やわらかく、上品	コーポレートサイト

どの形も使いすぎると主張が強くなりすぎるので、「ここはしっかり区切りたい」という場面を決めてピンポイントで使うのがコツです。

フルワイドにならないときのチェックポイント

フルワイドブロックを使っているのに、「なぜか全幅にならない」「境界線が端まで伸びない」というケースもよくあります。そんなときは次をチェックしてみてください。

特に、フルワイドブロックが別のブロックの内側に入ってしまっていると、実際にはコンテンツ幅の中でしか表示されません。ブロックツリー（アウトライン）で、フルワイドブロックが一番外側になっているかを確認してみてください。

LPやトップページでの使い方のコツ

LPやトップページで、フルワイドの境界線を「SWELLの区切り線」として活用するときは、次のようなルールを決めておくと全体が整いやすくなります。

「とりあえず全部のセクションに境界線を付ける」と、派手ではあるものの、主役であるコンテンツが埋もれやすくなります。まずは「ここだけは読んでほしい」という場所だけに絞って、そこから調整していくのがおすすめです。

用途別｜SWELL 区切り線デザインのパターン集

ブログ記事向けのシンプルパターン

雑記ブログや特化ブログなど、記事メインのサイトなら、落ち着いたシンプルパターンが使いやすいです。

用途	区切り線の種類	おすすめ設定例
記事中の小見出しの間	区切りブロック（hr）	フェードライン＋上下2.5em程度の余白
コラムや補足の終わり	区切りブロック（hr）	実線1px＋少し濃いグレー
記事の最後	区切りブロック（hr）	太さ2px＋下側だけ余白を少し広めに

ブログの場合は、ひとつのサイト内で「区切り線のデザインを統一する」ことがとても重要です。記事ごとに線のスタイルがバラバラだと、読んでいる人は無意識に違和感を覚えやすくなります。

LP向けの目立つパターン

商品やサービスを紹介するLPでは、フルワイドの境界線をうまく使うと、一気に「LP感」が出ます。

• ファーストビューの下をななめ境界で切る
• 「お客様の声」セクションを波線で囲む
• 最後のCTA（問い合わせや申し込み）の前だけギザギザ境界で強調する

ただ、全部のセクションを派手にしてしまうと、どこを見てほしいのか分かりにくくなります。いちばん読んでほしいセクションにだけ強いデザインを当て、そのほかは控えめにするくらいのイメージがちょうどいいです。

コーポレートサイト向けの控えめパターン

会社の公式サイトや事業紹介サイトでは、派手さよりも信頼感や落ち着きを優先したいことが多いはずです。その場合は、次のような組み合わせが扱いやすいです。

• 区切りブロックはグレーの実線1px、上下2em程度の余白
• フルワイド境界線は、円弧やなだらかな波線を控えめに使う
• 背景色は白〜淡いグレーの範囲におさめる

SWELLの区切り線だけを凝りすぎるよりも、「細めの線＋控えめな色」で全体のトーンをそろえたほうが、結果的に信頼感のあるデザインになりやすいです。

トラブルシューティング｜SWELL 区切り線がうまく出ないとき

CSSを追加したのに変化しない場合

追加CSSを書いたのに、区切り線の見た目が変わらない場合は、次のあたりを確認します。

• セレクタが実際のHTMLと合っているか（例：.post_content hr）
• 別のCSSに上書きされていないか
• キャッシュが残っていないか

特に、キャッシュ系プラグインやブラウザのキャッシュが効いていると、「直したのに変わらない」という状況になりがちです。一度キャッシュを削除したうえで、シークレットウィンドウなどで表示を確認してみてください。

フルワイドの波線や斜線がズレる場合

フルワイドブロックの境界線が、「思っていた場所ではない位置」に出てしまうこともあります。その場合は、次のポイントを見直してみましょう。

• フルワイドブロックの中に、余計な余白用のブロックが入っていないか
• 上下のどちら側の境界線を有効にしているか
• セクションの区切りになるコンテンツが、正しくそのブロック内に収まっているか

フルワイドブロック1つに対して「セクションをひとまとめに入れる」イメージで構成すると、境界線の位置関係が分かりやすくなります。

サイト全体のデザインがちぐはぐになる場合

区切り線のカスタマイズにハマってくると、他のパーツとのバランスが崩れることがあります。たとえば、

• 見出しの下線と、区切り線の太さがバラバラ
• ボックス装飾の枠線の色と、区切り線の色がケンカしている
• 場所によって線のスタイル（点線／実線）がコロコロ変わる

こういうときは、一度「線のルール表」を作ってしまうのがおすすめです。

パーツ	線のスタイル例	太さ・色の目安
見出し下線	実線	2px・ブランドカラー
区切り線（hr）	フェードライン風	高さ1px・グレー系
ボックス枠線	実線	1px・薄いグレー

このくらいラフな表でもいいので、一度決めておくと「この線はどうしよう」と迷う時間が減りますし、サイト全体のトーンも自然とそろってきます。

よくある質問

Q1. 区切り線は記事中に何本くらい入れるのがベストですか？

A. 目安としては、「スクロール2〜3画面につき1本」くらいを意識するとバランスが取りやすいです。長めの記事で区切り線を詰め込みすぎると、かえってテンポが悪くなってしまうこともあります。

まずは、「話題がガラッと変わるところ」「重要なまとめの前」など、役割がはっきりしている場所に絞って入れてみてください。そのうえで、プレビューを見ながら少しずつ増減させると、自分のサイトに合った本数が見えてきます。

Q2. CSSに自信がないのですが、それでもSWELLの区切り線を整えられますか？

A. もちろん整えられます。SWELLの区切り線は、ブロックエディターの設定だけでも、太さ・幅・色を調整することでかなり印象が変わります。

そのうえで、この記事に書いたような短めのCSSをコピペして、数値を少しずつ変えてみるやり方なら、コードに慣れていない方でも十分対応できます。いきなり完璧を目指さず、「まず1記事だけ試してみる」くらいの気持ちで触ってみてください。

Q3. フルワイドブロックの境界線と区切りブロック（hr）は、どちらを優先して使えばいいですか？

A. 用途ごとに役割を分けて考えるのがおすすめです。本文中の細かな区切りは区切りブロック（hr）、セクション単位の大きな切り替えはフルワイドの境界線、というように、最初にルールを決めておきます。

どちらか一方だけに寄せるより、「本文」と「セクション」で使い分けるほうが、ページ全体の構造が伝わりやすくなりますし、SWELLの区切り線も活きてきます。

まとめ｜SWELLの区切り線をルール化して一気に整えよう

この記事のポイントを振り返ります

今日からできる最初の一歩としては、まず1つ記事を選んで、区切りブロック（hr）の太さと余白だけを整えてみてください。ブロック設定と、簡単なCSSを1つ書くだけでも、読みやすさがかなり変わるはずです。

その感覚をつかめたら、ほかの記事やフルワイドの境界線にも同じ考え方を広げていけば、あなたのサイト全体の雰囲気は少しずつ、でも着実に洗練されていきます。