CSS でかっこいい h タグをつくろう(2016/08/23) CSS でカッコいい見出しをつくろう h タグをきちんと配置すれば、検索エンジンに読んでもらえるので、検索エンジン対策にも効果的! でもスタイルシート(CSS)って書き方がよくわかんない! そんなあなたのために用意しました。 コピー&ペーストするだけでインパクトのある見出しをつくれます。 コードのカスタマイズも自由自在! 2016/01/15: Microsoft Edge での表示確認を行いました。 はじめに 【見出しの重要性】 h タグを使った見出しを使うと、検索エンジンに読んでもらえます。 h タグは、h1 ~ h6 までありますが、h1(大見出し)と h2(中見出し)は 1 ページ内で一組ずつ使います。 以下に h3 ~ h6 を使ったときの見え方を示します。 <h3>h3 を使った見出し</h3><h4>h4 を使った見出し</h4><h5>h5 を使った見出しサンプル</h5><h6>h6 を使った見出しサンプル</h6>h タグの種類によって文字の大きさがこのように変化します。 (文字の大きさはスタイルシートでも変更できます。) 上記のような見出しでも検索エンジンに認識してもらえるようになりますが、殺風景な印象だと、訪問者が記事を読む気にならないかもしれません。 [SEO対策] ツールを使ってブログ見出の設定状態を客観的に見てみよう ここでは、コピー&ペーストで自由にお使いいただける h タグのテンプレートを集めてみました。 フラット系 シンプルイズベストを目指すあなたにぴったり! コード量が少なめのため、楽天ブログをお使いの方でも、文字数をあまり気にせずお使いになれます。 立体系 文字やボックスに立体効果をつけたいあなたに コード量は増えますが、見出しを立体的に表現できます。 注意: インパクト系 画像を入れずに、人目を引く見出しをつけてみたい方におすすめ! インパクト系は、画像のように見出しを表現できるのが特徴です。 どんなタイプの記事にも使えますが、コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意: ペーパー系 見出しに紙のエフェクトをつけたい方専用! ペーパー系は、紙を重ね合わせたように見出しを表現できるのが特徴です。 コード量が無駄に多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意: フィルム系 エンタメ系の記事を書かれる方のタイトル見出しにおすすめ! ご覧のとおり見出しに映画フィルムのデザインを施したものです。 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意: ふきだし系 ポップな記事、日記、耳より情報系の記事を書くときにおすすめ! ふきだし形の見出しはフレンドリーな印象が強くなりますので、訪問者に気軽に読んでもらえるかもしれません。 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意:
真鍮ボタン 枠に真鍮ボタンが付いたちょっとおしゃれな見出しで、記事の印象が引き締まります 影付きの枠に真鍮ボタンをプラスしただけで、記事の印象が一味違った感じになります。 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意: セロファンリボン(上部突出オーバーラップタイプ) 影つきの枠の左側にセロファンのリボンを留めたデザインです。 透明感のあるセロファンで、あなたの記事の見出しが一気におしゃれな感じになります。 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意: セロファンリボン(上部揃えオーバーラップタイプ) セロファンのリボンシリーズの上揃えバージョンです。 原色系は上部突出オーバーラップタイプと同じカラーバリエーションになっていますが、メトロカラー系、和色系は新たなバリエーションを追加しています。 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意: ピン留めリボン セロファンのリボンシリーズの中央ピン留めバージョンです。 原色系はオーバラップタイプ、上部突出オーバーラップタイプと同じカラーバリエーションになっていますが、メトロカラー系、和色系は新たなバリエーションを追加しています。 コード量が多くなっていますので、楽天ブログをお使いの方は、文字数制限にご注意ください。 注意: 参考記事 |