クリボウの Blogger 入門

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


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

• クリボウの Blogger Tips: Blogger in Draft に「テンプレートデザイナー」機能が登場

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


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

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


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

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

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

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


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

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

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

[画像:EXAMPLE]Blogger 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 ファイルを使用。

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

そこで、


　という順番にコードが表示されていれば　と順番を変更します。


　という順になっているコードを入れ替え、　とします。

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


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


　から　に変更します。


　から　に変更します。

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


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

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

　と書かれている部分に　と赤字の部分を加えれば OK です。


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

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

• Blogger のフィード URL とパラメータ

を確認してください。

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


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

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

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


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


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


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

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


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

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

Blogger ブログは、基本的にというようなブログのアドレス（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 円。ドメインによっては安いものも。