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

Cocoonカスタマイズ

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


↑いいでしょう?笑

じつはこの水平線、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(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

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

コメント