bloggerの見出しをカスタマイズする方法

Bloggerの見出し

Bloggerの見出しってシンプルすぎますよね？

今回は、その見出しを少しカスタマイズしてみました。

基本的にBloggerでは
見出しに使われているhタグは標準設定では以下のようになっています。

h1→ブログタイトル
h2→見出し
h3→日付、小見出し
h4→準見出し
h5→設定なし
h6→設定なし


そして標準設定で、見出しを使うと、以下のようにフォントが大きく太字というとてもシンプルな見出しになってしまいます。





でも他のHPとか見ると、もっとおしゃれな見出しがたくさん使われていますよね？
それを今回は簡単に導入してみました。

見出しのカスタマイズ方法は2通り

大きく分けて、bloggerの見出しをカスタマイズする方法は二通りあります。
ホームページのHTMLを直接いじる方法とCSSを利用する方法です。

HTMLを直接いじる方法は、少しブログ初心者の私には難しかったのと、失敗したときに取り返しがつかなくなりそうだったので、今回はCSSを利用してみました。

まずは下の画像のようにテーマを選択し、そこからカスタマイズボタンを押します。



次に、上級者向けのCSSを追加という所に、使いたい見出しのCSSコードを挿入します。

CSSコードの例はネットにいくらでも落ちているのでそれを参考にしてください。
大体
<h1～
という感じでコードが書いてありますので、このh1という所をh2に変更して、この欄に張り付ければ、bloggerの記事を書いているときに見出しを適用すれば、
このコードをもとに新しい見出しが作れます。

同じように小見出しを変更したければh1をh3に変更すればよいです。















これを適用すると下の写真のように、おしゃれな見出しの出来上がりです。

この方法の利点は、HTMLを編集せずにCSSの所においてあるだけ、つまり元のHTMLをいじっているわけではないので、他の見出しに変更することがとても簡単です。

また元のHTMLを適当にいじって取り返しのつかない状態になることを防ぐこともできます。

また、いちいちHTMLで見出しのコードを挿入する必要がなく、
投稿の見出しボタンを選択するだけで、このおしゃれな見出しを作れるのも利点ですね。

今回はここまでとします。
私も初心者ですので、もし間違いなどありましたら、ご指摘いただけますと幸いです。