Bloggerのテンプレートをいじる

というエントリーを書きたかったがまたもや挫折・・・。
Blogger を始めたときも挫折して CSS をいじったぐらいで現在に至るわけです。
なんというかドキュメントがしょぼいんですよね。

さらに今はテンプレートが version2 になってますが、このドキュメントも見当たらない。
とりあえず分かったところまでまとめます。

コード

Blogger のテンプレートは XHTML にコードを埋め込む形式。
Movable Type の MTML に書き方が似てますね。
簡略化したテンプレートの一部はこんな感じ。

<div id='header-wrapper'>
 <b:section class='header' id='header'>
  <b:widget type='Header' id='Header1' expr:title='data:blog.title'>

   <b:includable id='main'>
    <h1 class='title'>
     <data:title/>
    </h1>
   </b:includable>

  </b:widget>
 </b:section>
</div>

<b:section>

テンプレートはいくつかの <b:section> を持ちます。

<b:section> の中に <b:section> は入れ子にできません。
<b:section> は <b:widget> しか持てません。
<b:section> は複数の <b:widget> を持てます。

<b:section> は <div> に置換されます。

属性	値	任意性	備考
id	string	必須	一意の名前。
class	string	オプション	よく使用されるクラス名は navbar, header, main, sidebar, footer など。
maxwidgets	number	オプション	この section で使用できる widget の最大数。 指定しない場合、上限なし。
showaddelement	'yes' | 'no'	オプション	レイアウトページで [ガジェットを追加] リンクを表示するかどうか。
growth	'horizontal' | 'vertical'	オプション	この section 内の widget の並べ方。水平か垂直。

<b:widget>

<b:widget> は <b:includable> しか持てません。
<b:widget> には id='main' を指定した <b:includable> が1つ必要です。

<b:widget> は <div> に置換されます。

属性	値	任意性	備考
id	string	必須	テンプレート内の widget の id は一意である必要があります。 widget の id は変更できません。 変更する場合は、一度 widget を削除して、新しく作成します。
type	string	必須	widget の種類。 BlogArchive、Blog、Feed、Header、HTML、SingleImage、LinkList、 List、Logo、BlogProfile、Navbar、VideoBar、NewsBar など。
locked	'yes' | 'no'	オプション	ロックされた widget はレイアウトページで移動、削除できません。
title	string	オプション	レイアウトページでの widget の表示タイトル。 指定しない場合、'List1' などのデフォルトのタイトルが使用されます。
pageType	'all' | 'main' | 'item'| 'archive'	オプション	指定した表示タイプにのみ表示されます。
mobile	'default' | 'yes' | 'no' | 'only'	オプション	widget をモバイルで表示するかどうかを指定します。 default を指定すると、モバイルでは Header、Blog、Profile、PageList、AdSense、Attribution が表示されます。

<b:includable>　<b:include>

<b:includable id='main'> はデフォルトで展開されます。

その他の id 属性が指定された <b:includable id ='***'> は関数みたいなもので
<b:include name='***'> を使って呼び出して使います。

要は <b:includable> の中にいろいろとコードを書いていくわけです。

includable
属性	値	任意性	備考
id	string	必須	一意の名前。
var	string	オプション	include から渡される引数を受け取る変数名。
include
属性	値	任意性	備考
name	string	必須	一意の名前。
data	string	オプション	includable に渡す何らかのデータ構造。 (ex. blog, blog.title, posts, feedData ...)

<b:include> を使うとこんな感じになります。

<div id='header-wrapper'>
 <b:section class='header' id='header'>
  <b:widget type='Header' id='Header1' expr:title='data:blog.title'>

   <b:includable id='main'>
    <h1 class='title'>
     <b:include name='title'/>
    </h1>
   </b:includable>

   <b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <data:title/>
    <b:else/>
     <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
   </b:includable>

  </b:widget>
 </b:section>
</div>

<b:include name='title'/>

で

<b:includable id='title'>
  ...
</b:includable>

を呼んでるのが分かるでしょうか。
前はこの <b:includable> が分からなくて挫折しました。

また、 <b:includable> は次のようにして引数を受け取ることも出来ます。

<b:includable id='main'>
 <b:include name='post' data='blog'/>
</b:includable>

<b:includable id='post' var='arg'>
 <data:arg.title/><br/>
</b:includable>

<data:***/>

<data:***/> タグはブログの各データを展開するだけなので、これは簡単ですね。

<data:blog.title/>
<data:blog.url/>

XHTML タグの中では書き方が違うので注意が必要です。
この書き方はダメです。

<a href='<data:blog.homepageUrl>'> TITLE </a>

XHTML タグの属性の前に expr: を付けて data:*** とします。
なぜか expr: はドキュメントに載ってません。

<a expr:href='data:blog.homepageUrl'> TITLE </a>

グローバルに参照できるデータ

<data:blog.title/> のように参照します。

この他にもブログのソースの一番下の方の
_WidgetManager._SetDataContext() 内に
参照できるデータが JavaScript のオブジェクト形式で書いてあります。

blog
属性	値	備考
title	string	ブログのタイトル。
homepageUrl	string	ブログの URL。 http://*****.blogspot.jp/
canonicalHomepageUrl	string	ブログの URL。 http://*****.blogspot.com/
pageType	'index' | 'item' | 'archive' | 'static_page'	現在のページの種類。
pageTitle	string	現在のページのタイトル。
url	string	現在のページの URL。 http://*****.blogspot.jp/*****
canonicalUrl	string	現在のページの URL。 http://*****.blogspot.com/*****
encoding	string	ブログで使用する文字エンコード。
isMobile	bool	モバイルかどうか。
feedLinks	string	フィードの<link>タグ(XHTML)。

各 widget 内で参照できるデータ

widget の type や属性は追加、統廃合されてるようなので
ここに載ってなかったり、使えなかったりするかもしれません。

Header
属性	値	備考
title	string	ブログのタイトル。
description	string	ブログの説明。
mobile	bool	モバイルかどうか。
useImage	bool	ヘッダーに背景画像を使うかどうか。
imagePlacement	'BEHIND' | 'REPLACE' | 'BEFORE_DESCRIPTION'	背景画像の位置。
sourceUrl	string	背景画像の URL。
backgroundPositionStyleStr	string	背景画像の backgroundPosition。
widthStyleStr	string	背景画像の幅。
height	string	背景画像の高さ。
width	string	背景画像の幅。

Blog
属性	値	備考
olderPageTitle	string	過去の投稿ページへのリンクのタイトル。
olderPageUrl	string	過去の投稿がある場合、その投稿の URL。
newerPageTitle	string	新しい投稿ページへのリンクのタイトル。
newerPageUrl	string	新しい投稿がある場合、その投稿の URL。
commentLabel	string	コメント数を表示するために使用するフレーズ (例"コメント数")。
authorLabel	string	投稿者が誰かを示すために使用するフレーズ (例"投稿者")。
timestampLabel	string	投稿時間を示すために使用するフレーズ (例"に投稿")。
postLabelsLabel	string	投稿のラベルのリストを示すフレーズ (例"この投稿のラベル")。
backlinksLabel	string	投稿のバックリンクを示すフレーズ (例"この投稿へのリンク")。
numPosts	string	投稿数。
shareMsg	string
homeMsg	string	homepage リンクのテキスト。
mobile	bool	モバイルかどうか。
desktopLinkUrl	string	desktopLink の URL。モバイル用？
desktopLinkMsg	string	desktopLink のテキスト。モバイル用？
mobileLinkUrl	string	mobileLink の URL。モバイル用？
mobileLinkMsg	string	mobileLink のテキスト。モバイル用？
defaultAdStart	string	Google AdSense
defaultAdEnd	string	Google AdSense
adCode	string	Google AdSense
adStart	string	Google AdSense
adEnd	string	Google AdSense
feedLinks	list	現在のページのフィードのリスト。
- url	string	フィードの URL。
- name	string	フィードの名前 (例'投稿' や 'コメント' など)。
- feedType	'Atom' | 'RSS'	フィードの種類。
- mimeType	string	フィードの MIME 形式。
posts	list	現在のページのすべての投稿のリスト。
- dateHeader	string	この投稿の日付。この投稿がリストにおいてその日最初の投稿であった場合にのみ表示します。
- timestamp	string	この投稿のタイムスタンプ。 dateHeader とは異なり、これはすべての投稿に存在します。
- timestampISO8601	string	この投稿の ISO8601 形式のタイムスタンプ。
- id	string	この投稿の ID 番号。
- url	string	この投稿の Permalink。
- link	string	この投稿の link。
- title	string	この投稿のタイトル。
- body	string	この投稿のコンテンツ。
- author	string	投稿者のハンドル ネーム。
- authorProfileUrl	string	投稿者プロフィールへの URL。
- thumbnailUrl	string	この投稿の画像のサムネイルの URL。
- snippet	string	この投稿のコンテンツの出だし部分。
- isDateStart	bool	その日最初かどうか。
- isFirstPost	bool	その日最初の投稿かどうか。
- hasJumpLink	bool	JumpLink (もっと読む)があるかどうか。
- jumpText	string	JumpLink のテキスト(例"もっと読む")。
- allowComments	bool	この投稿がコメントを許可している場合は 'True'。
- numComments	string	この投稿のコメント数。
- showThreadedComments	bool	スレッド式のコメントを表示するかどうか。
- showBacklinks	bool	この投稿のバックリンクを表示するかどうか。
- numBacklinks	string	この投稿のバックリンク数。
- addCommentUrl	string	この投稿の [コメントを追加] フォームの URL。
- addCommentOnclick	string	[コメントを追加] クリック時の JavaScript code。
- emailPostUrl	string	この投稿の [この投稿をメール送信] フォームの URL。
- editUrl	string	この投稿の [編集] フォームの URL。
- dummyTag	string	ダミータグ。
- labels	list	この投稿のラベルのリスト。
-- name	string	ラベルのテキスト。
-- url	string	このラベルが付いた投稿リストページの URL。
-- isLast	bool	このラベルがリストの最後かどうか (カンマを付けるのに役立ちます)。
- feedLinks	list	この投稿に特有のフィードのリスト (ブログ全体の feedLinks とは異なり、投稿のコメント用のフィードなどを含めることができます)。それぞれに次のものが含まれます。
-- url	string	フィードの URL。
-- name	string	フィードの名前 (例'投稿' や 'コメント')。
-- feedType	'Atom' | 'RSS'	フィードの種類。
-- mimeType	string	フィードの MIME 形式。
- comments	list	この投稿のすべてのコメントのリスト (アイテム ページ上のみ)。
-- id	string	コメントの ID 番号。
-- body	string	コメントの本文。
-- timestamp	string	コメントが作成された時刻。
-- author	string	コメントの投稿者のハンドル ネーム、または '匿名'。
-- authorUrl	string	コメントが匿名でない場合、コメントの投稿者のプロフィールの URL。
-- deleteUrl	string	このコメントを削除するための URL。
-- isDeleted	bool	このコメントを削除するかどうかを指定します (削除されたコメントは、プレースホルダーに置き換えられます)。

BlogArchive
属性	値	備考
title	string	ウィジットのタイトル。
style	'MENU' | 'FLAT' | 'HIERARCHY'	表示形式。
data	list	アーカイブ ユニットのリスト。
- name	string	このアーカイブの期間の名前 (ex. "2006年8月")。
- url	string	この期間の投稿を含むページのリンク。
- post-count	string	この期間中の投稿数。

Feed
属性	値	備考
title	string	ウィジットのタイトル。
feedUrl	string	フィードの URL。
feedData	list	フィードのアイテムです。
- title	string	アイテムのタイトル
- str_published	string	アイテムが公開された時期
- published	string	アイテムが公開された時期 (秒単位)。
- str_updated	string	アイテムの最終更新日
- updated	string	アイテムの最終更新日 (秒単位)。
- author	string	アイテムの著者。
- summary	string	可能な場合はアイテムの抜粋。
- alternate	list	このアイテムに関する詳細情報の提供元。
-- href	string	このアイテムの Permalink。
-- type	string	このアイテムのコンテンツ タイプ。

テキスト / HTML / JavaScript
属性	値	備考
title	string	ウィジットのタイトル。
content	string	ウィジットのコンテンツ。

Image
属性	値	備考
title	string	ウィジットのタイトル。
sourceUrl	string	画像の URL。
width	string	画像の幅、ピクセル単位。
height	string	画像の高さ、ピクセル単位。
caption	string	画像のキャプション。

LinkList
属性	値	備考
title	string	ウィジットのタイトル。
links	list	リンクのリスト。
- name	string	リンクのテキスト。
- target	string	リンクの URL。

List
属性	値	備考
title	string	ウィジットのタイトル。
items	list	アイテムのリスト。

Logo
属性	値	備考
fullButton	string	選択した Blogger ボタンの URL。

Profile
属性	値	備考
title	string	ウィジットのタイトル。
userUrl	string	投稿者のプロフィールの URL。
location	string	投稿者のプロフィールの場所。
aboutme	string	プロフィールの "自己紹介" 情報。
displayname	string	投稿者のハンドル ネーム。
photo	list	ユーザーのプロフィールの写真。
- url	string	写真の URL。
- width	string	写真の幅、ピクセル単位。
- eight	string	写真の高さ、ピクセル単位。
- alt	string	写真の "alt" テキスト。

Label
属性	値	備考
title	string	ウィジットのタイトル。
display	'list' | 'cloud'	表示形式。
labels	list	ラベルのリスト。
- name	string	ラベルのテキスト。
- count	string	このラベルが付いている投稿数。
- url	string	このラベルが付いている投稿を表示しているページへのリンク。
- cssSize	string	クラウド形式の文字のサイズ。

Gadget
属性	値	備考
title	string	ウィジットのタイトル。
gadgetSnippet
renderingUrl
nonSocialFragment
errorMessage

<data:***/> タグの詳細はドキュメントを参照してください。

レイアウト データ タグ - Blogger ヘルプ

<b:if>　<b:else/>

if 文は特に説明はいらないでしょう。
else はありますが、else if はありません。

<b:if cond='条件式'>
 ...
</b:if>

<b:if cond='条件式'>
 ...
<b:else/>
 ...
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <data:title/>
<b:else/>
 <a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>

現在の投稿がバックリンクを表示するように設定されている場合は true。
<b:if cond='data:post.showBacklinks'>

現在のページがアイテム ページ (投稿ページ) であるなら true。
<b:if cond='data:blog.pageType == "item"'>

ハンドル ネームが Fred でなければ true。
<b:if cond='data:displayname != "Fred"'>

現在の投稿に複数のコメントがあれば true。
<b:if cond='data:post.numComments > 1'>

<b:loop>

ループは var 属性に変数名、 values 属性にリストを指定します。

<b:loop var='i' values='data:posts'>
 <h2><data:i.title/></h2>
</b:loop>

また、 <b:include> を使って処理することもできます。

<b:loop var='p' values='data:posts'>
 <b:include name='EachPosting' data='p'/>
</b:loop>

<b:includable id='EachPosting' var='arg'>
 <data:arg.title/><br/>
</b:includable>

<b:skin>

CSS は <b:skin> タグの中に書きます。
<Variable> の name 属性に指定した名前を使って CSS に変数が使えます。
これはテンプレートデザイナーで簡単に変更できるという機能らしいです。

自分で使うだけというなら CSS ベタ書きで構いません。
しかし、ベタ書きの場合でも <b:skin> タグの中に書く必要があります。

<head>

<b:skin>
<![CDATA[
/*
 <Variable name="pgbgcolor"
  description="Page Background Color"
  type="color" default="#fff" value="#ffffff">
 <Variable name="pgtxtcolor"
  description="Page Text Color"
  type="color" default="#444" value="#444444">
*/

body {
 background: $pgbgcolor;
 color     : $pgtxtcolor;
 }
]]>
</b:skin>

</head>

<macro:>　mexpr:

テンプレートの version2 では HTML5 対応？
<macro:>　mexpr: も追加されてるのですが
ドキュメントが見当たらないのでよく分かりません。

参考サイト

レイアウト ガイド - Blogger ヘルプ
レイアウト用フォント タグとカラー タグ - Blogger ヘルプ
レイアウト用ページ要素タグについて - Blogger ヘルプ
レイアウト用ウィジット タグ - Blogger ヘルプ
レイアウト データ タグ - Blogger ヘルプ

Template of Doom
Bloggerテンプレートタグ一覧 - SNAPMAN
Blogger | egoblock
The Anatomy of a Blogger Layout (template) | fumbling in the dark

テンプレートデザイナーのHTML編集で過去記事一覧をサイドバーに出したい | Google グループ
Blogger の投稿フッターにはてなブックマーク件数を表示する方法
Bloggerのアーカイブページやラベルページで記事タイトル一覧を表示 :: Holiday Webmaster Blog

まとめるだけでお腹いっぱい。

- 追記 -

便利なところを見つけてしまった。
data: タグの値が見やすい。

blogger2ools

Blogger インプレ

「Google カスタム検索エンジン」を作ったついでに
あまり興味の無かったブログにも手を出してみたのですが
"Blogger" は使いづらいというかいじりづらい。

初期テンプレートにあまりいい物がない。
テンプレートを公開しているところにもシンプルなものがない。
自前でいじろうとHTMLを見るとDIVだらけで読むのがきつい。
テンプレートのXMLはHTML埋め込みのPHPぽくて意味が分からない。
しょうがないのでCSSでなんとか頑張ってみた。←今ココ

日本のブログサービスに比べるとベータ版のような印象。
もうしばらく使ってみて引っ越すかどうか考えようかなと。