記事を華やかにする「見出しデザイン」
CSSだけで反映できるなど手軽なカスタマイズとしても人気がありますが、その中で主に使用している大・中・小の３段階の見出し（h3タグ〜h5タグ）のデザイン変更について紹介いたします。
何度も試作・デザイン変更しているので、古いものが含まれますがご容赦ください。
CSSで「見出しデザイン」をカスタマイズ
はてなブログ利用者は、大・中・小の３段階の見出し（h3タグ〜h5タグ）を主に使用しますが、h1およびh2タグは通常設定できません。
一部の記事では、アクセス数増加やSEO対策を目的に『h1およびh2タグを積極的に活用しよう！』といった内容をみますが、これには注意が必要です！
h3タグ以降のみ変更する理由
Googleなどの検索エンジンに認めてもらうため、h1・h2タグなど上位タグをカスタマイズすれば、たしかに検索上位に出やすくなるのかもしれません。
一方、思わぬところに影響が出てしまうことがあるのです。
多くの方がデザインテーマを設定していると思いますが、h1・h2タグなど上位タグはブログタイトルやカテゴリーなど重要な場所で組み込まれているもの。
そんな重要な場所で思わぬ影響が出ないよう、見出しデザインを決める際は慎重に選ぶ必要があるのです。
【にせもんのホンモノ】の場合
使用しているテーマは『Minimalism』
カテゴリーページのタイトルにh2タグが組み込まれており、見出しデザインを変更した際に影響しました。最初の文字を大きくするシンプルな設定だったので、このままにしておりますが。
初心者のうちはh3タグ以降のデザイン変更に留めておいた方がよさそう。
見出しデザインを見直してみる
さて、見出しデザインを変更してみましょう。
今回もサルワカさんのサイトを参考にさせていただきました。
CSSをコピペすることで簡単に見出しデザインが反映されるのでオススメ。
見出しデザインは意外に気付かれないもの
せっかく見出しデザインを変更しても、アクセス数の多い有名ブロガーさんならまだしも、一般的なブログではあまり気付かれないことが多いようです。
before・after で整理してみました。
h3〜h5タグを中心に検討
冒頭にあるとおり、はてなブログで頻繁に使用する大・中・小の３段階の見出し（h3タグ〜h5タグ）を中心に検討してみました。
以前のデザインでは、帯状やライン（下線）を使用しておりアイコンも入れました。これが失敗で、見出しタイトルが２行になるとアイコンも２行分の高さとなるため、けっこう不細工に見えるんですね。
タイトルを短くするか、アイコンなしのデザインに変更するか…となれば、デザイン変更の方が楽ですよね。
あと、見やすさを意識してh4、h5タグは左端に縦ライン＋塗りあり（なし）で統一感あるシンプルなデザインに変更してみました。
トーンを意識してみる
見出しデザインを見直すにあたり、色彩のトーン（色調）を特に意識しました。
同じデザインでも色彩が異なるとガラリと印象も変わります。
CSSコードの中にある＃から始まる数字・アルファベット（例：#68be8d）を入れ替えることで変更できますのでお試しください。
今回も日本の伝統色から２色を選定
詳しい色見本やカラーコードはコチラを参照ください
若竹色（わかたけいろ）
白緑（びゃくろく）
前回は明度高めの色を選定
柔らかい印象を与える反面で少しボヤけて見えづらいという反省点がありました。
今回は彩度高め色を選定
冴えた印象を与えて文字も読みやすくしたつもりですが…分かりますか？
h6タグ＋ボックスデザインの追加
ブログを書いていると商品紹介やポイントも書きたくなりますよね？
そこで今回、h6タグ＋をボックスデザイン（囲み枠）も追加
色々試してみて落ち着いたのは変更後のコチラ
【h1タグ】見出しのデザイン
【h2タグ】見出しのデザイン
【h3タグ】見出しのデザイン
【h4タグ】見出しのデザイン
【h5タグ】見出しのデザイン
【h6タグ】見出しのデザイン
もっと学んで読みやすく楽しい記事が書けるよう勉強します。
（2020/4/29更新）
スポンサーリンク
記事を最後まで読んで頂いて、本当に有難うございます！
最後に一つお願いです。
当ブログ「にせもんのホンモノ」はブログランキングに参加しております。
少しでも面白い・参考になったと感じたら、バナーをクリックしてブログランキング上位になる応援をしていただけないでしょうか？
アナタのクリックが励みになります！
人気ブログランキング
また次の記事で会いましょう！
