\最短10分でWordPressブログを作る!/

【CSSコピペで使える】シンプルで使いやすいおしゃれなHタグデザイン13選

CSS・PHP

今回は、そのへんでよく見るHタグデザインの中から、汎用性が高い+おしゃれでシンプルなものをいくつかまとめて、極力コピペで使えるようにしています。

色や文字サイズ、位置はお好きに変更してお使いください。

 

どんなサイトにも合う見出し

まずはオーソドックスな背景単色見出し

左線と背景色

色を横グラデーションに

縦グラデーションだとこうなる

背景と枠線をずらすと

文字だけでずらすと

白抜き文字と下線でシンプルに

よくある上下に線があるパターン

上下を二重線にすると

左と下のみ点線に

途中で色が変わる下線

点線と実線でファンシーに

さらに最初の文字だけ大きく

 

他サイトと差をつけるなら配色

見出しを目立たせすぎると記事に対して少し不信感が芽生えますので、これくらいのおとなしめのデザインがいいんじゃないかなって個人的には思います。

ですが、デザイン自体はありきたりなものになるので、配色で差をつけないといけないかも。

シンプルすぎると見出しとして機能しないし、目立ちすぎると目につくので、ちょうどいいバランスを考えないといけない”見出しデザイン”は難易度が高いです。

次はもう少し動きのあるものを作ろうかな。

タイトルとURLをコピーしました