SWELLの区切り線（hr）を読みやすく整えるための実践カスタマイズ | ChatGPTとの協働で完成したデザイン事例

---

1. 課題の発見

SWELLの初期状態では、
区切り線（hr）が薄く、短く、視覚的な区切りとして弱い。
文章構造が分かりづらくなるケースがある。

---

2. ゴール設定

• 記事幅いっぱいで表示
• 視認性が高く、主張しすぎないデザイン
• SWELLの世界観と調和するスタイル

---

3. ChatGPTとの改善プロセス（エッセンス）

• 初期案：線を濃くする／太くする → 野暮ったい
• 長さ調整：短く表示された → ブロック側のwidthが勝っていた
• 美しさ追求：フェードを導入 → SWELLに馴染む
• スマホ最適化：上下余白＋1pxラインに調整
• 最終調整：!importantで幅指定を確実に上書き

---

4. 完成したスタイルシート（コピペ可）

/* SWELL：読みやすいフェード区切り線（最終版） */
.wp-block-separator.has-alpha-channel-opacity {
    border: none !important;
    height: 1px !important;
    margin: 2.5em 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 0, 0, 0.45),
        transparent
    ) !important;
}

---

5. 授業で伝えるポイント

• SWELLは「シンプル＝可読性重視」だが、用途に応じて線の強さは調整可能
• wp-block-separator の挙動はブロック幅の影響を強く受ける
• カスタマイズ時は テーマの美学と“文章のリズム”の両方を考える
• ChatGPTを“デザインパートナー”として使うことで再現性が高まる

---

6. まとめ

この区切り線デザインは、

• 読みやすさ
• 美しさ
• SWELLとの整合性
  を同時に満たす「実践的カスタマイズ」の好例となる。

授業やサポートの現場で
**「まずはこれを入れておけば間違いないCSS」**として共有できる内容。