css実例!見出しデザインをおしゃれにするための100選を公開!


ブログやホームページの見た目を整え、読みやすくしてくれる見出し。

訪問するユーザーにとって見出しがない文章はとても読みにくく、離脱率も高くなってしまいますが、
見出し構成がしっかりとしている記事はちゃんと読んでもらうことができます。

さらに見出しはSEOとしても重要で、最近のGoogle検索ではユーザーが検索したワードが見出しに含まれている場合、
その見出しも検索結果に表示しページの該当部分を直接表示してくれる場合もあります。

今回は、その見出しをコピペで簡単にオシャレにする方法をご紹介します。

見出しデザインの変更方法

HTMLやCSSに慣れていない方にとって、文字だらけのファイルをいじるのはちょっと不安ですよね。

でも、そこで一歩踏み出しチャレンジすることで自分のスキルアップにもなるし、やってみたら意外と簡単!と思えると思いますので、ぜひ挑戦してみてくださいね。

なお、不安な方は必ず実装前のファイルのバックアップをとることをお勧めします。

バックアップは難しいことはなく、編集しようとしているファイルの中身を丸々コピーし、メモ帳などにペーストしておくだけです。(できればデスクトップなど分かりやすいところに保存しておきましょう)

編集してみてうまくいかなかった場合はそのバックアップの中身を再度コピペして元に戻せばいいですし、うまく編集ができてバックアップファイルが不要な場合は削除していただいてOKです。

実装方法

それでは、このページで紹介している見出しデザインの、ワードプレスへの実装方法を説明していきます。

ワードプレス以外のサービスへの実装方法に関しては、Googleで「○○ css追加」等で調べてみると方法が出てくると思いますので、ぜひ探してみてくださいね。

ワードプレスへの実装

ワードプレス で実装する場合、まずワードプレスのダッシュボードから、左側メニュー【外観】>【カスタマイズ】と進みます。(使用しているテンプレート等で表示が異なる場合もありますのでご了承ください。)

WPへの実装方法

 

次に、【追加CSS】をクリックします。

 

WPへの実装方法

 

出てきた画面に、このページで紹介している見出しデザインの中から、使いたいデザインのCSSをコピペして、【公開】をクリックします。

 

WPへの実装方法

なお、今回のサンプルでは全て【h2】タグのデザインとしてご紹介していますが、【h2】の部分を【h3】や【h4】にしてももちろん使用可能です。

全見出し好きな見出しデザインに変更して、素敵なブログを作ってくださいね!

基本のHTML

まずは基本のHTMLのご紹介。ワードプレスの場合はビジュアルモードで「見出し2」を選択すれば自動的に下記のようなHTMLが挿入されます。

このHTMLを基本として、CSSでデザインを整えていきます。

シンプルな見出しデザイン

最近はシンプルなデザインのブログも流行っていますよね。シンプルだけどしっかり主張して見出しだということをユーザーに分かってもらえるようなデザインがおすすめです。それではシンプルな見出しデザインのサンプルをご紹介します。

◆下線

まずは無難に下線を引いたデザインをご紹介。

実線

見出しCSS1

シンプルに実線の見出し。【solid】というのが実線の指定です。

ここから色と太さを変えてみるとこんな感じになります。

 

見出しCSS2

だいぶ印象が変わりますよね!

ご自身の好きな色でいろいろ試してみると面白いと思います。

ここから先の見出しも色違いや太さ違いなどバリエーションを紹介していきますので、ぜひご自身好みにカスタマイズして楽しんでみてくださいね。

二重線

見出しCSS3

今度は二重線です。(画像だとほとんど分からないですね。汗)

二重線の時は、3px以上で指定するように注意してください。
3px以下に指定すると実線と見た目が変わらなくなってしまいます。

 

見出しCSS4

今度も色と太さを変えてみました。

二重線の場合は、指定した太さが【上下の線+間の余白】全ての高さになります。

ドット

見出しCSS5

点線の見出しです。

実線に見えると思うのですが、画像をクリックして原寸大でみていただくと点線になっているのがわかると思います。

 

見出しCSS6

こちらの方が分かりやすいですね。

太さと色を変更しています。

太くするとわかるのですが、丸いドットではなく正方形のドットです。

ダッシュ

見出しCSS7

ドットとダッシュ、微妙な違いなんですが、ドットは点ですがダッシュは短い線です。

よく切り取り線なんかで使われているような見た目ですね。

 

見出しCSS8

太さと色を変更して見るとドットとの違いが分かりやすいと思います。

余白の間隔を調整することはできません。

斜め線

見出しCSS9

ちょっとお洒落な斜め線の見出しです。

【:before】というのは擬似要素と呼ばれるもので、CSSで指定するとHTMLには存在しない要素を追加することができます。

【:before】の他に【:after】というのもあり、それぞれ指定したタグ(今回の例で言うとh2)の前後に要素を追加することができると言うことになります。

 

見出しCSS10

少し太い斜め線です。

色を変更する場合は、【background-image】の中にある#から始まる6桁の数字(カラーコード)が3箇所ありますので、全て同じものに変更してくださいね。

チビ線

見出しCSS11

見出し全体ではなく、ちょこっとだけ線を入れてみました。

大見出しではなく小見出しなどで活躍するかもしれません。

 

見出しCSS12

このチビ線はテキストをセンター揃えしてもお洒落に見えます。

異なる色での二重線

見出しCSS13

単色での二重線は非常にシンプルなCSSでしたが、上下の色を変えた二重線にする場合は、擬似要素を使用して二重にしていきます。

擬似要素の位置はh2の線の太さ+擬似要素の太さ+余白分下に下げます。今回の例だと、h2の線の太さが2px+擬似要素の太さが2px+余白が2pxで合計6px下に下げる→【bottom: -6px】と指定しています。

 

見出しCSS14

一方、わざと文字と被らせてマーカーのような雰囲気にすることも可能です。

このように擬似要素は一味違った見出しを作るのに大活躍します。

二色線

見出しCSS15

色が途中で変化する見出しです。

元々の下線の上に、擬似要素で短い線を重ねています。

色の組み合わせでかなり印象が変わります。

 

見出しCSS16

色を変更し、短い方の線の長さを少し長くしてみました。

グラデーション線

見出しCSS17

左から右へ、グラデーションになっている線です。

グラデーションは自分でCSSを書こうとすると時間がかかってしまうので、便利なジェネレーターを使うのがおすすめです。

【 /* ここから下を削除してコピペ */】と書かれているところから下を全て削除し、ジェネレーターで作成したCSSをコピペしてくださいね。

その際、右側にある【Orientation】を【horizontal →】にすると見本のように左から右に色が変わる線になります。

cssジェネレータ

 

 

見出しCSS18

最後を背景と同じ色(ここでは白)にすると、徐々に消えていくような線になります。

今回はそれに加え、【border-radius】で線に丸みをつけています。

高さの半分の値を指定することで先が丸い線にすることができますよ。

◆左にのみ線

次はブログなどでよく見る、左側だけに線があるパターンです。

一本線

見出しCSS19

お好きな色で入れてみてください。

色や太さ、長さで雰囲気が変わります。

 

見出しCSS20

こちらは線を細くした上で、上下にも少し伸ばしてあります。

1つ目の例が【padding-top: 10px;】だったのに対し、今回は【padding: 10px;】となっていますね?

paddingとは内側の余白のことで、top・bottom・right・leftといった指定を入れずに数字を設定した場合、
全てに対して同じ余白が適用されます。

【padding: 10px 20px;】とスペースを空けて2つ指定した場合は最初の数字が上下、2番目が左右の指定です。

二本線

見出しCSS21

左側に2本、線を入れるとちょっとお洒落な雰囲気になります。

擬似要素【before】を使って2本目の線を表現しています。

 

見出しCSS22

1本目と2本目の線の色を変えるだけでもだいぶ雰囲気が変わりますね。

◆左+下に線

こちらもブログの見出しでよく見るデザイン。

実線

見出しCSS23

左側が太線、下が細線の定番デザインです。

 

見出しCSS36

逆にしてみるとまた印象が変わりますね。

お好みで色々と試してみてください。

 

二本線

見出しCSS24

下線だけ2本線にしてみました。

左と下を同じ大きさにすると境が綺麗です。

 

見出しCSS25

今度は左側を2本線にしてみました。

境をよく見てみると45度の角度で左の線と下の線が隣接しているのが分かります。

ドット

見出しCSS26

ちょっと遊び心を持って点線の下線も面白いですね。

 

見出しCSS27

左の線と下線の色を変えてみるのも良いですよ。

いろんな組み合わせで試してみてください。

◆上下に線

見出しの上下に線を入れることでより見出しを強調することができます。

太線

見出しCSS28

ガッツリと太い上下の線の間に、文字を中央寄せで配置しました。

 

見出しCSS29

あえて見出しの文字色を変えて、線の色は黒にしてみるというのもアリです。

細線

見出しCSS30

細い線だとより大人しい印象ですが、しっかり見出しだと分かりますね。

 

見出しCSS31

上下で線の色を変えてみるのも面白いですよ。

前の段落とはっきり差をつけたい時などに良いかもしれません。

上だけ二重線

見出しCSS32

擬似要素で上にもう1本線を追加してみました。

普通の上下線よりも可愛いですね!

 

見出しCSS33

上下の線とは色を変えて、あえて上の線と隙間を作らず配置してみるとマーカーをひいたような雰囲気になります。

下だけ二重線

見出しCSS34

先ほどとは反対に、下を二重にしてみたパターン。

 

見出しCSS35

今度は擬似要素の線を下にぴったり付けてみました。

さりげない色の変化がお洒落です。

 

◆背景

見出しに背景色がついていると、スクロールしても目につきやすいので読んでもらえる確率が高くなります。

文字の色とのバランスを考えて背景色を決めてみてくださいね。

単色背景

オーソドックスな単色背景です。明るい色がオススメです。

ただ、このままだとちょっと詰まっている感じがして見づらいので、内側の余白(padding)を入れてあげるのがオススメです。

かなり見やすくなりましたね!適度な余白を入れることで見やすくなりますので、背景色を設定する際は必ずpaddingを設定するようにしてください。

グラデーション背景

グラデーションが美しい背景です。

前でご紹介した、便利なジェネレーターを使ってお好みのグラデーション背景を作ってみてくださいね。

こちらもpaddingを設定することで見やすくしています。

グラデーションの向きを水平から垂直に変えるだけでも雰囲気がだいぶ変わります。

先ほどのジェネレータの右側に、向きを変える項目があるのでここを変更してからコピペしてくださいね。

ボーダー背景

CSSだけでボーダー背景が作れるなんて驚きですよね!

しかもとってもシンプルなコードで設定することができます。

repeating-linear-gradientで角度、1色目の色&太さ、2色目の色&太さと決めることができます。

色の組み合わせを変えるだけで自由自在にボーダー背景を作成することができます。

太さも簡単に変えることができますね。

最初の0〜10pxは#fff、次の10px〜20pxは#eeeにしてください、という指示ですので、今回は白10px、グレー10pxのボーダーが出来上がりました。

幅を自在に変えることで雰囲気の違うボーダーを作ることができますよ。

横ボーダーの場合は角度を0度にするだけ。簡単!

縦ボーダーは横に対して90度回転するだけです。

こちらもボーダーの幅は好きに変えることができますので試してみてくださいね。

画像背景

背景画像を使うことで一味違った見出しにすることができます。

background-imageのカッコ内にアップロードした画像のURLを入れてくださいね。

ちなみに上記のように設定した場合、元画像の大きさで表示されるのではなく、見出しのサイズに合わせて表示されます。

暗めの背景画像を使うときは、文字色を白などに変更しておきましょう。

paddingも大きめにとっておくと背景画像が表示される範囲が広がるので、より背景画像が活きます。

ただし、あまり1ページ内で多用するとうるさくなるので気をつけましょう。

 

◆線+背景

線と背景を組み合わせるとより印象的な見出しを作ることができます。

下線+背景

王道は下線+背景。同系色でまとめると綺麗にまとまります。

下線を点線にしてみても面白いですね。

上線+背景

線を上に持ってくるのもよくあります。

前のセクションとの区切りがはっきりするので読み物系のブログにいいかもしれません。

二重線にするとまた雰囲気が変わりますね。

カラフルに色を使わなくても、しっかり背景を強調することができます。

左線+背景

背景色の左側に線をつけることで付箋のようなデザインになります。

思いっきり太くしてみても良いですね。

ご自身のサイトの雰囲気に合った太さを探してみてください。

 

◆枠

見出しに枠をつけることで強調する方法もあります。

シンプル枠

シンプルですがしっかり強調されますね。

枠を太くする場合は、少し薄めの色を選ぶとバランスがいいですよ。

ドット枠

ドット枠にすると、少し雰囲気が変わります。

borderの中をdottedにするだけなので簡単ですね。

太めのドット枠にするとポップな印象になりますね。

二重枠

二重枠にするとよりおしゃれな見出しになります。

太くするのもおすすめです。

ずらした二重枠

ずらし枠の見出しは一気にお洒落になりますね。

擬似要素を使ってずらし枠を表現します。

見出しのpaddingをずらした分だけ増やすのがポイントです。

線を太くした場合はその分もpaddingを増やすのがおすすめです。

タイトル付き枠

タイトルが付いた見出しも個性的で面白いですよね。

擬似要素内のcontentの文字列を変えればタグのタイトルを簡単に変更できます。

書類のインデックスのようなデザインでおしゃれですよね。

左右はお好みで決めてみてくださいね。

 

◆枠+背景

枠と背景を組み合わせるとより目立つ見出しになります。

枠+背景

同系色でまとめるとすっきりします。

背景を濃い色にする場合は文字色を白にすると見やすくなります。

枠+背景をずらす

枠をずらす見出しの応用編、背景が少しずれた見出しです。

ちょっと上級な見出しに見えますね。

濃い背景色もかっこいいですよ!

◆左右中央に線

見出しの両端に線を入れるとちょっとお洒落な感じになりますよね。

この例は線の長さを100pxにしています。お好みで変えていただいてもOKです。

横幅いっぱいに線を表示させたい場合はこちらをお使いください。下のようにタイトルの文章が長くなっても大丈夫です。

おしゃれな見出しデザイン

ここからはより複雑なCSSを使いこなして、お洒落な見出しデザインにチャレンジしてみましょう。

◆リボン

シンプルリボン

両側がリボンの切れ目のようになっている見出しです。h2のbackgroundを変更すればお好きな色のリボンにできますよ。

濃い色のリボンにする場合は文字色を白にすると読みやすいです。ただし、見出しが2行以上になってしまうと崩れてしまうので注意してください。

片方だけリボン

片側だけリボンのデザインです。こちらも1行のみに対応しています。

リボンの切り込みを深くしたい場合、h2::beforeのborder-rightの太さを大きくしてみてくださいね。

影付きリボン

リボンに影を付けてみるとより立体的になって目立ちますね。

影をつけるときは、擬似要素も少し大きくしないと長方形に影が出てしまいますので、サイズを変える時は気をつけてください。

リボンの幅を見出しの長さに合わせて短くするとよりリボンっぽくなります。

width: fit-content; は要素の横幅に合わせてくれます。リボンの切り込み分を考えてpaddingを設定してみてくださいね。

ステッチありのリボン

今回のHTMLは少し要素を追加します。

CSSはこちらです。

h2 spanの部分でステッチを追加しています。ステッチ付きだと可愛らしい印象になりますね!

縦幅を太くする場合は、h2の高さ、h2 spanの高さ両方とも大きくする必要があります。h2 spanの高さはh2の高さからpadding 10px×2=20px分を引いた80pxにしました。

また、こちらは太くしたことで2行まで対応しています。

用途に合わせて選んでみてくださいね。

折り目付きリボン

紙が折れたようなデザインの見出しです。基本的には、影で濃くなっているように見せるため、同系色の濃い目の色を影の部分に選ぶのがおすすめです。

色の濃さを反対にしてみると両面の色紙が折れているような感じになりますね。

ぐるっと一周リボン

両端に折れ目のあるリボンを表現しました。

擬似要素のborder-leftの太さを大きくすると、影の部分が長くなり深く折り返しているように見えます。

縦のリボン

HTMLはこちら

CSSはこちら

ワンポイントで垂れ幕のように縦のリボンを入れてみました。

テキストを入れることもできますよ。

見出しのフォントサイズよりリボンの文字は小さいサイズがおすすめです。

裏からぐるっと縦のリボン

折り目付きのリボンの応用編です。後ろからぐるっと折られているようなデザインで立体感を出しています。

◆吹き出し

ちょっとユニークな吹き出しの見出しをご紹介します。

シンプル吹き出し

四角の下に擬似要素で三角を作り、吹き出しを作成しています。

吹き出しの三角を真ん中に持ってくるのもユニークです。擬似要素のborder-leftとborder-rightの幅を太くすると、横幅な三角形になります。

外枠吹き出し

吹き出しに外枠をつけたい場合、少し複雑になってきます。

背景色の三角、外枠の色の三角2つを擬似要素で作成し、少しずらして配置することで外枠を表現しています。

背景色を追加しても良いですね。

角丸吹き出し

吹き出しの角を丸くすることで柔らかい印象になります。

角丸にするには、h2にborder-radiusを設定してあげれば良いですよ。

角丸を大きくするとまた印象が変わりますね。

角丸外枠吹き出し

角丸の吹き出しを外枠のみで表現しています。基本的には普通の外枠吹き出しと同様です。

border-radiusを縦幅の半分以上の大きさにすると、両端が半円の形になります。

下線のみ吹き出し

h2の外枠を下のみにすることでちょっとお洒落な吹き出しになりました。

吹き出しは文字のあるところにあった方が良いと思うので、文字を中央揃えにする場合は吹き出しも中央に配置すると良いでしょう。

◆ワンポイント付き

最後に、ワンポイント付きの見出しをご紹介します。

四角のワンポイント

シンプルに見出しの直前に四角のワンポイントを入れた見出しです。

もうちょっとお洒落にしてみました。下線を追加し、四角のワンポイントを外枠と背景がずれたようなデザインです。

先頭を大文字に

シンプルなCSSですがこれで最初の文字だけCSSを反映させることができます。

文字色を変えてみてもお洒落です。

丸を重ねる

見出しの前に円を重ねてみました。ポップな印象になりますね。

先ほどの最初の文字だけ大きくする見出しと組み合わせてみました。なかなかお洒落ですよね!

オリジナルの見出しにする方法

ここまで見出しの例をご紹介してきましたが、ここからは今までご紹介してきた見出しを、オリジナルのものに変更する方法を解説していきます。

色の変更方法

CSSで色を表現する際は、カラーコードと呼ばれるものを使用します。

「カラーコード」で検索すると色々参考になるサイトが出てきますので参考にしてみてくださいね。

カラーコードを使用しているのは以下のような個所です。

それぞれ#で始まる6桁の数字を変更することで好みの色の見出しに変更することができます。

線の太さの変更方法

線の太さは以下の部分で指定しています。

上の3pxの部分を大きい数字にすれば太くなりますし、小さい数字にすれば細くなります。

上下左右の太さを変えたい場合は、以下のようにも指定することができます。

左から上、右、下、左の線の太さを指定しています。下の記述でも同じ指定になります。

実際の画面で確認しながらCSSを決定してみてくださいね。

複数のデザインの使い分け方

同じh2でも、ここだけ違うデザインにしたいとか、2種類のデザインを使い分けたいなんて時もあると思います。そういったときには「クラス」というのを使うと便利です。

例えば標準の見出しはこれ

たまにこちらも使いたい

なんてときには、それぞれ以下のようにHTMLを書きます。

class=””がミソです。double-border等の名前は自分が分かりやすい名前をつけてくださいね。

その上で、CSSは以下のように記述します。

クラスは先頭に「.」をつけるというルールになっています。

このようにすることで簡単に使い分けることができますのでぜひ試してみてくださいね。

プロフィール

五十嵐 友

株式会社フレンドマーク
代表取締役

webマーケティングで
結果を出し、
安定してビジネスが
続けられる手法を
レポート等で公開している。

新しい時代の働き方や、
経済的にも精神的にも
自由で豊かな人生を
お客様に提案するため、
インターネットマーケティングを中心とした様々な研究を行い、

最新のビジネス手法を
お客様に実践しやすい形で
ノウハウ開発をし、
提供している。

極秘レポートも
プレゼント中!!

プロフィール詳細はこちらから

▲トップへ戻る