2012-04-08

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

2 件のコメント:

  1. とても参考になりました
    ありがとうこざいます。

    返信削除
  2. 凄い。 目から鱗で分り易いです。
    とてもよくまとまっていて、皆さんに紹介したいです。

    返信削除