Bloggerのテンプレート「QooQ」とカスタマイズまとめ-iaoekaki

Bloggerを自分で使いやすいようにと施したカスタマイズの備忘録です。

テーマ選定

Blogger公式で用意されているテーマでもよかったのですが、あまり日本語ブログ向きではないかなと思い外部から探してくることにしました。

テーマの候補

PCからは2カラムで、モバイルでは1カラムで表示されるレスポンシブデザインであることを条件に探しました。

くうく堂

Materiapollo
Movelog

veta
ZELO

BTemplates（海外のテンプレート集）

以上のテーマが、シンプルにカスタマイズしやすそうかなと候補になりました。

最後の「BTemplates」以外はすべて日本語向けに作られています。
「BTemplates」にはおしゃれなテンプレートがたくさんあったのですが、英語で書かれたブログと日本語で書かれたブログでは向いているデザインが違うため、公式テーマと同様に採用を見送ることにしました。

使用したテーマ「QooQ」

検討した結果「QooQ」を使用することにしました。

blogger日本語テンプレート「QooQ」ダウンロードページ

ダウンロード QooQダウンロード（59KB） QooQ list版ダウンロード（59KB）ワードプレス版「...

デザイン面でいうと同じ「くうく堂」さんの「Tokyo」「Kyoto」もシンプルで捨て難かったのですが、最新の「QooQ」が正統進化版で、直近のBloggerの変更にも対応しているようだったのでこちらを選びました。
ソースコードが見やすくカスタマイズもしやすいです。

カスタマイズ

直にCSSでデザイン変更を結構加えましたが、整頓されたコードでとてもいじりやすかったです。

その他の大きなカスタマイズは主に以下へ。
カスタマイズしたら随時追加していきます。

自動目次機能

はてなブログやWordPress、noteなどでもよくある目次を挿入する機能がBloggerにはありません。
こちらを参考に、見出しを自動で検出し目次を生成するプラグインを導入しました。

見出しの数によって目次をつける・つけない等も設定できて便利です。

Font Awesome

QooQでは表示を高速化するためにFont Awesomeは省かれたそうなのですがやはりあると便利なので引き戻しました。

最終更新日の表示

こちらを参考に、記事を追記した際に投稿日の横に更新日を表示するようにしました。

記事の通りに変更すると、更新日が表示されないときでも更新マークのみ表示されてしまうので、以下のようにカスタマイズしました。

最終更新日を出力する1行
document.getElementById("last-modified").innerHTML = updated_dd;
を
document.getElementById("last-modified").innerHTML = "<i aria-hidden='true' class='fa fa-history' style='margin-left:1.0em;margin-right:.3em'></i>" + updated_dd;
へ書き換えました。
下線部分で更新アイコン「」を書き加えています。