Blogger用無料テンプレートQooQ導入とカスタマイズまとめ

 　Googleが提供する無料ブログサービスBloggerには、外部の無料テンプレートが導入できます。
　外部の無料テンプレートの導入は簡単なものですが初めて行うと、戸惑うことも多くあります。

　そこで、私が実際に行った手順をシェアしたいと思います。

　ということで、無料ブログサービスのBloggerにQooQという外部の無料テンプレートを導入して、細かなカスタマイズの内容や方法が分かる記事になっています。

　さて、Bloggerは、Googleが提供している無料ブログサービスです。

　また、同じくGoogleが提供しているAdSenseやアナリスティック、Search Consoleとの親和性も高く、導入も簡単です。

　もし、まだ導入していない方は、こちらの記事をご覧ください。

　→Bloggerにログインから使い方。無料ブログサービスBloggerの初めの一歩！

　BloggerはWebデザインを標準テーマから選んで好きなもに簡単に変更でします。
　しかし、標準テーマ以外にも、無料の外部テンプレートがたくさんあります。
　その中の、日本語ベースのテンプレートが、QooQと呼ばれるテンプレートです。

　QooQテンプレートは、導入すればそのまま使用できますが、カスタマイズで、ユーザーエクスペリエンスを向上させることができます。

　また、たくさんのBloggerを使用されている方々が多くの情報を提供してくれるので、とても参考になります。

　今回は、そんな情報をもとに、このブログでやったQooQ導入から、カスタマイズをまとめてみます。

QooQテンプレートのカスタマイズまとめ

　QooQテンプレートは、無料テンプレートとして提供されています。

　また、無料テンプレートは他にQooQの他、SmartやMateriapolloもありますが、わたしはQooQを選びました。

　理由が知りたいですよね？

なぜ、QooQテンプレートなのか

　わたしはQooQ、SmartやMateriapolloという同じく無料テンプレートを実際にBloggerに導入して使ってみました。

　そして、PageSpeed Insights（ページスピードインサイト）とGoogle構造化データテストツールというSEO的なベンチマークをとった結果、QooQにしました。

　詳細はこちらの記事をご覧ください。

　→Bloggerの日本語対応外部テンプレート　Materiapolloテーマがカッコイイ！必須カスタマイズポイントはここだ！

ということで、今回はBloggerにQooQを導入をすすめていきます。

QooQの導入方法

QooQテンプレートはくうく堂様のサイトで無料配布されています。

Bloggerのテーマから簡単に導入できます。

詳細は、こちらの記事をご覧ください。

　→初心者がBloggerに外部テーマになる無料テンプレート”QooQ”を導入する

　記事の手順に沿って行えば導入は簡単にできます。

　しかし、カスタマイズとなるとちょっと難しいです。

　そこで、わたしが実際にやってみたカスタマイズとその導入方法をご紹介します。

　特に、初心者がわからなくなるのが”ＣＳＳの追加”ではないでしょうか。
　ですので、まずは、CSSの編集方法から説明します。

BloggerのCSSの追加編集方法

　CSSの編集方法はわかってしまえば、とても簡単でした。

　ただ、すこしわかり難い場所に”CSSを追加”があるので、かなり遠回りしました。

　もし、CSSの追加、編集がわからない場合は、こちあの記事をご覧ください。

　→Bloggerで”CSSを追加”する方法。HELP（ヘルプ）を見てもわからない”CSSを追加”の場所の謎

　

　さて、これで心配はなくなりました、カスタマイズをやってみましょう！

　QooQのカスタマイズとして、初めに行ったのは目次の追加です。

目次の自動生成カスタマイズ

　ブログを見ていると、記事の前に”目次”があるのをよく見かけますよね。

　記事を書いて、目次を作るのって手間だなぁって思いませんか？

　目次は自動で生成してくれるプラグインがあるのですが、Bloggerにもそのようなコードを公開されている方がいます。

　今回、紹介するカスタマイズは、ｈタグから自動で目次を生成してくれるコードです。
　また、このコードはQooQ以外でも使用できるので汎用性が高いです。　

　このコードはスケ郎のお話様の[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）記事を参考にさせていただきました。

　実際の導入は、こちらの記事をご覧ください。

　→初心者がBloggerの投稿記事に目次（TOC）の自動生成表示機能を導入する。

　QooQはカスタマイズしなくても十分なデザイン性があるのですが、わたしはスマホ画面時のハンバーガーメニューに憧れて、カスタマイズしました。

ハンバーガーメニュー化

　QooQのスマホ画面のナビゲーションメニュー表示のアイコンがちょっと小さいなと感じていました。　

　具体的には先に紹介したSmartのようなナビゲーションメニューにしたいと思いました。

　すこし、情報を検索していたところ、ふじやん(Fujiyan)様のふじろじっくというサイトの記事に、ドンピシャの記事がありコピペさせていただきました。

　詳細は、こちらの記事をご覧ください。

　→Blogger：QooQのスマホ表示のナビゲーションメニュー（MENU）表示をハンバーガーメニューアイコンにする！

　とても、カッコよくなり気に入っています。

　でも、プルダウンメニューにできるとなおいいなぁと感じてます。

　次もSmart風に寄せたいというカスタマイズです。

ページトップに戻るボタン追加

　PC画面だとマウス操作で、さほど苦労しない画面スクロールですが、スマホだと結構トップに戻るの面倒ですよね。

　そこで、ページトップに戻るボタンを追加しました。

　こちらは、へたよこ＠様のサイトの記事で、なんとガジェットから追加できるという優れものです。

　詳細は、こちらの記事をご覧ください。

　→QooQカスタマイズ”ページトップに戻るボタン”をガジェットで追加！超簡単導入！

　次は、結局採用しなかったカスタマイズです。

　なぜ採用しなかったかを順に説明します。

記事一覧の画像のアイキャッチを丸型から四角型に変更

　この記事のWebデザインでは、QooQはLISTタイプを採用しています。

　とても見やすいのですが、アイキャッチがすこし小さいかな？と感じました。
　それで、もう少し画像を大きく見せたくて、丸型から四角型に変更しました。

　この際に、画像の解像度も気になりサムネイルの画像の解像度も上げるカスタマイズを行いました。

　詳細は、こちらの記事をご覧ください。

　→QooQ_LISTテンプレートの記事一覧の画像をカスタマイズ！丸型を四角にしてちょっと大きな画像でキレイにする！

　結構いい感じになりましたが、次に説明するサイトの読み込みが遅くなるという悪影響がででいるようなので現在は見送っています。

　→QooQをPageSpeed Insights（ページスピードインサイト）でスピード比較！カスタマイズ前後でどう変わる？

　ただ、四角にするだけなら影響はないと思うんですが、四角だとやはりサムネイルの画像劣化が気になるなぁというところです。

　次から紹介するのは、カスタマイズというよりノウハウです。

アイキャッチ画像（featured image）を指定

　Bloggerの使用では投稿記事の一番初めにでてくる画像がアイキャッチになります。

　例えば、記事の中ごろに置いた画像をアイキャッチにしたいとなると、ちょっと困ります。

　対策として、アイキャッチにしたい画像を一番上に配置し、その上で投稿記事から、非表示にするというテクニックがあります。

　詳細はこちらの記事をご覧ください。

　→初心者がBloggerのアイキャッチ画像（featured image）を指定して表示させる方法

　ただ、この方法では、QooQの関連記事にアイキャッチといして表示されないという問題がありました。

　結局、わたしはアイキャッチを一番上に置くということで対処することにしています。

HTMLサイトマップの自動生成

　サイトマップがあると便利ですよね。

　しかし、記事を作るたびに、作り直すのは面倒です。

　このHTMLサイトマップを自動で生成するコードがありましたので紹介します。

　サイトマップの作成は、Helplogger様で公開されているスクリプトをコピペするだけで作れるので簡単です。

　→初心者がBloggerにHTMLの記事一覧のサイトマップ（SITMAP）を表示する機能を導入する。

　わたしは、ラベル毎の記事一覧を自動生成するコードを固定ページに配置し、ナビゲーションバーに”SITMAP”として、配置しました。

　ご興味があれば、ナビゲーションバーから該当ページをクリックしてみてください。

　また、この記事にも書かれているのですが、Bloggerの固定ページの作成がすこしわかり難いユーザーインターフェースですので補足します。

Bloggerの固定ページの作成

　わかってしまえば、迷うことはないのです。
　もし、ちょっとつまずいている方はこちらの記事もご覧ください。

　→初心者がBloggerの固定ページを導入する。固定ページの作り方とURLの設定方法の謎に挑む！

　みなさんは、すぐ気が付きました？

　ちょっと慣れないインターフェースで新規作成の方法がわかりませんでした。

特定のラベル一覧を表示

　ナビゲーションバーに特定の記事一覧を配置されている方を見受けられますよね。

　この記事一覧はラベルから生成されていて、ラベルのANDやOR,一覧記事のMax数量なども決めることができます。

　詳細はこちらの記事をご覧ください。

　→初心者がBloggerラベル（Label）毎の記事一覧をメニューに導入する。

まとめ

　ということで、ノウハウも含めて9個のカスタマイズ例の紹介でした。

　いずれも、参考にさせていただいたサイトで詳しい説明があります。

　とても参考になりました。この場を借りて感謝の意を。

　ありがとうございます！

　それでも、初心者のわたしが手間取ったところなんかを補足して記事にしていますので、よければご覧ください。

編集後記

　はじめは不慣れで、参考サイトに書かれている内容を理解できなかったのですが、だんだんと理解が進むとカスタマイズが楽しくて、そればっかりのブログになってしまいました。

　ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします！