Blogger Help Blogger Status Blog Search

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

ブログは内容で勝負!…といきたいところですが、やっぱり見栄えも大事ですよね。そこでこのページでは、Blogger ブログ用のテンプレート配布サイトを紹介しようと思います。


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

現在の Blogger のデフォルトはレイアウトテンプレートですが、Blogger 管理画面「テンプレート > HTML の編集」ページから「クラシックページに戻す」リンクをクリックすることで、クラシックテンプレートに変更することも可能です。(FTP 経由公開ブログはクラシックテンプレートしか選べません。)

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

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


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

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

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

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

EXAMPLEThe Blogger WorkShop
左サイドバー「Old Blogger Templates」から上がレイアウトテンプレート。「view」でプレビュー、「download」で表示される XML ファイルを保存。

Beautiful Beta
「preview」でプレビュー、「XML Template」でコード(XML ファイル)を取得。

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

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

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

Notlar ve Notalar
プレビューはなし、各テンプレートの画像のリンクからコード(XML を圧縮した ZIP ファイル)を取得。

Paradise Lost
「demo」でプレビュー。「download」から別ページを開き、クリップマークのついたリンク「XXXXX.zip」からコード(XML を圧縮した ZIP ファイル)を取得。

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

TemplatePanic
かわいらしいテンプレートがたくさん。「Read full entry」からテンプレートごとのページに進み、「XXXXX.zip [XX.XXkb]」から zip ファイルをダウンロード。解凍してできる XML ファイルを使用。

EXAMPLEHoctro's Place
Blogger 標準テンプレート Rounder シリーズ(4 種)、Minima シリーズ(8 種)の 3 カラム版を配布。コードは「XXXXX.xml」リンクをクリックし XML をダウンロード。

EXAMPLEFree Blogger Skins
サムネールクリックでプレビュー、「BETA XXXXX」から zip ファイルをダウンロード、解凍して使用。タイトルに BETA のつかないものはクラシックテンプレート。

EXAMPLELaughing Lion Design
まだ 1 種類しかありませんが、素晴らしい出来です。「working version click here.」でプレビュー、「Floral Blogger Template」で表示される XML ファイルを保存。

EXAMPLEBlogadikto
「Ver Blog Funcionando」でプレビュー、「XXXXX.zip」から zip ファイルをダウンロード、解凍して使用。


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

クラシックテンプレートの変更は、各サイトで配布されているテンプレートコードを 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 ファイルをダウンロード、解凍して使用。

EXAMPLETemplates 4 Free
サムネイルクリックで拡大、「Download」から zip ファイルをダウンロード、解凍して使用。

EXAMPLEBlogger Templates by Aman
「Get Template」から zip ファイルをダウンロード、解凍して使用。

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

EXAMPLEThe Blogger WorkShop
左サイドバー「Old Blogger Templates」以下で配布。「view」でプレビュー、「download」で表示されるテキストファイルのコードを使用。

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

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

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

EXAMPLEZoot's {free} Designs
サムネールクリックでテンプレート別のページに移動、「action here」でプレビュー、コードは「Download」で zip ファイルをダウンロードし、解凍して使用。

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

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

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

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

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

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

1.エンコード方式を選択する
旧 Blogger ブログおよび FTP 公開の新 Blogger ブログは、管理画面「設定 > フォーマット > エンコード」で、エンコード方式を設定することができます。

ここでは Universal(Unicode UTF-8) を選択します。

他のエンコード方式を選択すると、投稿メッセージ中の記号類が文字化けするからです。これは、新規投稿や投稿編集画面自体が UTF-8 で書かれているのが原因かと。

新 Blogger の場合、FTP 経由で公開しているブログ以外は、今のところ文字コードの選択がサポートされていません。文字コードは選択できませんが、設定は自動的に UTF-8 になっているので、この項目は気にしなくて結構です。


2.テンプレートのタイトルとメタデータとを入れ替える
エンコード方式を UTF-8 に設定しているのに、ページが全く表示されないという場合があります。これはページタイトルに日本語が使われているときに、よく起こります。ブラウザ(IE, Firefox, NN, Opera など)が、ページの HTML を頭から順に読んで解釈しているときに、エンコード方式がわからないまま日本語が出て来てしまうと、文字化けする可能性が高いのです。

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

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

新 Blogger の場合、管理画面「テンプレート > 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>
 とします。

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

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

旧 Blogger および、クラシックテンプレート利用の新 Blogger の場合、管理画面「テンプレート > 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">
 に変更します。

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

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

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

4.テンプレートに 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 です。

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

RSS を用意する

Blogger には長い間 Atom フィードしかなかったんですが、2006 年 5 月からようやく RSS フィードも配信されるようになりました。そのため、自分で RSS フィードを用意する必要はなくなりました。

このページでは、外部のサービスを利用して RSS フィードをつくる方法について紹介していますが「blogspot.com 以外のところにフィードをおきたい(負荷軽減やアクセス障害対策)」とか、「フィードを一つにまとめて管理したい」という場合にのみ、参考にしてもらえるとうれしいです。

FeedBurner で RSS を作成する FeedBurnerフィードリーダー、ブログランキングサイト、Ping サーバー、ブログペットといった、フィードを利用したサービスで、たまに RSS にだけ対応しているものがあると思います。それらのサービスを利用する際には、Atom から RSS をつくってくれる FeedBurner というサービスを利用します。

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

FeedBurner サイトで Blogger の Atom フィードの URL を入力し、手順にそってユーザー登録をすると、簡単に RSS フィードを作成することができます。

ブログの設定をする FeedBurner で RSS を作成したら、ブログのテンプレートを編集し、RSS の URL をヘッダ内に指定しておきます。そうしておくことで、ページを訪れたブラウザやロボットが自動的に RSS を見つけてくれるようになります(Auto Discovery)。

具体的には、Blogger 管理画面「テンプレート > HTML の編集」で、テンプレートの head 要素内の

旧 Blogger なら <$BlogMetaData$> の次の行、
新 Blogger なら <b:include data='blog' name='all-head-content'/> の次の行に
<link rel="alternate" type="application/rss+xml" title="RSS" href="あなたのRSSのURL" />
を挿入してください。

FeedBurner に更新 Ping を FeedBurner では、30 分に一度、Atom フィードの変更を確認しているんですが、「Atom フィードが更新されましたよ」と FeedBurner に 更新 Ping を打って、RSS フィードを即座に更新することも可能です。その更新 Ping の送信先は
http://ping.feedburner.jp/service/xmlrpc
です。

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

Blogger ブログのサーバー移転

Blogger ブログは、通常の blogspot.com 以外に、自分の用意したサーバーに展開することも可能です。このサイトもレンタルサーバーに展開、独自ドメインも取得して運営しています。

外部サーバーのメリット ブログを BlogSpot から移転させて、独自ドメインにするメリットはというと…

  • 画像に限らず、様々なファイルがアップロードできる
  • URL が覚えやすい
  • SEO 的に有利
  • Navbar をはずすことができる
  • FLAG の対象からはずされる
  • 投稿の際の文字確認がなくなる
  • CGI や PHP、MySQL といったサーバープログラムが利用できる
  • 自由にサブドメインをつくれる
  • メールアドレスがつくれる
こんなところでしょうね。

レンタルサーバー つぎに、ブログを展開するサーバー自体のこと。自分でサーバーを立ち上げるということも可能なんでしょうが、レンタルサーバーを借りるのがやはり一番楽ちんだと思います。
国内のレンタルサーバー会社もたくさんあって、探してみると意外と安いものもあります。

ロリポップ
200MB、月額 263 円。CGI、SSI、PHP 利用可。ドメイン取得サービス(ムームードメイン)もあり。メルマガ、メーリングリスト、ショッピングカート。クリボウもここを利用しています。

さくらのレンタルサーバ
300MB、月額 125 円。CGI、SSI 利用可。ドメイン取得サービスもあり。

ハッスルサーバー
500MB、月額 208円。MySQL、CGI、PHP、SSI 利用可。メーリングリスト。

TOK2 PRO
容量無制限、月額 200円。MySQL、CGI、PHP 利用可。

アミューサーバー
30MB、月額 263円。CGI、SSI、PHP 利用可。ドメイン取得無料。

Bfit.jp
100MB、基本料 0円、データ転送量に応じ課金。転送量の関係ない 500MB、200 円のコースもあり。CGI、PHP、MySQL 利用可。ドメイン取得サービスも。

FAS ネット
100MB、月額 300円。CGI、SSI、PHP、MySQL 利用可。ドメイン取得サービスもあり。

Blogger 管理画面上の設定 外部サーバーへの Blogger ブログの移転は、Blogger 管理画面「設定 > 公開中」から行います。ヘルプ:外部ウェブ ホストへの FTP (または sFTP) 接続を設定するにはどうすればよいですかを参考にしてください。

よく忘れられるのですが、サーバー移転時の設定は「設定 > 公開中」だけではありません。「設定 > アーカイブ」でアーカイブページの展開されるディレクトリとアーカイブページ自身の名前を、「設定 > サイトデータ」で Atom フィードのディレクトリと名前を、それぞれ設定しておく必要があります。
特にサブドメインなどを利用して、サーバーに複数の Blogger ブログを展開する場合には、あるブログのアーカイブページが別のブログのアーカイブページの領域に上書きされてしまったり、フィードリーダーなどが Atom ファイルを見つけられなくなるといった問題が起きることがありますので、これらの設定を忘れないようにしてくださいね。

移転元 BlogSpot はどうなるの? Blogger ブログのサーバーを変更すると、移転元の blogspot.com には、それまでのブログがそのまま表示されます。でもそのサブドメインは解放されているので、別の Blogger ユーザーがそのスペースにブログを新設したり移動してくるといったことが可能になります。
今まで使っていた BlogSpot のサブドメインが他の人に使われたくない場合には、ヘルプ:ホスト サーバーを BlogSpot から他のサーバーに変更するとどうなりますかにあるように、ブログの移転後、自分で新しい Blogger ブログをその BlogSpot に展開するようにしましょう。移転元には、移転先へのリンクやメッセージを載せるのがよさそうです。
また、移転元に表示されるブログを完全に消去したい場合も同様に、移転元に一度新しいブログを立ち上げてそれを Blogger 管理画面「設定 > 基本」から削除してください。
© 2006-2007 kuribo