今回はたくさんの見出しを作ってみました。コピペだけで、はてなブログの見出しがカスタマイズできます。デザインは選べる8種類！
CSSの勉強にもなると思うので、WEBデザイン勉強中の人も必見です。
ただし、使っているテーマによっては、うまくいかない可能性があります。ご了承ください。
コピペでできる見出しのカスタマイズ
見出しのサンプルとそのコードの一覧です。コードを下の場所（デザイン→カスタマイズ→デザインCSS）に張り付ければ、CSSが反映されます。テーマを読み込むコードが記述されていると思うので、その下にコピペしてください。
先にコードの見方だけ説明しておきます。
はてなの編集画面では、見出しのタグは以下のように設定されています。
大見出し ・・・ h3
中見出し ・・・ h4
小見出し ・・・ h5
中見出しの見出しを変えたいときはコード内の h3 → h4 に書き換えて下さい。小見出しを変更したい場合は h3 → h5 に書き換えて下さい。
見出しの背景、ライン、文字の色はご自身で好きな色に変更してください。
たとえば、
の下線部が背景色です。ここのカラーコードを書き換えると色が変わります。
同様に、
の下線部が文字の色です。
下線部がラインの色です。
下記のサイトからカラーコードが確認できます。コードをコピペして書き換えれば好きな色に変更できます。
もし使っているテーマの見出しデザインと重なってしまったら、下のコードを先に記述して、その後に見出しのコードを追加してください。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ1
左にカラーのラインが入ったシンプルな見出しです。よく見かける見出しのデザインですね。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ2
左に太めのライン、下に細めのラインが入った見出し。こちらもよく見かける見出しのデザインですね。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ3
上下にラインが入った見出し。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ4
見出しの下に2本のラインを重ねるデザイン。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ5
もみじさん（id:momijimom）からのリクエストでステッチ入りの見出しを作ってみました。ネイビーの背景色で、デニム生地風に。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ6
吹き出し風のデザイン。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ7
二枚の四角の背景を重ねてみました。色の組み合わせが楽しめる見出しです。
※ここにコードが表示されない場合は再度ページを読み込んでください。
見出しタイプ8
可愛い感じの見出し。たまに見かけるデザインですね。
※ここにコードが表示されない場合は再度ページを読み込んでください。
スポンサードリンク
スマホの見出し変更方法
スマホとPCのデザインを別にしている場合は、以下のようにデザインを設定してください。
スマホの見出しを変えたい場合は、デザイン→スマートフォン→記事上にコピペしてください。その場合、<style>タグを記述して、その中にコードをコピペしてください。
<style>
ここにコードをコピペしてください。
</style>
これでスマホの見出しも変更できます。
注：当ブログのコードで不具合が発生した場合の責任は負いかねますので、ご了承ください。カスタマイズは自己責任でお願いいたします。
このブログのデザインも飽きてきたのでそろそろ大幅な改修でもしようかな。
他にもこんな記事書いてます。