ブログにおしゃれな水平線＜hr＞を入れるCSSデザインカスタマイズ

このサイトでは水平線のデザインをこんな感じにしています。

↑いいでしょう？笑

じつはこの水平線、CSSで一瞬で実装できるんです。

アイキャッチ画像ではCocoonとしていますが、他のWordPressテーマでも使用できるはずです。

ブログにおしゃれな水平線＜hr＞を入れるCSSデザインカスタマイズ

下のコードをCSS（style.css）内に記述します。

main hr{
    margin: 2rem auto;
    width: 7rem;
    border: 0;
    border-top: 0.5rem dotted #ccc;
}

解説

セレクタ部分でmainタグ内のhr要素を指定しています。

marginプロパティを2rem autoにすることで、上下の余白は2文字分に、左右の余白は自動（中央寄せ）にしています。

widthでは水平線の幅を。ここでは7文字分の幅にしています。

border: 0;では規定の線を削除しています。

border-topでは0.5remの幅の点線（dotted）を、#ccc（灰色）で引くように指定しています。

いかがだっただろうか。

当サイトでは無料WordPress用テーマCocoonのカスタマイズ方法を紹介しています。

よろしければ以下から参考にしてみてくださいね。

【支援お待ちしております！】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）

継続的な更新・サポートのためにご支援お願いいたします……！

▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！

サイトに掲載するCSSカスタマイズの支援をお待ちしています！ - polca（ポルカ）

"今後の記事執筆の励みになります！"を支援のおかえしとして受け取ることができます。

polca.jp

その他のカスタマイズは下記ボタンから。