2021年版 使いやすいBloggerテンプレートはどれだ？

ブログをはじめて３年ほど経ち、今では Bloggerで使うテンプレートは「QooQ」というテンプレートが私が作成した「目次自動プラグイン」との相性もよく安定してずっと使っています。

テンプレートはデザインも重要ですが、SEO対策されているかも重要な選定要素です。
またGoogleの検索エンジンは、表示速度が遅いページや、読み込み中に画面がカタカタ動いたりするページを嫌うため、なるべく軽いHTMLになっているテンプレートを選ぶことも大切です。

よく「見た目やSEOよりも記事の中身が重要だ！！」って意見もよく耳にしますが、やっぱりデザインはこだわりたいし、見た目が汚い記事って正直読む気が無くなるので、離脱率を考えると読みやすいブログデザインにするのは、最終的にはSEO対策になっていると思います。

今回は無料ブログサービスのBloggerで使える、２０２１年に使える便利なテンプレートを４つ紹介します。紹介するテンプレートは、どれもカスタマイズしやすくSEOを施されているため、ダウンロードして自分のブログに適用すれば簡単に使えます。

【関連記事】
▶使いやすいBloggerテンプレート3選！2020年に使うべき便利なテンプレート

スポンサーリンク

QooQ

配布サイト：https://qooq.dododori.com/blogger/qooq-download/

去年に引き続き「QooQ」はお勧めのテンプレートです。

QooQは日本人の方が作成されたテンプレートで、日本語対応でSEO対策済の優れたテンプレートです。また、BloggerだけでなくWordPress版のテンプレートもあります。

このブログでも使用しており、テンプレートをダウンロードして適用するだけで、今時のデザインのブログが完成します。

カスタマイズが容易

カスタマイズも、Bloggerの[テーマ] => [カスタマイズ]から容易にカスタマイズでき、さらに「QooQ カスタマイズ」などとネットで検索すれば、CSSを編集してカスタマイズする方法も多数紹介されています。

記事の一覧を「カード型」か「リスト形式」で表示する２タイプがありますので、好きな方をダウンロードしましょう。記事の詳細はどちらのテンプレートでも同じデザインです。

見出し（h2, h3, h4などのタグ）から目次を自動生成する機能はありませんが、私が作成した目次自動作成プラグインを導入することで、目次の生成も可能です。

レスポンシブ対応

レスポンシブデザインにも対応され、PCブラウザ、スマホ・タブレットなどのデバイスに応じて自動的にレイアウトが調整されるよう、CSSが設計されています。

QooQを適用したこのブログを、PCブラウザやスマホで見ると次のような感じになります。

【トップページ】

【記事本文のページ】

ブラウザの解像度を見て、自動的にPC表示 or スマホ表示に切り替えるレスポンシブ対応がしっかりされています！

ページ表示速度も早い

QooQのスピードテスト用のページをPageSpeed Insightsで測定してみると、スコアが「82」となりました。画像も使われている中で、このスコアであれば表示速度は早いと言えるでしょう。

Orange ZELO

ZELOシリーズは、QooQと並ぶ人気のテンプレートです。

今回はZELOシリーズの中から、Blogger本来の機能を最大限に生かしたテンプレートの「Orange ZELO」を紹介します。

表示が早い

ZELOシリーズ全体を通して言えるのは、表示速度の速さです。

作者が公開しているサンプルサイトがあり、そこで表示速度を試すろt、メインのHTMLの読み込には600ミリ秒ほどしかかからず、その表示速度の速さが数値で見て分かります。

Orange ZELOのサンプルサイト
https://contenppp.blogspot.com/?m=1

レスポンシブ対応

Orange ZELOもレスポンシブ対応で、PCブラウザ、スマホ・タブレットなどのデバイスに応じて自動的にレイアウトが調整されるよう、CSSが設計されています。

「Orange ZELO」のサンプルページを、PCブラウザやスマホで見ると次のような感じになります。

【トップページ】

【記事本文のページ】

吹き出し対応

WordPressでは割と多い吹き出し機能ですが、Orange ZELOはBloggerでも吹き出しに対応しています。

吹き出しは、次のようなイメージで表示されます。

吹き出しにする場所は、次のような感じにHTMLを編集する必要がありますが、そこまで難しい手順ではないため、最近多い吹き出し表示のブログを作りたい方にはお勧めです。

<div class="f-l touson">吹き出しに入れる文書</div>

Smart

配布サイト：https://blogger-learning-rab.blogspot.com/2020/09/smart.html

「Smart」は、2020年9月ごろに公開された比較的新しいテンプレートです。

こちらも日本人の方が作成されたテンプレートで、日本語対応で最低限必要なSEO対策もされたテンプレートです。

Smartの特徴

テンプレート配布サイトでは、Smartの特徴について次のように書かれています。

• 可変ヘッダーナビ：ヘッダーナビがデバイスのサイズに合わせて変化します
• 代替サムネイル：画像なし記事でも記事リストと人気記事に自動で代替サムネイルが挿入されます
• ページトップボタン：常に表示させるページトップに移動するボタンです
• 自動目次機能（※選択可能）：記事の見出しから自動で目次が生成されます
• 記事中・記事下アドセンス貼り付け欄：投稿ページの記事内にアドセンス欄を設けてあります
• SNSボタン：Facebook、Twitter、はてなブックマーク、Pocket、LINEボタンを標準搭載しています
• 関連記事表示機能：ラベルから関連する記事を表示させる機能です
• 番号付きページナビ：記事リストの下部には番号付きページナビが表示されます
• 最新記事ガジェット：Bloggerには無い最新記事ガジェットです
• カスタム人気記事ガジェット：オリジナルの人気記事ガジェットです。
• カスタムアーカイブガジェット：開閉可能のブログアーカイブです
• 404ページ：404ページを標準搭載しているので、カスタム設定不要です

このように、Smartには非常に多くの機能が盛り込まれており、テンプレートを適用してSNSボタンなどの設定を行えば、すぐに今時のデザインのブログを作成できます。

レスポンシブ対応

こちらのテンプレートも、レスポンシブデザインにも対応し、PCブラウザ・スマホ・タブレットなどのデバイスに応じて自動的にレイアウトが調整されるよう、CSSが設計されています。

「Smart」のサンプルページを、PCブラウザやスマホで見ると次のような感じになります。

デフォルトだと、スマホ表示でも本文の周りにカード表示の枠が表示され、本文の表示領域が若干狭くなっていますが、ソースコードをカスタマイズすれば調整は可能だとは思います。

ソースコードが分かりやすい

カスタマイズする時に重要なのが、ソースコードの読みやすさです。
Smartは、次のようにソースの至る所に日本語コメントが書かれており、カスタマイズがしやすくなっています。

ページ表示速度も比較的早い

SmartはWebフォントや、JQueryを使用しているためページ表示速度は心配でしたが、画像もいくつか使われているサンプルページを、PageSpeed Insightsで測定してみるとスコアが「77」となかなかの結果となりました。

まとめ

2021年版の、Bloggerのお勧めテンプレートを紹介してきました。

日本製のテンプレートは「Smart」などの新しいテンプレートも徐々に生まれてはいますが、「QooQ」と「ZELO」シリーズが定着している状況と言えるでしょう。

海外のテンプレートに目を向けると、日々新しいものが生まれている状況で、定番という物はなく、目まぐるしく状況が変わっていっています。