みなさんお気づきのとおり、遅ればせながら、ようやくレイアウトテンプレートの仲間入りをしました。そこで、自分のブログをカスタマイズしていくついでに、その記録をこちらに掲載していこうと思います。
最初は、投稿のフッターにはてなブックマーク件数を表示する方法。
（はてなのヘルプ「自分のブログに「○○users」を表示する」に Blogger についての説明もあるんですが、情報が古く、現在 Blogger で一般に使われているレイアウトテンプレートでの導入方法は書かれていません。）
導入方法
１．Blogger 管理画面「デザイン ＞ HTML の編集」ページで、「ウィジェットのテンプレートを展開」にチェックを入れます。
２．投稿フッター部分 <div class='post-footer'> を見つけ出し（ブラウザの検索機能を使うと便利です）、コメント件数表示部分
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
のすぐ後に
※
<span class='hatena-bookmark'>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'><img expr:alt='"はてなブックマーク - " + data:post.title' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' expr:title='"はてなブックマーク - " + data:post.title'/></a>
</span>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'><img expr:alt='"はてなブックマーク - " + data:post.title' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' expr:title='"はてなブックマーク - " + data:post.title'/></a>
</span>
という文字列を挿入して「テンプレートを保存」します。これだけ。ぜひお試しくださーい。
追記（2011-05-05）：
その２
記事を公開した後で、こんなページを発見。
新しい画像が用意されていたんですね。これを Blogger に表示させるコードを考えてみました。こっちの方がいいかも…という人は、手順２の※マークのコードを
<span class='hatena-bookmark'>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</span>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</span>
に換えて、貼り付けてください。
その３
さらにこんなページも発見。
今度は画像ではなく、はてなのブックマーク件数取得 API を JSONP でたたいて、JavasScript で書き出す方式です。通常の文字列で表示されるので、コメント件数とかの表記と統一させやすいかと。こう表示させたい場合、手順２の※マークのコードを
<span class='hatena-bookmark'>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/"+data:post.url' target='_blank'><script expr:src='"http://api.b.st-hatena.com/entry.count?url=" + data:post.url + "&callback=document.write"' type='text/javascript'/> users</a>
</span>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/"+data:post.url' target='_blank'><script expr:src='"http://api.b.st-hatena.com/entry.count?url=" + data:post.url + "&callback=document.write"' type='text/javascript'/> users</a>
</span>
に換えて、貼り付けてください。
関連（クラシックテンプレートの場合）：
Blogger Buzz によると、2007 年以降 Blogger にログインしていないアカウントについては、2011 年 6 月 25 日付けでサポートが停止され、管理していたコンテンツも削除されてしまうそうです。
（2007 年以降は、旧アカウントでもブログは削除されないものの、ブログ更新にはアカウント移行が必須になっています。この辺りの Blogger の変遷については、こちらを確認してください。）
つまり、旧 Blogger アカウントのままで、期日（2011 年 6 月 25 日）までに Google アカウントへと移行しないと、もう永遠にログインや記事の閲覧ができなくなってしまいますよ、ということのようです。
ということで、該当する方は、こちらから急いでアカウントの移行を。
該当ユーザーには、旧アカウントのメールアドレスにお知らせメールが今後届くそうなので、Blogger ブログを持っているのか不確かな人は、チェックするようにしておくといいかも。
この後は…
個人的な予想なんですが、FTP 経由公開機能の終了、旧 Blogger アカウント終了という流れから見ると、次はきっとクラシックテンプレートのサポート終了だろうなと思います。
古くからの Blogger ユーザーの人は、早めにレイアウトテンプレートへと移行しておいた方がいいかもしれませんね。（このブログも含めてです、はい。）
追記（2011-06-24）
Update, 6/23: We've pushed back the cut-off date for supporting legacy migration from June 25th to August 1st.
と、Blogger Buzz に追記がされました。6 月 25 日予定だったアカウントの移行期日が 8 月 1 日に延ばされたとのことです。
ダイナミックビュー
Blogger に新しいテンプレートが登場しています。「パースペクティブ」とか、「ダイナミックテンプレート」とかいろんな呼び方があるようですが、ここでは言葉を「ダイナミックビュー」に統一して紹介します。
普通、テンプレートというのは、ブログの著者が指定するものですが、このダイナミックビューでは、読者の側が閲覧中のブログのレイアウトを 5 種類の中から自由に選択できるようになっています。
（YouTube - Blogger Dynamic Views）
このダイナミックビューには AJAX、HTML5、CSS3 といった最新の Web テクノロジーが駆使されているとのことで、Internet Exploere 8 以降、Firefox 3.5 以降、Chrome、Safari といったブラウザで閲覧可能だとのことです。（参考：All about Dynamic Views for Readers - Blogger ヘルプ）
ダイナミックビューでブログを表示するには、ブログの URL 末尾に
/view という文字列をつけてアクセスするだけ。うれしいことに、クラシックテンプレートだろうとカスタムドメインだろうと問題ないようです。試しにこのブログを表示してみてください。通常のテンプレートと違うところとして
- リンクをクリックすることなく、次のページが自動的に読み込まれる
- 複数のレイアウトが用意されている。
- 画像は、最初に全部ではなく、その画像が画面に表示される時に初めてロードされる。
使用条件
Blogger ダッシュボードを見てみると、早速このような吹き出しが出ていました。
5 つの新しい動的ビュー
ブログが一般公開されていて、フィードが有効になっている場合は、読者に 5 種類の動的ビューで投稿を閲覧してもらうことができます。また、これらのビューはいつでも無効にできます。
って書いてありますね。
自分のブログでダイナミックビューを有効にするためのより詳しい条件としては、
- 「設定 ＞ サイトフィード」の「ブログフィードを許可」の項目で「完全」か「追記の区切りまで」を選択していること
- 「設定 ＞ 許可」の「ブログの閲覧者」が「すべてのユーザー」になっていること（閲覧制限をかけるとフィードが発行されないため）
- 「設定 ＞ フォーマット」の「動的ビューを有効にする」が「はい」になっていること
レイアウトの種類
ダイナミックビューでは、読者がレイアウトを選択できます。写真を多用しているブログの方が見栄えがよさそうなので、今回は クリボウの写真日記 を例にします。各画像をクリックすると、実際のダイナミックビューへとジャンプします。
Flipcard
- カードにマウスを合わせると、タイトルとコメント数が表示されます。スクロールすると追加の投稿がロードされます。
- カードをクリックすると、記事単体で表示されます。J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動できます。Esc キーでは、投稿一覧へ戻ります。
- 上部左側のリンクから、日付、ラベル、筆者で投稿をソートすることができます。
- 利用は、ブログ URL 末尾に
/view/flipcardを追加。
- タイルにマウスを合わせると、投稿のタイトルが表示されます。
- タイルをクリックすると投稿が開かれ、もう一度クリックするか Esc キーを押すことで、投稿が元の場所に折りたたまれます。
- 投稿が開かれた状態のとき、J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動できます。
- タイルの大きさはビューのロードの度に異なりますが、左上から右下にかけて投稿の日付順に配置されています。
- タブレット端末に最適化されており、端末の回転に対応しています。
- 利用は、ブログ URL 末尾に
/view/mosaicを追加。
- ブログを素早く読むために最適化されています。
- ダイナミックビューのデフォルトのレイアウトはこれになっています。
- 左のサイドバーは日付順の投稿タイトルになっていて、コメント数や、画像サムネイルが表示されるようになっています。
- J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿を表示することができます。
- 「Show」リンクのクリックで、同じページ内にコメントを表示することができます。
- 利用は、ブログ URL 末尾に
/view/sidebarを追加。
- 画像単位で表示します。（画像のない投稿は表示されない。1 投稿に複数の画像がある場合、画像の数だけ表示される。）
- ポラロイドカメラの写真のようなレイアウトで、写真下部にタイトルが書かれています。マウスを合わせると投稿本文が表示されます。
- 写真をクリックすることで、投稿が単独で表示されます。J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動。Esc キーで画像一覧へ戻ります。
- 画像は、Blogger、Flickr ともに表示できるようですが、Flickr だと上記のように写真に大きな余白ができてしまうようです。
- 利用は、ブログ URL 末尾に
/view/snapshotを追加。
- 画像、投稿タイトル＋投稿本文冒頭、投稿タイトルのみの 3 エリアに分割されています。
- 各エリアをクリックすると、投稿が単独で表示されます。J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動。Esc キーで一覧へ戻ります。
- 文字列を検索すると、該当する投稿がハイライトされます。
- 利用は、ブログ URL 末尾に
/view/timeslideを追加。
このダイナミックビューは、今のところ試験的に導入されているもののようで、いずれブログ運営者がこのビューをカスタマイズできるようになるとのことです。Blogger ブログも時代に合わせて、どんどん進歩していっている感じですね。この新機能、ぜひぜひいろんなブログで試してみてください。
