SWELLの区切り線が整う使い方|種類と設定で意外と変わる

SWELLで区切り線を入れてみたものの、「なんだか薄くてメリハリが出ない」「デモサイトのようなおしゃれな境界線にならない」と感じたことはありませんか。実は、SWELLの区切り線には2つの種類があり、それぞれ役割と設定方法が異なります。

この記事では、区切りブロック（hr）とフルワイドブロックの境界線という2つの線の使い分けを中心に、CSSでの調整方法やよくあるトラブルの対処法まで順を追って整理します。ブログやWordPressサイトを運営している方であれば、ここで紹介する設定を一度見直すだけで、記事の読みやすさが変わるはずです。

初めてSWELLを使う方や、これまで区切り線をあまり意識してこなかった方も、ぜひ参考にしてみてください。

SWELLで使える区切り線の種類と役割

SWELLで扱う「区切り線」は、大きく分けると2種類あります。それぞれ出し方も見た目も異なるため、まずは違いを整理しておくと、どこで何を設定すればよいかが分かりやすくなります。

区切りブロック（hr）とは何か

記事本文の途中に挿入する「区切り」ブロックが、いわゆるhrタグにあたります。段落と段落の切れ目を視覚的に示すための線で、ブロックエディターから「デザイン」→「区切り」と進むと挿入できます。

段落の途中で「—」（ハイフン3つ）を入力してEnterキーを押す方法でも追加でき、記事を書きながら素早く挿入できます。記事本文の中で話題が切り替わる場面や、まとめの前に使うケースが多いです。

フルワイドブロックの境界線とは何か

トップページやLP（ランディングページ）でよく見かける、背景色の違うセクション同士の境目に波線やなめらかな斜線が付いている、あのパーツがフルワイドブロックの境界線です。SWELLのフルワイドブロック（専用ブロック）を挿入し、サイドバーの設定から境界線の形状を選ぶだけで適用できます。

形状は「斜線・円・波・ジグザグ」の4種類から選べます。背景画像を設定している場合は境界線の形状変更が使えないため、背景色のブロックと組み合わせて使うことになります。

サイト内に存在するその他の「線」

サイトタイトル横の「｜」やグローバルナビの区切り、ウィジェットタイトル下のラインなど、サイト全体に「線」はほかにも存在します。これらはテーマカスタマイザーやCSSで調整するものです。

記事本文に直接関わるのは区切りブロック（hr）とフルワイドの境界線の2種類に絞られます。まずはこの2つを使い分けることを意識するだけで、サイト全体の線の役割が整理されます。

• 記事本文の区切りには「区切りブロック（hr）」を使う
• セクション同士の境目にはフルワイドブロックの境界線を使う
• サイト全体の線のルールを一度整理しておくと迷いが減る
• 2種類の役割を混在させないことがデザイン統一の基本

区切りブロック（hr）の挿入と基本設定

区切りブロックの挿入自体はとてもシンプルですが、初期設定のままでは目立ちにくいという点を理解しておくと、最初から扱いやすい設定に整えられます。ブロックの設定パネルで変えられる項目から確認していきます。

区切りブロックの挿入方法

ブロックエディターの「＋」ボタンから「デザイン」→「区切り」と進む方法と、段落ブロックで「—」（ハイフン3つ）を入力してEnterキーを押す方法の2つがあります。後者のショートカットは文章を書く流れを止めずに使えるため、慣れると便利です。

挿入後、ブロックを選択すると右のサイドバーに設定パネルが表示されます。「スタイル（実線・点線など）」「配置（左寄せ・中央・右寄せ）」「幅（幅広など）」といった項目を、ここで調整できます。

初期設定が物足りなく見える理由

SWELLの区切りブロックの初期状態は、太さが細く、長さが本文幅より短めで中央に寄った控えめなデザインになっています。情報量が多い記事ほど埋もれやすく、「線を入れたはずなのにどこか分からない」という状態になりやすいです。

区切り線には、話題の切り替わりを視覚的に示す、読者が一息つける場所を作る、スクロール中の視線をいったん止めるといった役割があります。線が弱すぎると読者は同じテンションで文章を追い続けることになり、長い記事ほど読むのが疲れやすくなります。

ブロック設定パネルで最初に調整したい項目

CSSを書く前の段階でも、「幅広」「実線」「本文より少し濃いグレー」に設定するだけで、区切り線としての役割を果たしやすくなります。まず幅を「幅広」にして中央寄せをやめるだけでも、印象が大きく変わります。

ブログ記事での基本として、1px〜2px程度の太さ、フルワイドに近い幅、上下2em〜2.5em程度の余白という組み合わせが扱いやすいです。まずはこの設定を試してから、必要に応じてCSSで微調整するという順番が効率的です。

• 「幅広」「実線」「濃いめのグレー」を設定するだけで見た目が変わる
• CSSを書く前にブロック設定パネルで基準の見た目を作っておく
• スマホで表示したときの見え方を必ずプレビューで確認する
• 太さは太くしすぎると見出しデザインとぶつかりやすい

CSSで区切り線をさらに整える方法

ブロック設定パネルだけでは対応しきれない細かい調整は、CSSで補うことができます。コードが初めての方でも、短いコードをコピペして数値を変えるだけで対応できる内容なので、一度試してみる価値があります。

追加CSSで設定する基本の場所

WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」に進むと、サイト全体に適用するCSSを書くことができます。ここに記述した内容はSWELLのテーマファイルを直接変更しないため、テーマのアップデートが来ても上書きされません。

記事本文内のhrタグを対象にする場合、セレクタは「.post_content hr」を使うのが一般的です。このセレクタを起点にすることで、投稿記事のコンテンツエリア内の区切り線だけに絞って設定を当てられます。

フェードライン風CSS例

両端が薄くなってグラデーションで消えていく「フェードライン」は、主張しすぎないのに区切りとして目に入りやすい定番のデザインです。borderで線を引くのではなく、backgroundのグラデーションで線を表現するのがポイントです。

具体的には以下のようなCSSを追加CSSに貼り付けるだけで適用できます。中央部分だけ少し濃くなるため、細い線でもきちんと区切りとして機能します。数値の「rgba(0,0,0,0.3)」の部分を変えると濃淡を調整できます。

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

パソコンではちょうどよく見えても、スマホで見ると余白が間延びして感じることがあります。そのような場合は、メディアクエリを追加してスマホサイズのときだけマージンを少し詰めるとバランスが取れます。

追加CSSに以下のような記述を加えると、画面幅768px以下の端末ではmarginを2emに変更できます。数値はサイトのフォントサイズや行間にも左右されるため、スマホでプレビューを確認しながら感覚的に調整するとよいでしょう。

CSSを追加したのに変化しない場合は、セレクタが実際のHTMLと合っているか、別のCSSに上書きされていないか、キャッシュが残っていないかを順に確認します。シークレットウィンドウで表示を確認すると、キャッシュの影響を切り分けやすくなります。

• 追加CSSへの記述はテーマのアップデートで消えない
• セレクタ「.post_content hr」で記事コンテンツ内のhrを対象にする
• フェードライン風CSSは数値1箇所変えるだけで濃淡を調整できる
• レスポンシブ対応はスマホプレビューを見ながら数値を微調整する
• 変化しない場合はキャッシュ削除とセレクタの確認を先に行う

フルワイドブロックで境界線をデザインする方法

フルワイドブロックの境界線は、セクション単位の大きな切り替えを視覚的に示すためのパーツです。SWELLのデモサイトで見かける波線やなめらかな斜線がこれにあたります。使える場面と設定の手順を整理します。

フルワイドブロックの挿入と境界線の設定手順

ブロックエディターの「＋」ボタンから「フルワイド」を選ぶと、薄いグレー背景のエリアが挿入されます。挿入後、ブロックを選択した状態でサイドバーを下にスクロールすると「上部の境界線の形状」「下部の境界線の形状」という項目が表示されます。

形状は「斜線・円・波・ジグザグ」の4種類から選べ、高さレベルはスライダーで調整できます。この設定は背景画像を設定していない場合のみ有効で、背景色と組み合わせて使うのが基本です。なお、フルワイドブロックはサイドバー非表示の1カラムレイアウトでの使用を前提としています。

境界線の形状と使いやすいシーンの目安

形状ごとに印象が異なるため、サイトの雰囲気に合わせて選ぶとデザインが整いやすくなります。波線は柔らかく親しみやすい印象で、ブログや教室・スクール系サイトに合いやすいです。斜線は動きがあってスタイリッシュな印象になり、LP（ランディングページ）やサービス紹介ページで使いやすいです。

ジグザグはポップで元気な雰囲気、円弧はやわらかく上品な印象になります。ひとつのページで使う境界線の形状は2種類程度に絞り、「ここだけは読んでほしい」というセクションに絞って使うとメリハリが出やすくなります。

フルワイドにならないときの確認ポイント

フルワイドブロックを配置したのに全幅で表示されない場合、いくつかの原因が考えられます。ブロックの配置設定が「フルワイド」になっていない、カラムブロックやグループブロックの中に入ってしまっている、コンテンツ背景を白にする設定がオンになっているといった点が主な原因です。

ブロックツリー（アウトライン）でフルワイドブロックが一番外側の階層にあるかを確認するのが確実です。カスタマイズの「基本デザイン」で「コンテンツの背景を白にする」がオンになっている場合は、1カラムレイアウトでもコンテンツ幅に収まる表示になります。

• 境界線の形状はサイドバーの「上下の境界線の形状」から設定する
• 背景画像を設定している場合は境界線の形状変更は使えない
• フルワイドにならない場合はブロックの階層をアウトラインで確認する
• 1ページで使う境界線の形状は2種類程度に絞る

用途別の区切り線デザインと統一のコツ

サイトの種類によって、区切り線のデザインに求められる役割は変わります。ブログ記事とLPではアプローチが異なるため、用途を意識して使い分けるとサイト全体がまとまりやすくなります。

ブログ記事で使いやすいシンプルなパターン

記事メインのブログサイトでは、区切りブロック（hr）を中心に「落ち着いていて主張しすぎない」デザインを基本にするとよいでしょう。フェードライン風のCSS1つを記事全体に統一して適用するだけで、デザインの一貫性が保てます。

記事中に区切り線を入れる目安は「スクロール2〜3画面につき1本」程度が扱いやすいです。詰め込みすぎるとテンポが悪くなるため、話題がガラッと変わる箇所や重要なまとめの前など、役割がはっきりした場所に絞って使うとよいでしょう。

LPやトップページで使うフルワイド境界線

サービス紹介や商品紹介のLPでは、フルワイドブロックの境界線を効果的に使うと、セクションの切り替わりが一目で伝わります。ファーストビュー直下だけ斜線で区切る、「お客様の声」セクションの前後だけ波線にするなど、使う場所をあらかじめ決めておくのが実用的です。

すべてのセクションに派手な境界線を付けると、主役であるコンテンツが埋もれやすくなります。「ここだけは見てほしい」という場所に強いデザインを当て、そのほかは控えめにするくらいのバランスが読みやすいページにつながります。

サイト全体の線をルール化する方法

区切り線のカスタマイズが進むにつれて、見出しの下線やボックス装飾の枠線との色や太さがちぐはぐになることがあります。こういったときは、「線のルール表」を簡単に作っておくだけで整理しやすくなります。

たとえば「区切り線（hr）はフェードライン1px・グレー系、見出し下線は2px・テーマカラー、ボックス枠は1px・薄いグレー」といったラフな決め事でも、ルールがあるだけで迷う時間が大幅に減ります。サイト全体で線の種類を2〜3パターンに絞ることが、統一感のあるデザインへの近道です。

Q：区切り線のCSSを書いたが変化しない。どこを確認すればよいですか。
A：まずセレクタ（例：.post_content hr）が実際のHTMLのクラスと一致しているかを確認します。次にブラウザのキャッシュを削除し、シークレットウィンドウで再確認してみてください。

Q：フルワイドブロックと区切りブロックのどちらを優先すればよいですか。
A：用途で使い分けるのが基本です。記事本文中の細かな区切りは区切りブロック（hr）、ページ内のセクション単位の切り替えはフルワイドの境界線、というルールを最初に決めておくと迷いにくくなります。

• ブログ記事はフェードライン風のhr一種類を記事全体に統一する
• LPはフルワイドの境界線を「ここぞ」という場所だけに絞って使う
• 見出し下線・区切り線・ボックス枠の3点をルール化しておく
• サイト全体の線の種類は2〜3パターンに絞ると統一感が出やすい

まとめ

SWELLの区切り線は、記事本文中の「区切りブロック（hr）」とセクション間の「フルワイドの境界線」という2種類を役割で使い分けることが、デザインを整えるための基本です。

まず試してほしいのは、区切りブロックを1つ挿入して、ブロック設定パネルで「幅広・実線・少し濃いグレー」に変えてみることです。CSSを書かなくても印象が変わることが多く、そこから少しずつ調整を加えていくと無理なく整えられます。

区切り線はあくまでもコンテンツを引き立てるための脇役です。線のルールを一度決めてしまえば、記事を書くたびに悩む必要がなくなります。自分のサイトに合った「ちょうどよい区切り線」を探してみてください。

当ブログの主な情報源

• 消費者庁：SNSなどを通じた投資や副業といったもうけ話にご注意ください
• 総務省 公式ウェブサイト
• 情報処理推進機構 公式ウェブサイト