ショップハンター

CSS でかっこいい h タグをつくろう

(2016/08/23)
CSS でカッコいい見出しをつくろう


h タグをきちんと配置すれば、検索エンジンに読んでもらえるので、検索エンジン対策にも効果的!
でもスタイルシート(CSS)って書き方がよくわかんない!

そんなあなたのために用意しました。
コピー&ペーストするだけでインパクトのある見出しをつくれます。
コードのカスタマイズも自由自在!

2016/01/15:
 Microsoft Edge での表示確認を行いました。

はじめに

【見出しの重要性】

 h タグを使った見出しを使うと、検索エンジンに読んでもらえます。

 h タグは、h1 ~ h6 までありますが、h1(大見出し)と h2(中見出し)は 1 ページ内で一組ずつ使います。
 h1と h2 は、楽天ブログで自動挿入されますので、みなさんは、h3~h6 を好みに合わせてご利用ください。

 以下に h3 ~ h6 を使ったときの見え方を示します。

<h3>h3 を使った見出し</h3>


<h4>h4 を使った見出し</h4>


<h5>h5 を使った見出しサンプル</h5>

<h6>h6 を使った見出しサンプル</h6>

 h タグの種類によって文字の大きさがこのように変化します。 (文字の大きさはスタイルシートでも変更できます。)

 上記のような見出しでも検索エンジンに認識してもらえるようになりますが、殺風景な印象だと、訪問者が記事を読む気にならないかもしれません。

 [SEO対策] ツールを使ってブログ見出の設定状態を客観的に見てみよう

 ここでは、コピー&ペーストで自由にお使いいただける h タグのテンプレートを集めてみました。
 使用上の注意は文末にまとめてありますので、ご一読いただけると幸いです。

フラット系

 シンプルイズベストを目指すあなたにぴったり!

 コード量が少なめのため、楽天ブログをお使いの方でも、文字数をあまり気にせずお使いになれます。
 シンプルでありながら、どのようなタイプの記事にもマッチするのが特徴です。

カスタマイズ方法はこちらをどうぞ
| | フォント | 余白 |

実線タイプ


破線タイプ


ボックスタイプ


地下鉄シリーズ


トップラインタイプ


上下ラインタイプ


上下ダブルラインタイプ


立体系

 文字やボックスに立体効果をつけたいあなたに

 コード量は増えますが、見出しを立体的に表現できます。
 文字量の多い記事にアクセント的に用いれば、記事が全体に引きしまった印象になります。

注意:
 IE 系や旧ブラウザのバージョンでは、文字の立体エフェクトが対応していない場合があります。
 その場合は、フラット表示になります。

文字のみのエフェクト


文字エフェクト&サイドバーつき


文字エフェクト&
      ラウンドボックス


文字エフェクト&
      シャドウボックス


インパクト系

 画像を入れずに、人目を引く見出しをつけてみたい方におすすめ!

 インパクト系は、画像のように見出しを表現できるのが特徴です。
 日記系、レビュー系記事に特に大活躍しそうですね。

 どんなタイプの記事にも使えますが、コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 IE 系や旧ブラウザのバージョンでは、文字の立体エフェクトが対応していない場合があります。
 その場合は、フラット表示になります。

ネイルファイル形


フェルトぬいとり形


右肩上がりでななめってるやつ


右肩下がりでななめってるやつ


ペーパー系

 見出しに紙のエフェクトをつけたい方専用!

 ペーパー系は、紙を重ね合わせたように見出しを表現できるのが特徴です。
 記事に立体感をつけたいときに、アクセント的に使用するとよいでしょう。

 コード量が無駄に多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 IE 系や旧ブラウザのバージョンでは、文字の立体エフェクトが対応していない場合があります。
 その場合は、フラット表示になります。

ペーパー型


ふせん(2枚重ね)


ふせん(ブック)


フィルム系

 エンタメ系の記事を書かれる方のタイトル見出しにおすすめ!

 ご覧のとおり見出しに映画フィルムのデザインを施したものです。
 現在、3 色を用意していますが、ご希望があれば色を追加いたします。

 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 IE 系や旧ブラウザのバージョンでは、文字の立体エフェクトが対応していない場合があります。
 その場合は、フラット表示になります。

ノーマルタイプ


ノーマルタイプ(影付き)

右肩上がり

右肩下がり


ふきだし系

 ポップな記事、日記、耳より情報系の記事を書くときにおすすめ!

 ふきだし形の見出しはフレンドリーな印象が強くなりますので、訪問者に気軽に読んでもらえるかもしれません。
 日記系ブログ、イラスト系ブログはもちろんのこと、文字が多めの記事でも、この見出しがあるだけで視覚効果はぐっと高まります。

 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 推奨ブラウザ以外のブラウザや旧バージョンのブラウザでは、枠のエフェクトが対応していない場合があります。

白抜きふきだし形(左)

白抜きふきだし形(右)
ぬりつぶしふきだし形(左)

ぬりつぶしふきだし形(右)


真鍮ボタン

 枠に真鍮ボタンが付いたちょっとおしゃれな見出しで、記事の印象が引き締まります

 影付きの枠に真鍮ボタンをプラスしただけで、記事の印象が一味違った感じになります。
 また、どのジャンルの記事にも使えるのも特徴です。

 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 推奨ブラウザ以外のブラウザや旧バージョンのブラウザでは、枠や影のエフェクトが対応していない場合があります。

ノーマルタイプ

外枠つき
二重外枠つき


セロファンリボン(上部突出オーバーラップタイプ)

 影つきの枠の左側にセロファンのリボンを留めたデザインです。

 透明感のあるセロファンで、あなたの記事の見出しが一気におしゃれな感じになります。
 デザイン系、ファッション系の記事はもちろんのこと、どんな記事にもお使いいただけます。

 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 推奨ブラウザ以外のブラウザや旧バージョンのブラウザでは、枠や影のエフェクトが対応していない場合があります。

セロファンリボン(上部揃えオーバーラップタイプ)

 セロファンのリボンシリーズの上揃えバージョンです。

 原色系は上部突出オーバーラップタイプと同じカラーバリエーションになっていますが、メトロカラー系、和色系は新たなバリエーションを追加しています。

 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 推奨ブラウザ以外のブラウザや旧バージョンのブラウザでは、枠や影のエフェクトが対応していない場合があります。

ピン留めリボン

 セロファンのリボンシリーズの中央ピン留めバージョンです。

 原色系はオーバラップタイプ、上部突出オーバーラップタイプと同じカラーバリエーションになっていますが、メトロカラー系、和色系は新たなバリエーションを追加しています。

 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。

注意:
 推奨ブラウザ以外のブラウザや旧バージョンのブラウザでは、枠や影のエフェクトが対応していない場合があります。

参考記事

使用上の注意:

 使用にあたっては、当サイトへのご連絡もリンクも一切不要です。

 配布コードは改変自由となっております。
 詳細な使用条件につきましてはこちらのページをご覧ください。

 配布コード使用上の注意

web拍手 by FC2 tweet this rakuten profile いいね! Google+ share


Copyright (c) 1997-2017 Rakuten, Inc. All Rights Reserved.