おしゃれな見出し用CSSデザイン集!WordPressブログにコピペするだけ!

CSS おしゃれな見出し用CSSデザイン集!WordPressブログにコピペするだけ!

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

ここでは、おしゃれなデザインの見出し用CSSサンプルを紹介します。WordPressブログにコピペするだけで使えます。

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

WordPressブログにCSSの見出しを利用する場合は、以下の記事を参考にしてください。

参考 LION BLOGの見出しデザインをCSSでカスタマイズ

 

シンプルな見出し

シンプルな見出しデザイン集です。

アンダーライン

左と下にライン

左にライン

下に点線

上下にライン

 

二重線

左に大きいライン

左に大きいラインと下線

 

囲い枠がある見出しサンプル

次は、囲い枠がある見出し用デザインサンプル集です。

シンプルな囲い枠



文字色や枠線の色や大きさ、背景色などアレンジして好みのデザインにチャレンジして下さい。

囲いに丸みを付けた見出し



囲い枠にラインを入れた見出し


リボン系見出し



border-color: transparent transparent transparent #ffffff;

transparent transparent transparent #ffffff の色は背景色に合わせて下さい。

文字数が多く、改行してしまう場合には対応しておりません。

グラデーション系見出し



グラデーションも、なかなかいいですね~

 

おしゃれな見出しサンプル

次は、おしゃれな見出し用CSSデザインのサンプル集です。

最初の文字だけ大きくする見出し

蛍光ペン風の見出し



タイトル付き見出し


ワンポイント見出し

落ち着いたデザインの見出し

落ち着いた感じのデザインで見出しを作ってみました。


 

まとめ

見出しのデザインは、ブログのデザインを決めてしまう大事な項目の一つですよね。

どのような見出しのデザインにするか迷うところです。おしゃれな見出しのCSSにするか、シンプルな見出しにするか好みですので、気に入ったCSSをコピペして使ってください。

WordPressのブログに見出し用のCSSをコピペして使うには以下の記事を参考にしてください。

参考 LION BLOGの見出しデザインをCSSでカスタマイズ

 

その他、LION MEDIAやLION BLOGのカスタマイズは、以下の記事で総まとめしていますので参考にしてください。

参考 LION MEDIA(BLOG)の全てが分かる!カスタマイズ総まとめ【保存版】

おしゃれな見出し用CSSデザイン集!WordPressブログにコピペするだけ!
フォローお願いします