Bloggerの見出しをCSSで変更する

　どうもこんにちは、ゴーさんです。悪戦苦闘しながらもBloggerを弄り回しています。

　今日は、おしゃれなブログ、読みやすいブログを見ると、「見出し」をかっこいいのにしているな、、ということで、見出しを頑張って変更してみました。



　ちなみに、僕のプログラムの知識は、まったくないに等しいので、ほかのブログを参考にフィーリングでやってみました。

１　見出しの変更の仕方を調べる。

「Blogger　見出し」などで検索してみると、いくつかブログがヒットするのですが、いまいちやり方がわかりません。デザインは、付箋（インデックス）風のデザインで周りが囲まれていて、一番左に四角のアクセントがある見出しの使い方が多いです。

Bloggerの本文見出しをカスタマイズする　デジタル小噺
http://ryoh1212.blogspot.jp/2012/10/blogger.html

　最終的には、このデザインは使いませんでしたが、このブログを参考に勉強して、どうも、テンプレートからCSSというコードを追加したら、見出しがまとめてかわるようだということがわかりました。
　CSS（というのが何かわかっていませんが）の追加は、グーグルサーチコンソールを使うときやフォントを変更するときに、一応経験済みです。

　また、見出しにhタグというものがあるというのを理解しますが、h１はブログタイトル？h２は？h３が見出しかな・・・という程度で、「h＊」が何に対応しているのかはわかりません。

２　デザインを探してみる。

CSSの追加で見出しのデザインを変えられるのなら、いちどどんなデザインがあるのか探してみるか、、ということで、また検索です。
　「見出し　CSS 　ブログ」なんかで検索すると、たくさん出てきます。

ぜひ参考にしたい！CSSで作られた見出しアイデア40選　NESTonline Blog
http://blog.nest-online.jp/14714


　予想以上にかっこいいデザインの見出しがたくさんあります。僕の趣味はできたら、シンプルなデザインがいいので、

CSSで作る見出しデザイン　Web's Note
http://webnonotes.com/css/heading_sample/

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50　Nx Worldhttp://www.nxworld.net/tips/50-css-heading-styling.html

　この２つのサイトから、拝借させていただくことにしました。
　ありがとうございます。

3　ソースをコピペしてCSSに追加してみる

デザインを選んだらソースが書いてあるので、それをコピペして、CSSに追加してみます。

　テンプレートデザイナ　→　上級者向け　→　CSSを追加から、えいや！とコピペして、Web's Noteさんのソースの場合、hタグのかわりに「.heading（数字）」と書かれているようなので、これをh１、h２、h３、h４と順番に変更、摘要していき、ブログをみてどこがどう変わっていっているのかを確認しました。

　最終的に

小見出しのh３をこれに

準見出しのh４をこれにしました

　最初は、まったくちんぷんかんぷんでしたが、ソースをコピペさせてもらって、「.heading（数字）」の部分をh＊に書き換えたらいいということがわかったら、なんとかできました（他のサイトだと「.heading（数字）」の部分が違う表記になっているのだと思います。）
　しかし、ものによってはデザインが崩れるそうなので、そうなったらお手上げですね。


　次は、「関連記事はこちら」というガジェットを使いたいのと、ソーシャルボタンを変えたいのと、フォントが小さいので少し大きくしたいなと思っています。