このサイトでは水平線のデザインをこんな感じにしています。
↑いいでしょう？笑
じつはこの水平線、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.jp
その他のカスタマイズは下記ボタンから。
コメント