ブログのシンプルな見出し用CSSサンプル-コピペで貼り付け │ Mutakkoのブログ

ホームページやブログで見出しは必須の要素ですね。

ここでは、シンプルなデザインの見出し用CSSサンプルを紹介します。コピペでそのまま貼り付けることができます。

気に入った見出しがあれば使って下さい。（この記事へのリンクも自由です）

WordPressに利用する場合このサンプルCSSをWordPressの見出しに利用する場合は以下の記事を見て下さい。

mutakko.info

【WordPress】LION BLOGのCSSで見出しのデザインをカスタマイズ

LION BLOG（ライオンブログ）やLION MEDIAを使っていると、見出しを見栄え良くカスタマイズしたくなりませんか？LION BLOGに限らずブログを書いている人は、訪問者に読んでもらうために書いているわけですから、...

1. シンプルな見出し
2. まとめ

シンプルな見出し

アンダーライン

See the Pen <a href="https://codepen.io/Mutakko/pen/JBEPoW/">JBEPoW</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

左と下にライン

See the Pen <a href="https://codepen.io/Mutakko/pen/RBKbry/">RBKbry</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

左にライン

See the Pen <a href="https://codepen.io/Mutakko/pen/djNbXZ/">djNbXZ</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

See the Pen <a href="https://codepen.io/Mutakko/pen/xJgKgd/">xJgKgd</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

下に点線

See the Pen <a href="https://codepen.io/Mutakko/pen/ZjLzyW/">ZjLzyW</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

上下にライン

See the Pen <a href="https://codepen.io/Mutakko/pen/KBaPGz/">KBaPGz</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

See the Pen <a href="https://codepen.io/Mutakko/pen/GBrKzL/">GBrKzL</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

二重線

See the Pen <a href="https://codepen.io/Mutakko/pen/bjgbXd/">bjgbXd</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

左に大きいライン

See the Pen <a href="https://codepen.io/Mutakko/pen/zLNYrW/">zLNYrW</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

左に大きいラインと下線

See the Pen <a href="https://codepen.io/Mutakko/pen/pZRoNw/">pZRoNw</a> by Mutakko (<a href="https://codepen.io/Mutakko">@Mutakko</a>) on <a href="https://codepen.io">CodePen</a>.

WordPressに利用する場合このサンプルCSSをWordPressの見出しに利用する場合は以下の記事を見て下さい。

mutakko.info

【WordPress】LION BLOGのCSSで見出しのデザインをカスタマイズ

まとめ

ブログの記事を書く場合には、見出しは重要な役割を果たします。

見出しのデザイン次第で読みたくなる記事や見にくい記事になったりします。

上記のサンプルをカスタマイズしてご自分のブログをデザインしてみましょう。

ブログのシンプルな見出し用CSSサンプル-コピペで貼り付け