いらっしゃい、あるく(@arc_imaiki)です
このブログは、はてなブログの「brooklyn」のテーマを使わせていただいています（2018.8月現在はZENO－TEALにテーマを変更しています）
「brooklyn」はとってもスタイリッシュで使い勝手のいいデザインだと思いますが、ちょびっと個性を出したい、そんな風に考えている方もいるんじゃないでしょうか？
そこで今回は、あるくが変更したことを忘れないために、備忘録も兼ねながら、はてなブログで「見出しのデザインの変更」をおこなった方法と、大見出しを「ｈ３」⇒「ｈ２」に変更した方法について書きます
見出しのデザインを変えたいと思っている方、「ｈ２」タグの見出しを使いたいと思っている方は、ご覧になって、参考にしてみてください
●見出しのデザインを変えたい人
●見出しのデザインを変えたいけど上手くいかない人
●「ｈ２」タグの見出しを使いたい人
- 見出しのデザインの変更方法
- 見出しのデザインを変更するさいに参考にさせて頂いた記事一覧
- はてなブログの大見出しを「ｈ３」⇒「ｈ２」に変更した理由
- 「はてなブログ」で過去記事を「ｈ２」タグに自動で書き変えた方法
- おわりに
- この記事のポイント
見出しのデザインの変更方法
「はてなブログ」で見出しを変更する方法はとっても簡単です
※「デザイン」やCSSを変更するさいは、必ずバックアップをとったうえで行いましょう
見出しデザインの変更の方法
方法としては、２手順と、とても簡単なんですが、あるくはなかなか上手くいきませんでした、詳しくは後述します
見出しのデザインを変えるときに気をつけること
あるくがおこなった「はてなブログ」の見出しの変更は、
大見出し「ｈ３」⇒「ｈ２」に変更
中見出し「ｈ４」⇒「ｈ３」に変更
小見出し「ｈ５」⇒「ｈ５」に変更
といった３つです
見出しのデザインを公開してくださってる方は、たくさんのデザインを「ｈ１」タグや「ｈ３」タグなど、共通のタグでCSSを書いています
使いたい見出しの大きさにあわせて、修正して使うようにしましょう
また「文字の色」「背景の色」「下線（アンダーライン）」なども
「color」
「background-color」
「border」
の後の「#E9A634」などの部分を変更することで、好きな色に変更できます
お好みにあわせて調整しましょう
なお、色のコードはこちらを参考にしています
ほとんどの方が、見出しのデザインを公開してくださってるページに「注意書き」として、「タグ」や「文字や背景などの色」を変更する方法を記載してくださっています
きちんと読んで、作業しましょう（←本当にここ自戒です）
見出しのデザインを変えるまでの失敗と成功の道のり
見出しデザインを変更する方法は先ほど書いたとおり、とっても簡単で済むように、たくさんの方が公開して下さってるんです
それにも関わらず、あるくはスムーズに「見出しデザイン」を変更できませんでした
この失敗談がどなたかの役に立つことを願って、ここに書いておきます
実は以前にも、見出しのデザインを変えようと思ったことがあったのですが、そのときも上記のように、気に入ったデザインのCSSをコピペさせていただきました
ところが、
●デザインが変わらない
●デザインが化ける
●デザインが表示されない
などのトラブルにみまわれ、CSSなど全く分からないあるくは「おかしくなるより普通に使えた方がいい」と思い、見出しデザイン変更前の状態に戻してブログを続けていました
でも同じ「brooklyn」のテーマを使っているたくさんの方々が、見出しデザインなどのカスタマイズをされているのを何度も見かけました
やっぱりちゃんと方法があるんだ！
そう思って再度、見出しデザインの変更にチャレンジすることにしました
それでも、やっぱりデザインが変わらなかったり、化けてしまって上手く表示されません、、、
ちょっと途方にくれかけたとき、こんな記事をみかけました
affiliate-couple.hatenablog.com
こちらの記事の中で、CSSを変更しても「brooklyn」のデザインと重なってしまうので、見出しのリセットが必要だと書かれていました
そうか！これが原因だったのか！！
さらに記事の中で、見出しのリセットのCSSも載せてくださってたので、一気に作業を進めることができました（運営されているGENさん様、peeco様、とても助かりました、ありがとうございました）
これで素敵な見出しのデザインを探せると思って、あらためて「brooklyn」のテーマを作成された「シロマ」様の見出しデザインの記事を読んでいました
こちらの記事です
するとっ、、
、、、、、、
、、、、
、、、！！！！？
もし使っているテーマの見出しデザインと重なってしまったら、下のコードを先に記述して、その後に見出しのコードを追加してください。
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ - NO TITLE
しっかり記事の中で、デザインが重なるようなら先に見出しコードをリセットしてから、コードを追加するよう書かれてました（わぁぁ！しっかり読まないでごめんなさいー、、）
過去に見出しのデザインを変えようと思ったときも、こちらの記事は拝見させていただいてたので、完全に見落としてたんです！！
今回の件で、あらためて公開されている方のCSSを利用させてもらうときは、「きちんと、くまなく記事を読んでから利用しよう！！！」と思いました
なので、見出しのデザインが上手く変えられなくて困ってるあなたも、もしかしたら先に見出しのリセットのコードを記述してから、見出しのコードを記述すると上手くいくかもしれませんよ！
見出しのデザインを変更するさいに参考にさせて頂いた記事一覧
たくさんの方々が、シンプルなものから、少し凝ったもの、おしゃれなもの、色んな種類の見出しデザインを公開してくださってますので、見出しを変えたいと思った方は、ぜひご覧ください
本当にたくさんの種類のデザインが公開されいますよね
そのおかげで、CSSとか全然わからないあるくでもカスタマイズを楽しむことができています、公開してくださってるたくさんの方々に感謝申し上げます
本当にありがとうございます
はてなブログの大見出しを「ｈ３」⇒「ｈ２」に変更した理由
さて、ここからは「はてなブログ」で「ｈ２」タグを使うことにした理由と方法を書きたいと思います
こちらは別記事で公開しようかと思いましたが、あるくは「見出しのデザイン変更」と「ｈ２」タグを大見出しに使うことは、あわせて一緒にしたいと考えていたので、こちらにあわせて書かせてもらいます
「ｈ２」タグを使った方がSEO対策になる？検索流入が増える？
はてなブログの大見出しは「ｈ３」タグになっています
前にほかの方のブログを読んでいたときに、タイトルが「ｈ１」タグなので、「ｈ１」から「ｈ２」「ｈ３」と歯抜けにならないよう、順番にタグを使った方がSEOの効果は高いといったような記事をみかけました
あるくは詳しいことは分かりませんが、「ｈ２」タグを使うことで、もしSEOの効果があがって、ちょびっとでも検索流入が増えたら嬉しいな～
そう思ったので、「ｈ２」タグを使うことにしました
結果変わらなくてもなにも失わないし、もし１人でもみてくれる人が増えたらすごく嬉しいですもんね
明らかな変化がでれば、そのことも記事にできますし、レッツチャレンジ、チャレンジです
と、こんな風に「ｈ２」タグを使おうって思ったことが、はじめに紹介した「見出しのデザイン」をあらためて変えようと思ったことのきっかけでもありました
「はてなブログ」で過去記事を「ｈ２」タグに自動で書き変えた方法
はてなブログの大見出しをこれからは「ｈ２」タグを使って書くようにしよう
これは、「HTML編集」で「ｈ３」を「ｈ２」に打ち変えることも手間だけど、できなくはないので、問題ありません
困ったのが「過去記事」です
１００記事以上ある記事を１つ１つ変えるのは、すごく時間がかかります
ほとんどの記事が「リライト」や「再編集」したいと思っている記事なので、あわせてコツコツ取り組もうかとも思いましたが、もっといい方法がないか探してみました
そうしたら、こんな素敵な記事をみつけました
こちらの記事に書かれている方法で、過去記事の見出しを自動で書きかえることができました（ガイさん様、とても便利でした、ありがとうございます）
記事の中で、大見出し「ｈ３」問題について解説した記事もリンクが貼られてましたので、興味のある方はご覧になってみてください
※こちらの記事の中で「留意事項」として、注意が書いてあるので、利用する場合はよく読んで利用しましょう
※特に記事中にアドセンスを貼られている方は、影響がでる場合があります
対応の仕方も書いてあるので、しっかりと目をとおすようにしましょう
おわりに
今回は「はてなブログ」で見出しのデザインを変更する方法と、大見出しを「ｈ３」から「ｈ２」に変更する方法を書きました
CSSなどの知識がなくても、こうやって「デザイン」や「カスタマイズ」をかまうことができるのは、自分の知識やスキルを公開してくださっている方がいるからです
本当にありがとうございます！
あるく自身も途方にくれかけて、解決策を知ったのはやっぱり他の方のブログでした
同じように、「見出しのデザイン」が変わらないと困っている方や、「ｈ２」タグ使いたいけど「過去記事」全部買えるの大変だから困ってる、そんな方の解決のきっかけになれば幸いです
この記事のポイント
ほかの方の記事を参考にするさいは、しっかりと読み込んで利用しよう
（ほぼ自戒）
はてなブログでブログを運営されてる方は、こんな本が１冊手元にあると便利です
ブログで稼ぎたい！と思ってる方はこちらの本も参考になります
●こちらもどうぞ
●「あるくのいまいきっ！」のカテゴリー一覧ページへはこちらから
