Bloggerのテンプレートをデフォルトから変更しました。
適用したテンプレートは、シンプルで速い日本語bloggerテンプレート「QooQ（クーク）」。
デフォルトのテンプレートはカスタマイズが難しかったので、扱いやすいテンプレートを探していました。
「QooQ」はデザインがシンプルで、カスタマイズし易いテンプレートだと思います。
日本語Bloggerテンプレートの有名どころ
今回私は「QooQ」を利用しましたが、その他に、有名な日本語Bloggerテンプレートを４つ紹介します。Vaster2
紹介ページ
サンプルページ
一番有名な日本語Bloggerテンプレートです。
しかし残念ながら現在は、テンプレートのダウンロードリンクが無効になっており、ダウンロードできません。（2019年6月時点）
特徴
・シンプルなデザイン・テーマデザイナーによる簡単なカスタマイズ
・デザイン性の高いオリジナルSNSボタン
・関連記事の表示機能
・アドセンスの容易な設置
ZELO
Vaster2の次に有名な日本語Bloggerテンプレートです。
後継バージョンとして次に紹介するOrange ZELOというテンプレートがあります。今から利用を始めるのであれば、Orange ZELOの方をお勧めします。
特徴
・レスポンシブデザイン
・テーマデザイナーによる簡単なカスタマイズ
・ページ読み込みの高速化
・吹き出しのデザインが利用可能
・アドセンスの容易な配置
・最適化されたSNS共有
Orange ZELO
サンプルページ
ZELOの改善点を盛り込んで製作されたとのことで、Bloggerの機能を活かしつつ、デザイン性が向上しています。
特徴
・レスポンシブデザイン
・テーマデザイナーによる簡単なカスタマイズ
・ページ読み込みの高速化
・吹き出しやボタンのデザインが利用可能
・アドセンスの容易な配置
・ナビバーや関連記事などの多様なウィジット
・最新のBloggerバージョンに対応
・自動目次機能
Tokyo
紹介ページ
サンプルページ
シンプルなデザインのテンプレートです。
今回私が使用した「QooQ」は、「Tokyo」を製作した方が新しく作ったテンプレートです。
そのため「Tokyo」のデザインにこだわらないのであれば、「QooQ」の方をお勧めします。
特徴
・シンプルで見やすい2カラムデザイン
・レスポンシブデザイン
・テーマデザイナーでの簡単なカスタマイズ
・SEOの最適化
・関連記事をデフォルト表示
・画面の動きについてくるサイドバー
QooQ（クーク）について
「QooQ」は2019年3月にリリースされた、比較的新しい日本語Bloggerテンプレートです。
シンプルなデザインで、表示の高速化にもこだわった、スマートなテンプレートになっています。
デザインは、通常表示版とリスト表示版があり、このブログではリスト表示版を使用しています。
通常表示版
リスト表示版
QooQの特徴
・レスポンシブデザイン
・シンプルで軽量化されたデザイン
・表示の高速化
・SEO最適化
・可読性の高いCSS
・パンくずリスト、関連記事機能
・アドセンスの容易な配置
QooQを選んだ理由
私が今回QooQを選んだ理由は、以下の３つです。
１．デザイン性
リスト版のサンプルページを見てもらえるとわかりますが、デザインがシンプルで、とても見やすいです。
２．新しい
2019年3月にリリースされたテンプレートのため、有名な日本語Bloggerテンプレートの中では、最も新しいテンプレートのひとつではないかと思います。
３．安心感
QooQを使ってみた感想
試行錯誤しながら、自分好みになるように色々とカスタマイズをしている最中です。
まだ勉強不足でソース全体の把握はできてはいませんが、デフォルトのテンプレートより断然可読性が高いです。
特にCSSは、どこをいじればいいのか分かりやすいので、カスタマイズし易いと思います。
特にCSSは、どこをいじればいいのか分かりやすいので、カスタマイズし易いと思います。
・配色の変更
⇒ブルーをテーマカラーとしました。
・ナビゲーション削除
⇒画面上部のナビゲーションは、今のところ不要なので削除しました。
・個別記事へのリンク範囲拡大
⇒記事一覧のページで、個別記事の枠全体にリンク範囲を拡大しました。
まとめ
最初は、Bloggerのデフォルトテンプレートを元に、HTMLやCSSを勉強しながら自分でいじっていこうと考えていました。
しかし、編集画面を見ていても、全体の構造がつかめず、何がどこにつながるのか、全く理解できませんでした。
今回、QooQを適用して、ソースが読み易くなり、色々と試しながらカスタマイズできるようになりました。
私もそうですが、HTML、CSS等を勉強中の方は、Bloggerのデフォルトテンプレートではなく、日本語Bloggerテンプレートを適用してからカスタマイズしていくことをお勧めします。
これで勉強もはかどるぞ～！
フロントエンドエンジニアになりたい人の Webプログラミング入門
