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 ファイルを保存。

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 で日本語を使ったページを作るには、この文字化けへの対策が欠かせません。

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


1.エンコード方式を選択する
ブログの公開設定を「FTP 経由公開」にしている場合、ブログの文字エンコード方式を設定することができます。

Blogger 管理画面「設定 > フォーマット」ページ、「エンコード」の項目で ユニバーサル文字(Unicode UTF-8) を選択します。

他のエンコード方式を選択していると、投稿メッセージに記入した記号類が文字化けすることがあるからです。これは、Blogger の新規投稿や投稿編集のページ自体が UTF-8 で書かれているせいかと。

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


2.テンプレートのタイトルとメタデータとを入れ替える
エンコード方式を 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$> は、エンコード方式などのタグを書き出すためのテンプレートタグです。


3.テンプレートに使用言語を指定する
ついでに 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 ファイルはナントカ語で書かれているよ」と指定している部分です。ブラウザがこの部分にどれだけ反応するかわかりませんが、多少なりともエンコードミスを防げると思います。


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 を作成する

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


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

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

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


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

FTP 経由公開以外のブログ(普通のブログ)は、Blogger 管理画面「設定 > サイトフィード」の「フィード リダイレクト URL の登録」欄に、新しいフィードの URL を入力し、「設定を保存」ボタンを押すだけ。

FTP 経由公開ブログの場合のリダイレクトは、こちらをご確認下さい。

これで、これまでフィードを利用してきた読者に、フィード URL を変更してもらうこと無しに、そのまま新しいフィードを見てもらうことができます。


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

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

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

Blogger ブログのサーバー移転

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


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

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


レンタルサーバー
つぎに、ブログを展開するサーバー自体のこと。

自分でサーバーを立ち上げるということも可能なんでしょうが、レンタルサーバーを借りるのがやはり楽ちん。国内のレンタルサーバー会社も様々で、探してみるとけっこう安いものがたくさんあります。

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

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

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

298.jp
300MB、月額 298円。SSL 利用可。ドメイン取得サービスもあり。

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) 接続を設定するにはどうすればよいですかを参考にしてください。

よく忘れられてしまうんですが、サーバー移転時に URL の変わる部分は「設定 > 公開中」だけではありません。

「設定 > アーカイブ」でアーカイブページの展開されるディレクトリとアーカイブページ自身の名前を、「設定 > サイトデータ」で Atom フィードのディレクトリと名前を、それぞれ設定しておく必要があります。

特にサブドメインなどを利用して、サーバーに複数の Blogger ブログを展開する場合には、あるブログのアーカイブページが別のブログのアーカイブページの領域に上書きされてしまったり、フィードリーダーなどが Atom ファイルを見つけられなくなるといった問題が起きることがあるので、これらの設定を忘れないようにしてください。


移転元 BlogSpot はどうなるの?
Blogger ブログのサーバーを変更すると、移転元の blogspot.com には、それまでのブログがそのまま表示されます。が、そのサブドメインはすでに解放されているので、別の Blogger ユーザーがそのスペースにブログを新設したり移動してくるといったことが可能になります。

今まで使っていた BlogSpot のサブドメインを他の人に使われたくない場合には、ヘルプ:ホスト サーバーを BlogSpot から他のサーバーに変更するとどうなりますかにあるように、ブログの移転後、自分で新しい Blogger ブログをその BlogSpot の URL に展開するようにしましょう。

そしてその移転元ブログには、移転先へのリンクやメッセージを載せるのがよさそうです。

また、移転元に表示されるブログを完全に見えなくする場合も同様に、移転元に一度新しいブログを立ち上げてそれを Blogger 管理画面「設定 > 基本」から削除してください。

カスタムドメイン

Blogger には、ブログのアドレス(URL)を自分の持っているドメインに変更する方法も用意されています。それがカスタムドメインという機能。

サーバー自体は blogspot.com のままなので、レイアウトテンプレートやアクセス制限など、Blogger の全ての機能が利用できます。

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


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

これだけです(ヘルプ)。


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

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

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

バリュードメイン
.com、.net、.org、.info、.biz が年額 990円。
.jp が 3390円。
© 2006-2009 kuribo