ショップハンター

CSS でカッコいい見出しをつくろう

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

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

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

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

フラット系

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

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

立体系

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

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

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

インパクト系

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

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

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

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

ペーパー系

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

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

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

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

フィルム系

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

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

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

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

ふきだし系

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

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

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

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

真鍮ボタン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ピン留めリボン

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

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

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

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

• 読者が集まってくるブログの書き方講座
• 楽しく記事を書きながらアフィリエイトで報酬ゲットするための記事のなおし方

使用上の注意：

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

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

配布コード使用上の注意