このサイトでは水平線のデザインをこんな感じにしています。
↑いいでしょう?笑
じつはこの水平線、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カスタマイズの支援をお待ちしています!
今後の記事執筆の励みになります!を支援のおかえしとして受け取ることができます。
その他のカスタマイズは下記ボタンから。
コメント