ホームページやブログで見出しは必須の要素ですね。
ここでは、おしゃれなデザインの見出し用CSSサンプルを紹介します。WordPressブログにコピペするだけで使えます。
気に入った見出しがあれば使って下さい。（この記事へのリンクも自由です）
WordPressブログにCSSの見出しを利用する場合は、以下の記事を参考にしてください。
参考 LION BLOGの見出しデザインをCSSでカスタマイズ
ブログで収益化したいという方は、以下の記事を参考にしてください。
参考 超初心者でも収益化できるブログの始め方を分かりやすく解説
シンプルな見出し
シンプルな見出しデザイン集です。
アンダーライン
左と下にライン
左にライン
下に点線
上下にライン
二重線
左に大きいライン
左に大きいラインと下線
囲い枠がある見出しサンプル
次は、囲い枠がある見出し用デザインサンプル集です。
シンプルな囲い枠
文字色や枠線の色や大きさ、背景色などアレンジして好みのデザインにチャレンジして下さい。
囲いに丸みを付けた見出し
囲い枠にラインを入れた見出し
リボン系見出し
border-color: transparent transparent transparent #ffffff;transparent transparent transparent #ffffff の色は背景色に合わせて下さい。
文字数が多く、改行してしまう場合には対応しておりません。
グラデーション系見出し
グラデーションも、なかなかいいですね～
おしゃれな見出しサンプル
次は、おしゃれな見出し用CSSデザインのサンプル集です。
最初の文字だけ大きくする見出し
蛍光ペン風の見出し
タイトル付き見出し
ワンポイント見出し
落ち着いたデザインの見出し
落ち着いた感じのデザインで見出しを作ってみました。
[adcode]
まとめ
見出しのデザインは、ブログのデザインを決めてしまう大事な項目の一つですよね。
どのような見出しのデザインにするか迷うところです。おしゃれな見出しのCSSにするか、シンプルな見出しにするか好みですので、気に入ったCSSをコピペして使ってください。
WordPressのブログに見出し用のCSSをコピペして使うには以下の記事を参考にしてください。
参考 LION BLOGの見出しデザインをCSSでカスタマイズ
その他、LION MEDIAやLION BLOGのカスタマイズは、以下の記事で総まとめしていますので参考にしてください。
