【2020年版】Bloggerカスタマイズまとめ！変更方法や参考サイトなど紹介【中級者向け】

こんにちは！もなか（@monaka496）です。いつも記事を読んでいただきありがとうございます。最近、ちょこちょこ実施していたBloggerテンプレートのカスタマイズが完了しましたので、備忘録がてら記事にまとめたいと思います。

今回のカスタマイズは試行錯誤しながらなんとか形にしていきました。結構つまづいたり、うまくいかなかったことがありましたので、これからBloggerテンプレートのカスタマイズを検討されている方の参考になれば幸いです。なおこちらの記事はすでにある程度Bloggerを利用していたり、カスタマイズ経験がある方向けの記事となっていますのでご了承ください。

こちらの記事で解説しました。QooQの引用タグはデフォルトだと非常にシンプルだったので、より引用している感を出したかったためカスタマイズをしてみました。グレー背景になったり、イタリック体になったりするので、結構見やすくなりました。

よくあるおしゃれサイトにある機能を実装してみました。記事を書くときにHTMLビューを活用するため少し面倒になりますが、記事が読みやすくなるのと自分の考えていることの整理にもなるかと思いまして作ってみました。デザインはサルワカさんのテンプレート「Sango」を参考にしてみました。プロには到底かなわないですが、カスタマイズしたことでBloggerでもある程度見やすい記事を書けるようになったかなと思いました。

1年半くらいブログをやってきて、記事数が多くなってきました。アーカイブガジェットが縦にかなりスペースを取るようになってきたため、プルダウン式に変更してみました。変更方法はBlogger管理画面のガジェット編集画面から簡単に切り替えられました。

デザインのカスタマイズは 76log さんの記事を参考にさせていただきました。めちゃくちゃおしゃれにカスタマイズされているのでリスペクトです・・・！

こちらも 76log さんの記事を参考にさせていただきました。記事のとおりにカスタマイズすることでグッとおしゃれになりました。ありがたく使わせていただいています。バナー画像はcanvaのテンプレートの文字部分を削除して作成しました。

記事数が増えてきたことでラベルが多くなりごちゃごちゃしていたので、思い切ってフッターをガツッと変更してみました。ラベルのところはFontAwesomeを使って「＞」マークを手前に持ってくるように変更しています。

なぜFontAwesomeを使ったかというと、1点つまづきポイントがありまして、ラベルガジェットのリストの「・」がフッターだとなぜか表示されなかったためです。そのためFontAwesomeでいい感じのアイコンを引っ張ってきたという感じです。

またサイト内検索についても横幅が「max-width:16em」になっているところを「22em」に変更しました。これでバランスが良くなったかなと思います。

ちなみにフッターに何のコンテンツを置くかは、GIGAZINEさんとサルワカさん、Yahooニュース、JR東日本のサイトを眺めながら、「うーん」と唸りながら考えて作成しました。本当はJR東日本みたいにフッターにアコーディオンを実装して、いい感じにしたかったのですが自分の知識では難しく、結局こういう仕上がりにしました。

今回は今年Bloggerでカスタマイズした内容と参考にしたサイトを紹介しました。久しぶりにテンプレートをカスタマイズすると楽しいですね。なかなかうまく行かなかったところが、うまい具合に解決すると達成感があって非常に楽しかったです。QooQは利用している方も多いのでカスタマイズの記事が多く、参考にさせてもらっています！しばらくはこのデザインで行こうと思いますが、また気が向いたらカスタマイズしてみたいと思います。