というエントリーを書きたかったがまたもや挫折・・・。
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