【コピペで簡単】タイトル(見出し)CSSテンプレート 15選

タイトル(見出し)のテンプレート、15選をまとめました。

コピペするだけ、簡単です。

スポンサーリンク

タイトル(見出し)CSSテンプレート 15選

カスタマイズ方法

利用されているテーマのCSS(スタイルシート)に、設定を追加することで、利用できます。「外観」→「テーマの編集」から、テーマの「style.css」に、以下をコピーして、追加してください。(「h1」箇所は、使用する見出しの番号に、適宜変えてくださいね)

※該当の見出し箇所に、タグを挿入するものもあります。(後ほどご案内します)

❶ シンプルなデザイン

1.下線

線の太さ・カラーは、お好みで変えてくださいね。

2.点線

線の太さ・カラーは、お好みで変えてくださいね。(太くすると、ポップな印象になります)

3.上下線

線の太さ・カラーは、お好みで変えてくださいね。(細くすると、キッチリ感が出ます)

4.背景枠

文字色・背景色は、お好みで変えてくださいね。(少しだけ、角を丸くしています)

5.影付きボックス

枠線の色・太さは、お好みで変えてくださいね。

6.グラデーション

カラー(開始色・終了色)は、お好みで変えてくださいね。

❷ ワンポイント

7.先頭文字を大きく

(↑)は下線と組み合わせていますが、お好きなものと合わせてくださいね。

8.左線

(↑)は背景枠と組み合わせていますが、お好きなものと合わせてくださいね。

9.バイカラー下線

カラー(2色)・太さは、お好みで変えてくださいね。

10.マーク

(↑)は下線と組み合わせていますが、お好きなものと合わせてくださいね。

また、アイコンは、コチラのサイト様(↓)から、好きなものを選べます。「content:”\f219“;」の赤字箇所を、選んだものに変更して、ご利用くださいね。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

11.ドッグイヤー

(↑)は下線と組み合わせていますが、カラーも含め、お好きなものと合わせてくださいね。

❸ おしゃれ

12.ストライプ

カラー(2色)・太さは、お好みで変えてくださいね。

13.点線で囲う

こちらを使う場合、該当の見出しを<span>~</span>タグで、囲んでください。(↓)

カラー・太さは、お好みで変えてくださいね。

14.中間線

こちらを使う場合、該当の見出しを<span>~</span>タグで、囲んでください。(↓)

カラー・太さは、お好みで変えてくださいね。

15.サブタイトル付き

こちらを使う場合、該当の見出しを<span>~</span>タグで、囲んでください。(↓)

(↑)は下線と組み合わせていますが、カラーも含め、お好きなものと合わせてくださいね。

まとめ

ベーシックなものから、すこし珍しいものまで、チョイスして作ってみました。見出しは、記事の見やすさを決定づけるので、しっかりデザインしたいですね。こちらのCSSをベースに、好きなアレンジに変えて、CSSカスタマイズを楽しんでください!

狐火兎
カラーは、自分のサイトの配色に合わせたり、上(↑)で使っているような薄いグレーやベージュが、馴染みやすくてオススメです。 では、また♪