見出しhタグをCSS(スタイルシート)でデザインする方法

見出しをCSSでデザインする方法

見出しタグのCSSデザインサンプルです。コピペするだけですぐに使えるサンプル15種類。普段CSSはあまり触らないという方のために、1行ずつ解説を添えています。色のコードを変更したり線の太さを変更するだけでも、あなたのサイトに合ったデザインに変更できます。

PR

<h2>~<h6>装飾はスタイルシートで

画像を利用している方もいると思いますが、最近ではCSSで編集をして使うことが推奨されています。記事の投稿が増えれば、タグ使用回数もおのずと増えます。サイトが次第に重くなる状況を、少しでも回避するための対策になっているようです。

長くブログ運営をしようと思っている方は、こちらの方法をおすすめします。

また、テンプレートやテーマを変更した場合、スタイルシートで色の設定などを変更すれば、新しいページの雰囲気に合ったタグ装飾に一括変更ができるというのも利点です。

サンプルデザイン14種

サンプルです。自由に編集して使ってください。ここでは全て<h2>タグの設定になっています。<h3>など別のタグで使用したい場合には、所定の数値や文字の大きさなどを変更してください。

投稿記事内で使用する際は以下のように使います。装飾部分はすべてCSSで設定されているので、投稿画面では最低限の文字数で済み、とても楽です。
入力例
<h2>これは見出しタグのサンプルです</h2>
これは見出しタグのサンプル01です

解説
1行目はコード説明です。
2行目h2の設定という意味です。h3で使いたいときは、ここを変更します。
3行目タグの外側の上下左右の余白設定をしています。見出し上下に余白が欲しくて、改行タグでスペースを作っていた方もいるかもしれませんが、ここの設定でその必要がなくなります。スペースを大きくしたい場合は1.5の数値を大きくしてください。
尚、上下で余白幅を変えたい場合には4行目と同じように4つの数値に変更してください。4つ並べた場合は、左の数値から上・右・下・左の余白を設定します。
4行目タグの内側の上下左右の余白設定をしています。テキストの表示位置はここで調整します。左の数値から、上・右・下・左の余白設定を行います。
「これは見出し~」の一文字目「こ」の位置をもっと左に寄せたい場合は、1em の数値を0.8や0.6などに変更します。
5行目はワンポイントの線の部分です。数値を大きくすれば太くなります。カラーコードを変更すれば色が変わります。
6行目は文字の大きさを設定しています。
7行目は太字の設定です。boldnormal に書き換えると太字は解除されます。
8行目は文字の色を設定しています。カラーコードを変更すれば色が変わります。
これは見出しタグのサンプル02です

解説
サンプル01の解説を参照
5行目doublesolid に変更すると、サンプル01と同じになります。
これは見出しタグのサンプル03です

解説
1~4行目6~9行目はサンプル01の解説を参照
5行目で下線の設定をしています。dottedsolid に変更すると点線ではなく実線になります。数値を大きくすると線が太くなります。
色を変更したい場合は5行目6行目のカラーコードを変更してください。
これは見出しタグのサンプル04です

解説
1~4行目6~9行目はサンプル01の解説を参照
5行目で背景色の設定をしています。背景色を変更したい場合はこの行のカラーコードを変えてください。
これは見出しタグのサンプル05です

解説
1~4行目8~10行目はサンプル01の解説を参照
5行目で背景色の設定をしています。背景色を変更したい場合はこの行のカラーコードを変えてください。
6行目で左側ラインを設定しています。太さ・カラーは自由に変更してください。
7行目で右側ラインを設定しています。6行目の太さ・カラーと同じ設定にしてください。
これは見出しタグのサンプル06です

解説
1~4行目7~9行目はサンプル01の解説を参照
5行目で背景色の設定をしています。背景色を変更したい場合はこの行のカラーコードを変えてください。
6行目で下のラインを設定しています。太さ・カラーは自由に変更してください。
border-bottomborder-top に変更すると、上に線がつきます。
これは見出しタグのサンプル07です

解説
1~4行目7~9行目はサンプル01の解説を参照
5行目で上のラインを設定しています。太さ・カラーは自由に変更してください。
6行目で下のラインを設定しています。太さ・カラーは自由に変更してください。
サンプル06の5行目を追加すると背景に色が付きます。
これは見出しタグのサンプル08です

解説
1~4行目6~8行目はサンプル01の解説を参照
5行目でラインを設定しています。太さ・ラインの種類・カラーの変更が出来ます。
サンプル06の5行目を追加すると背景に色が付きます。
これは見出しタグのサンプル09です

解説
基本はサンプル08と同じです
9~11行目でラインの角丸設定をしています。数値を大きくするほど丸まります。
これは見出しタグのサンプル10です

解説
基本はサンプル08と同じです
9~13行目で影の設定をしています。よくわからない方はここの設定は変更しないことをおすすめします。
これは見出しタグのサンプル11です

解説
サンプル01とサンプル08を合わせたデザインです。
3行目で配置方法を指定しています。よく分からない場合は変更しないでください。
4~9行目はサンプル08と同じです。
12行目以降で枠の中を設定しています。
色の変更は6行目15行目のカラーコードを変えてください。
これは見出しタグのサンプル12です

解説
サンプル08に吹き出しがついたバージョンです。
3行目で配置方法を指定しています。よく分からない場合は変更しないでください。
4~9行目はサンプル08と同じです。
10行目36行目で背景色の設定をしています。
ライン色の変更は6行目23行目のカラーコードを変えてください。
13行目以降で吹き出し部分を設定しています。
これは見出しタグのサンプル13です

解説
サンプル12の角丸バージョンです。
3行目で配置方法を指定しています。よく分からない場合は変更しないでください。
4~7行目はサンプル01と同じです。
8行目で文字色の設定をしています。白文字になっています。
9行目21行目で背景色の設定をしています。
10~12行目は角丸の設定です。数値を大きくするほど丸まります。
15行目以降で吹き出し部分を設定しています。
これは見出しタグのサンプル14です

解説
1~4行目7,8行目はこれまでの基本設定と同じです。
5行目の数値を大きくすると外枠の白い細い部分が広がります。
6行目で背景色を設定しています。
9行目で文字色の設定をしています。白文字になっています。

それでも画像を使いたい(サンプル1種)

最後に画像を使用する場合の設定方法です。hタグに限らず応用ができるのでサンプルのコードを記します。

ちなみに、このサイトは本文中の見出しタグのデザインはCSSで設定して使っていますが、サイドバーの見出しは画像を使用しています。

サイドバーは記事のように増えていくことはないので、使い分けてみました。

これは見出しタグのサンプル15です

解説
1~7行目はこれまでの基本設定と同じです。
8行目で画像URLを指定します。カッコは消さず、そのままアップロードした画像URLを挿入します。
9行目で画像を繰り返さない設定をしています。この設定を解除すると、指定範囲内で同じ画像が繰り返し連続して表示されます。
意味がよく分からない方は、試しに9行目を削除して画面の表示をしてみてください。

サンプル10~13は見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)を参考にさせていただきました。

CSS編集する場所の見つけ方

まずはスタイルシートを開きますが、スタイルシートの場所が分からないという方、バックアップ方法が分からない方、コピペの意味や方法が分からないという方は、以下の記事を参照してください。

ブログ記事内の文字の大きさ太さ色を変えてみよう(HTML-CSS)

では、探し方の手順を説明します。この方法は、今後もお世話になる機会が多いので覚えておくと便利です。

  1. スタイルシートの編集画面を開く
  2. 編集画面内の上のほうをクリック
  3. ctrl+Fキーを同時押し(または「F3」キー)
  4. 画面の右上に窓が出てくるので h2 と入力
  5. 下向きの「次へ」のボタンをクリック

編集画面内で h2 と一致する場所に移動できます。大抵の場合、詳細な設定まではされていなくても、余白設定・太字・文字の大きさ設定などの最低限の設定はされているはずです。

これまでのサンプルを参考に、それと似た設定がされている場所を見つけましょう。サイトによっては .entry h2.main h2 など、h2 の前に何か追加されていることがあります。

そうした場合は、サンプル2行目を既存の形式に変更して編集してください。

上記以外の部分は、基本的にコピペして上書きする形になりますので、編集前は必ずバックアップを取ってください。

このページで紹介したサンプルは、すべて当サイトのCSSに実際に追加して表示されていることを確認しています。ですが、プラウザの種類やバージョンによっては表示のされ方が変わる可能性もありますのでご了承ください。

» サムネイルにピッタリ! 無料写真素材なら【写真AC】
※商用でも無料・クレジット表記不要
ブログランキング
お帰り前に応援1クリックいただけたら嬉しいです!
このページの情報があなたのお役に立ちましたらお願いします。
ブログランキング   にほんブログ村 小遣いブログ ポイントサイトへ
PR

シェアはとても励みになります。ありがとう!

購読はフォローが便利です

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です