- 公開日：
- 更新日：
Google Bloggerのテンプレートに関する情報まとめ
この記事では、Google Bloggerのテンプレートに関する情報をまとめています。
Bloggerのおすすめテンプレートをいくつかご紹介しているほか、テンプレートのカスタマイズ方法も説明しています。
テンプレートやカスタマイズを上手く利用して、自分好みのブログを作成しましょう。
Bloggerのおすすめテンプレート（無料含む）
公式のテンプレート
どのテンプレートを使えば良いのか分からない場合は、Blogger公式のテンプレートを使ってみるのも良いでしょう。
公式のテンプレートは比較的シンプルなデザインのものが多く、記事投稿に集中したいユーザーにはおすすめです。
個性を出すにはある程度自分でカスタマイズをする必要がありますが、シンプルなブログを作成したい場合、すぐにでも記事投稿に取り掛かりたい場合は公式テンプレートの使用を検討してみてください。
Bloggerの管理画面で「テーマ」を選択すると、公式のテンプレートが一覧表示されます。
公式テンプレートは全14種類あり、カラーバリエーションも豊富です。
以下では、Bloggerで使用できる公式テンプレートの一部をご紹介します。
「Contempo」は、更新した記事を目立たせたい場合に有効なテンプレートです。
全体的にまとまりのあるデザインとなっており、画像と文章のバランスも良いため、初めてブログを書き始める人におすすめです。
「Soho」は、トップページにメインとなる画像を設定できるテンプレートです。
トップページにも記事画像が美しく表示されるので、ブログに写真や画像を多く掲載したい場合におすすめです。
「Emporio」は、記事をカード型で表示させることができるおしゃれなテンプレートです。
画像と文章を1つのカードのようにまとめることで、内容が目に入りやすくなります。
「Notable」は、文章メインのブログに最適なテンプレートです。
本文と抜粋の幅が広くとられているため全体的に読みやすく、エッセイや小説を掲載する際にもおすすめです。
「Essential」は、2020年4月に追加されたテンプレートです。
新着記事が1カラムで表示されるため、ミニマルなデザインを好むユーザーには特におすすめです。
シンプルなテンプレート
「Shine」はシンプルで使いやすい無料のテンプレートです。
まとまりのあるデザインにすることで、記事の内容が目に入りやすくなります。
Shineは以下のサイトからダウンロードできます。英語表記のサイトですが、緑色の「Download」ボタンを押せばダウンロードできます。
その他にもさまざまな無料テンプレートが配布されていますので、ぜひご覧ください。
おしゃれなテンプレート
「Amara」は、インパクトのあるタイトルがおしゃれな無料のテンプレートです。
ページの上部にメニューを設置できたり、トップページに画像をギャラリーのように表示できたりと、おしゃれなだけでなく便利な機能も詰まっています。
こちらのテンプレートは、白い「Free Download」ボタンを押すことでダウンロードできます。
無料で利用する場合、サイトの下部にコピーライト（著作権）が表示されます。
他にも無料でダウンロードできるおしゃれなテンプレートが配布されていますので、チェックしてみてください。
Amara A Clean & Responsive Fashion/Travel Blogger Template
ホームページ風テンプレート
「ラクーンドッグ」は、Bloggerをホームページ風にカスタマイズできる無料テンプレートです。
Bloggerは自分で設定しない限り広告も表示されませんので、トップページをホームページ風にするのも良いでしょう。
文字を読みやすくしたい/写真を大きくアピールしたい場合にもおすすめのテンプレートです。
モバイル対応レスポンシブテンプレート
レスポンシブテンプレートとは、PC/タブレット/スマホといったあらゆる画面サイズに応じて、サイトのレイアウトやデザインを適切に表示するテンプレートのことを言います。
こちらの画像は、レスポンシブテンプレートを使用したブログのトップページを表示したものです。
PCとスマホ、どちらにも違和感のない表示になっていることが分かります。
レスポンシブに対応していないテンプレートを使用すると、「スマホで見たときに表示が崩れる」「文字や画像の大きさが画面サイズに合っていない」といった問題が発生してしまいます。
そのため、テンプレートを選ぶときはなるべくレスポンシブ対応のものを選ぶようにしましょう。
なお、Bloggerの公式テンプレートは一部レスポンシブに対応しています。レスポンシブ対応の公式テンプレートは以下の5つです。
- Contempo
- Soho
- Emporio
- Notable
- Essential
公式テンプレートの詳細については、本記事「公式のテンプレート」セクションをご参照ください。
また、本記事でご紹介しているテンプレートはすべてレスポンシブに対応しています。
レスポンシブテンプレートをお探しの場合は、ぜひ本記事で掲載しているテンプレートをダウンロードしてみてください。
日本語対応テンプレート
QooQ
「QooQ」は、カラフルでおしゃれなレイアウトが特徴的な日本語対応のテンプレートです。
カスタマイズもしやすく、HTML/CSSの知識がなくても簡単におしゃれなブログを作成することができます。
そのほか、ページの表示速度を早くするための工夫が施されていたり、SEOにも最適化されていたりと非常に魅力的なテンプレートです。
QooQは以下のページからダウンロードできます。テンプレートの仕様についても説明がありますので、ダウンロードをする際はご確認ください。
ZELO
「ZELO」は、シンプルで見やすいブログを作成したい場合におすすめの日本語対応テンプレートです。
見出し、引用のデザインや、SNS共有アイコンなどを適切に表示できるようあらかじめ設定してあるため、ダウンロードして適用するだけですぐに使い始めることができます。
ZELOは以下のリンクからダウンロードできます。テンプレートの詳細についても記載がありますので、ダウンロードの前にご確認ください。
Bloggerのテンプレートの使い方
Bloggerのテンプレートをダウンロード（適用）する方法、カスタマイズする方法などをご紹介します。
テンプレートをダウンロードする
Blogger公式のテンプレートを使用する場合、テンプレートはすぐに適用されるためダウンロードをする必要はありません。
ただし、公式以外のテンプレートを使用する場合は、以下の方法でファイルをダウンロードする必要があります。
ダウンロードしたいテンプレートを配布しているサイトにアクセスしましょう。
ここでは例として「QooQ」の配布サイトにアクセスします。
ダウンロードの項目がページ内にありますので、ダウンロード（例：QooQダウンロード）を選択します。
①エクスプローラー、②ダウンロードの順に選択すると、テンプレートの「.xmlファイル」がダウンロードされたことを確認できます。
この.xmlファイルはテンプレートを変更する際に使用します。
テンプレートを変更する方法については、下記「テンプレートを変更する」セクションをご覧ください。
テンプレートを変更する
ここでは、「公式テンプレートに変更する方法」と「公式以外のテンプレートに変更する方法」の2通りをご紹介します。
公式テンプレートに変更する
まずは公式テンプレートに変更する方法を説明します。
Bloggerの管理画面を開き、①テーマ、②変更したいテンプレートの順に選択します。
テンプレートのプレビューが大きく表示されます。
適用ボタンを押します。
これでテンプレートを変更することができました。
テンプレートが適用されたか確認するには、ブログを表示を選択します。
ブログが表示されます。先ほど選択したテンプレートに変更されていることを確認できました。
テンプレートをアップロードする
公式以外のテンプレートに変更するには、テンプレートの「.xmlファイル」をBloggerにアップロードする必要があります。
本記事「テンプレートをダウンロードする」セクションでは、実際に.xmlファイルをダウンロードする手順を説明しています。
以下では、テンプレートをアップロードする方法を説明します。
Bloggerの管理画面を開き、①テーマを選択し、②下矢印ボタンを押します。
元に戻すを選択します。
「元に戻す」ダイアログボックスが表示されます。
アップロードを選択します。
「開く」ダイアログボックスが表示されます。
①テンプレートの.xmlファイル（例：QooQ.xml）を選択し、②開くボタンを押します。
これでテンプレートのアップロードが完了しました。
テンプレートが適用されているか確認したい場合は、ブログを表示を選択します。
ブログが表示され、テンプレートが適用されていることを確認できました。
テンプレートをカスタマイズする
ヘッダーの色を変えたり、フォントを変えたりといったように、適用したテンプレートは自由にカスタマイズすることができます。
ここでは、公式テンプレート「Soho Light」を使用して、テンプレートをカスタマイズする方法を説明します。
トップページのカスタマイズ
お使いのテンプレートにもよりますが、Bloggerではトップページの「背景画像」を変更することができます。
ブログのトップページは多くの人が目にするページですので、ブログのテーマに合った画像を設定しましょう。
以下ではトップページの背景画像をカスタマイズする方法を説明します。
Bloggerの管理画面を開き、①テーマを選択し、②カスタマイズボタンを押します。
トップページのプレビューとカスタマイズ画面が表示されます。
上記画像でいうと、猫の画像が背景画像にあたります。背景画像は削除/変更が可能です。
ここでは例として画像を変更を選択します。
「背景画像を選択」ダイアログボックスが表示されます。
Bloggerテーマデザイナーには、背景画像として設定できる画像が沢山用意されています。もちろん自分の好きな画像をアップロードすることも可能です。
ここでは例として、①画像のイメージを表すタブ（例：抽象的）、②背景に設定したい画像、③完了の順に選択します。
これでトップページの背景画像を変更することができましたので、画面右下の保存を選択し、設定を適用してください。
ヘッダーのカスタマイズ
上記画像はBloggerのトップページです。赤枠で囲った部分を「ヘッダー」と言います。
Bloggerでは、ヘッダーの背景色、文字のフォント、文字色などを自由に変更できます。
以下ではヘッダーをカスタマイズする方法について説明します。
Bloggerの管理画面を開き、①テーマを選択し、②カスタマイズボタンを押します。
①詳細設定、②本文の順に選択します。
カスタマイズする箇所を選択するメニューが表示されますので、ヘッダーを選択します。
今回は試しにヘッダーの背景色を変更してみましょう。
「テーマの色」に気に入った色があれば、その中から色を選択しても構いません。ここでは例として、パレットアイコンを選択します。
「色の選択」ダイアログボックスが表示されます。
ヘッダーの背景色に設定したい色を選択します。
これでヘッダーの背景色を変更することができました。画面右下の保存を選択し、設定を適用してください。
テンプレートを自作する
Bloggerには、公式/非公式ともに豊富なテンプレートが用意されています。
しかし、もっと自分好みにアレンジしたい場合や、大きなカスタマイズを行いたい場合は、テンプレートを自作することも可能です。
テンプレートを作成する場合、まず空のテンプレートを用意し、要素を追加していくことで自分だけのテンプレートを作成することができます。
空のテンプレートを用意する場合、「<b:skin>と<b:section>を含んでいるか」「構文は正しいか」を確認する必要があります。
Google 公式のBlogger ヘルプでは、レイアウト用のタグについての記載がありますのでご確認ください。