テンプレートを見つけよう

ブログは内容で勝負!…と行きたいところですが、やっぱり見ばえの方も大事ですよね。このページでは、Blogger のテンプレート変更について紹介します。


テンプレートデザイナー
2010 年 3 月に Blogger in Draft (Blogger の新機能テストラボ)に「テンプレートデザイナー」という機能が追加され、2010 年 6 月には Blogger にも正式採用されています。この機能により、Blogger ユーザーは実際のデザインを確認しながら、感覚的にブログのテンプレートをカスタマイズできるようになりました。

現在では、基本的にはこの機能を使ってテンプレートをカスタマイズしていくのがいいと思います。


オリジナルテンプレート
一方で、そのような便利な機能が発表されるまでの間、Blogger ユーザーは Blogger ブログ用のオリジナルテンプレートというものを使って、ブログの見ばえを変更してきました。

以下、そんな Blogger ブログ用のオリジナルテンプレートを配布しているサイトについて紹介します。テンプレートデザイナーではピンとくるのがなかった人や、みんなとは違ったテンプレートを使ってみたいという人は、参考にしてください。


レイアウトテンプレートとクラシックテンプレート
その前に少し予備知識。Blogger のテンプレートには、レイアウトテンプレート(ヘルプ)とクラシックテンプレート(ヘルプ)という、2 種類のテンプレート形式が存在します。

現在の Blogger のデフォルトはレイアウトテンプレートですが、Blogger 管理画面「デザイン > HTML の編集」ページから「クラシックページに戻す」リンクをクリックすることで、クラシックテンプレートに変更することも可能です。

クラシックテンプレートにすると、レイアウトテンプレートで使えたカラー・フォント変更機能、レイアウト機能、ガジェット(ウィジェット)などの多くの機能が使えなくなるので、注意してください。

このページでは、レイアウトテンプレート配布サイト、クラシックテンプレート配布サイトと分けて並べておきますが、サイトによってはどちらも配布しているところがあります。テンプレートコードの中に
<$BlogPageTitle$>
などの見慣れないタグがあるのがクラシックテンプレートの特徴なので、どちらか迷ったときにはテンプレートコードを確認してみてくださいね。


レイアウトテンプレート配布サイト
以下がレイアウトテンプレート配布サイトのリストです。

レイアウトテンプレートを変更するには、各サイトで配布されているコードを PC 上に保存し(TXT ファイルでも XML ファイルでも OK)、Blogger 管理画面「デザイン > HTML の編集」の「テンプレートをバックアップ / 復元」の項目から、ファイルをアップロードしてください。

Envy Inc.
画像のリンクでプレビュー、「ダウンロード」から MediaFire ページに進み「Click here to start download..」リンクからコード(XML を圧縮した ZIP ファイル)を取得。

EXAMPLEBlogger Templates
Blogger テンプレートの老舗。
サムネイルクリックでプレビュー、「Download」で表示される XML ファイルを保存。

Beautiful Beta
サムネイルクリックでプレビュー、「Download template」でコード(XML を圧縮した ZIP ファイル)を取得。

Gecko & Fly
「Demo」でプレビュー。「Visit the XXXXX page」から各テンプレートごとの記事へ進み「Download the XXXXX Code」でコード(XML を圧縮した ZIP ファイル)を取得。

Blogger Beta Templates
「sample」でプレビュー、「More Details」ボタンで表示されるページのテキストエリアから、コードをコピーし XML(TXT でも可)ファイルを作成。

rakesh 2.0 likes to blog
「demo blog」でプレビュー、「Download XXXX template」からコード(TXT ファイル)を取得。
※「White & Blue」テンプレートはクラシックテンプレート。

Blogger Tips and Tricks
Blogger 標準テンプレート Thisaway シリーズ(4種)、Sand Dollar、Tic Tac 3、Ms Moto 3、Rounders 4 の 3 カラム版を配布。コードは、リンク先ページ(要 Blogcrowds アカウント)に表示されるものをコピーして XML(TXT でも可)ファイルを作成。

TemplatePanic
かわいらしいテンプレートがたくさん。「Live demo」でプレビュー、「XXXX Blogger Template」から ZIP ファイルをダウンロード。解凍してできる XML ファイルを使用。

EXAMPLEFree Blogger Skins
サムネールクリックでプレビュー、「XXXXX Blogger Template」から ZIP ファイルをダウンロード、解凍して使用。

EXAMPLEBlogger Templates by Aman
「Get Template」から ZIP ファイルをダウンロード、解凍して使用。「Works with the latest version of Blogger!」とあるものがレイアウトテンプレート用。



クラシックテンプレート配布サイト
以下がクラシックテンプレートの配布サイトのリストです。

クラシックテンプレートの変更は、各サイトで配布されているテンプレートコードを Blogger 管理画面「テンプレート > 現在の内容を編集」のテキストエリアに貼り付け、「テンプレートの変更内容を保存」ボタンでブログを再構築することで、適用することができます。

EXAMPLEBlogger Templates
Blogger テンプレート配布といえばここ。「Download HTML」から表示されるコードを使用。

EXAMPLEBlogger Templates for Blogspot Powered Blog
なかなかセンスのいいのが並んでいます。
「New Blogger Template」のラベルがついていないものがクラシックテンプレート。「Download Template」から zip ファイルをダウンロード、解凍して使います。

EXAMPLEBlogSkins.com
テンプレート投稿サイト。サイドバーからテンプレートを選択後、ページ中央の「Action」欄「preview it」でプレビュー、「Blogger Main」でコードを表示します。

EXAMPLEBlog Templates
「BLOGGER DOWNLOADS FOR THIS TEMPLATE」から「English」など言語名をクリック、zip ファイルをダウンロード、解凍して使用。

EXAMPLENOIPO.ORG
「example」でプレビュー、「download template」から zip ファイルをダウンロード、解凍して使用。

EXAMPLEBlogger Templates by Aman
「Get Template」から ZIP ファイルをダウンロード、解凍して使用。「Works with the latest version of Blogger!」とあるものはレイアウトテンプレート用。

EXAMPLETemplates para Blogger
Blogger ダッシュボードそのままなテンプレートを配布。ページ中央のテキストエリアのコードを使用。

EXAMPLECreateBlog.com
サムネールをクリックした後の画面上、「View full preview」でプレビュー、「Layout code」欄テキストエリアのコードを使用。

EXAMPLEhongkiat.com
これまでのテンプレートとかぶっているのもいくつか。
プレビューはなし、コードは「download」から zip ファイルをダウンロードし、解凍して使用。

EXAMPLEBlogger Templates By Caz
サムネールクリックでプレビュー、「Download Here」から zip ファイルをダウンロードし、解凍して使用。

EXAMPLEPannasmontata Templates
60 近くのテンプレートを配布。
「Preview」でプレビュー、コードは「Download」から zip ファイルをダウンロード、解凍して使用。

EXAMPLEKaushal Sheth
「Demo」からプレビュー。
コードは「Download」から zip ファイルをダウンロード、解凍して使用。

EXAMPLEHemingway template for Blogger
下半分だけ 3 カラムというおもしろい構成。「Sample sites」からプレビュー、コードは「Download」から zip ファイルをダウンロード、解凍して使用。

文字化け対策、エンコードのこと

Blogger ブログを運営していると、「ブログが真っ白に」「他の人のパソコンで見えない」「投稿メッセージが思ったとおりに表示されない」などといった、ページ表示上の問題が起こることがあります。

これらのほとんどは、ブラウザの文字エンコード方式の解釈ミス、いわゆる文字化けが原因です。そもそも欧米の人用にできている Blogger で日本語を使ったページを作るには、この文字化けへの対策が欠かせません。

ということで、ここでは、文字化け対策を3つほど紹介します。


1.テンプレートのタイトルとメタデータとを入れ替える
文字化けで一番多いのは、ページタイトルに日本語が使われているときです。Blogger の文字エンコード方式は UTF-8 が採用されていますが、ブラウザ(IE, Firefox, NN, Opera など)が、ページの HTML を頭から順に読んで解釈しているときに、そのエンコード方式が判明しないままに日本語が出て来てしまうと、文字化けする可能性が高いのです。

そこで、

レイアウトテンプレートの場合は、管理画面「レイアウト > HTML の編集」を確認し、

<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
 という順番にコードが表示されていれば
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
 と順番を変更します。

旧 Blogger および、クラシックテンプレート利用の新 Blogger の場合、管理画面「テンプレート > HTML の編集」から

<title><$BlogPageTitle$></title>
<$BlogMetaData$>
 という順になっているコードを入れ替え、
<$BlogMetaData$>
<title><$BlogPageTitle$></title>
 とします。

これでブラウザのエンコードミスを回避できるかと。ちなみに <b:include data='blog' name='all-head-content'/><$BlogMetaData$> は、エンコード方式などのタグを書き出すための Blogger 専用のテンプレートタグです。


2.テンプレートに使用言語を指定する
ついでに HTML の使用言語も指定しておきます。

レイアウトテンプレートの場合、管理画面「テンプレート > HTML の編集」から、html 要素の開始タグを

<html>
 から
<html lang="ja">
 に変更します。

クラシックテンプレートの場合、管理画面「テンプレート > HTML の編集」から、html 要素の開始タグを

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 から
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 に変更します。

ここは「この HTML ファイルはナントカ語で書かれているよ」と指定している部分です。ブラウザがこの部分にどれだけ反応するかわかりませんが、多少なりともエンコードミスを防げると思います。


3.テンプレートに XML 宣言を加える
Blogger で使われているページの書式は、正確には XHTML といいます。これは XML をうけついだ「HTML」だということなんですが、そのため XHTML 文書には XML としての宣言も必要になります。

具体的にはテンプレートの1行目で

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 と書かれている部分に
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 と赤字の部分を加えれば OK です。


以上で3つの予防策の紹介は終わりです。「ほかにもこういう方法があるよ」という方は、ぜひ教えてくださいね。

RSS を作成する

現在 Blogger では、ATOM フィードに加えて RSS フィードも配信されるようになっています。RSS フィードへのアクセス方法については、

を確認してください。

このページでは、外部のサービスを利用して RSS フィードを作る方法について紹介しています。「フィードのアクセス状況を調べたい」「フィードをまとめて管理したい」「フィードに AdSense 広告などの情報を追加したい」という場合に、参考にしてください。


FeedBurner で RSS を作成する
FeedBurner Blogger と同様に、Google が運営している FeedBurner というサービスを利用します。

FeedBurner を使うと、RSS フィードが作れるだけでなく、そのフィードへのアクセスを解析することができるようになります。それ以外にも、フィードにロゴ画像が載せたり、フィードの概要を編集したり、本文を一部公開にしたり、といった細かい設定が可能です。

FeedBurner サイトに Google アカウントでログインし、Blogger の Atom フィードの URL や希望するフィード URL を入力すると、簡単に RSS フィードを作成することができます。


FeedBurner フィードにリダイレクト
FeedBurner で RSS を作成したら、これまでのフィードへのアクセスを自動的に新しい RSS へ飛ばすための設定をします。

Blogger 管理画面「設定 > サイトフィード」の「フィード リダイレクト URL の登録」欄に、新しいフィードの URL を入力し、「設定を保存」ボタンを押すだけ。

これで、フィードリーダーなどでフィードを購読してきた読者にも、フィード URL を変更してもらうこと無しに、そのまま FeedBurner で作成したフィードを見てもらえるようになります。


FeedBurner に AdSense 広告を追加する
FeedBurner で作成したフィードに Google AdSense の広告を掲載することも可能です。

Google AdSense の管理画面「AdSense 設定 > フィード向け AdSense」から、FeedBurner フィードに載せる広告の設定を行ってください。


FeedBurner に更新 Ping を
FeedBurner では 30 分に一度、Blogger の Atom フィードの変更を自動的に確認していますが、ブログ更新時に手動で FeedBurner に 更新 Ping を打って、RSS フィードを即座に更新させることも可能です。

その更新 Ping の送信先は
http://ping.feedburner.google.com/

更新 Ping の送信については、更新 Ping を打とうをご覧下さい。

カスタムドメイン

Blogger ブログは、基本的に
http://YOURBLOGNAME.blogspot.com/
というようなブログのアドレス(URL)で公開されます。

が、ブログ所有者がドメイン(kuribo.info など)を所有している場合、ブログの URL をそのドメインに変更することも可能です。それがカスタムドメインという機能。

サーバー自体は blogspot.com のままで、ドメインだけかぶせるような形になるので、レイアウトテンプレートやアクセス制限など、Blogger の全ての機能がそのまま利用できます。

さらに、もし以前の blogspot.com の URL でブログにアクセスしてしまっても Blogger が新しいドメインへと転送してくれるため、これまでの読者が迷ってしまうということもありません。


カスタムドメインの設定
ブログのカスタムドメインの設定は、

1.所有ドメインの DNS 設定で、CNAME を ghs.google.com に設定します。
2.新 Blogger 管理画面「設定 > 公開中」から「切り替え先」に「カスタムドメイン」を選択し、1を設定した所有ドメインを入力し「設定を保存」ボタンを押します。

これだけです(ヘルプ)。ドメインの DNS が浸透するまで、半日から数日かかるので、設定後しばらく待ってから確認してみましょう。


ドメイン取得・管理サービス
上にも書いたとおり、ドメインの DNS 設定で CNAME が指定できないと、Blogger ブログへのマッピングはできません。新しくドメインを取得される人は、CNAME の設定ができるドメイン管理サービスを選択するようにしてください。

ムームードメイン
.com、.net、.org、.info、.biz が年額 950 円。
.jp が 2,980 円。
クリボウが利用しているのがこちら。

お名前.com
.com、.net、.org、.info、.biz が年額 920 円。
.jp が 2,980 円。
安さが魅力。

バリュードメイン
.com、.net、.org、.info、.biz が年額 990 円。
.jp が 2,990 円。

スタードメイン
.com、.org、.info、.biz が年額 950 円。.net が 880 円、.jp が 2,780 円。ドメインによっては安いものも。