Bloggerテンプレート自作 #2：Bloggerのテンプレートタグを知る

前回の「最低限の状態を作る」に続き、今回は「Bloggerのテンプレートタグを知る」をテーマに進めていく。

テンプレートを自作するには、Blogger独自のテンプレートタグについて理解しておかなければならない。今のところ何となくでしか理解できてないので、この機会にまとめておくことにする（使用頻度の高いもののみ）。


基本的なルール


<b:section> <b:widget> <b:includable> <b:include> はセットで使う


個人的にテンプレートタグを調べて色々と試した結果、上記のタグはセットで使わなければならない模様。

セットで記述する文法は、具体的には以下のようになる。

<b:section 属性値>
  <b:widget 属性値>
    <b:includable 属性値>
      <b:include 属性値 />
    </b:includable>
  </b:widget>
</b:section>

※<b:widget>タグと<b:includable>タグは必ずセットにしなければならない

テンプレートタグはブログ表示時にHTMLに変換される


BloggerのテンプレートタグはブラウザでHTMLタグに変換されて読み込まれる。

<b:section>タグ や <b:widget>タグ は <div>タグ に変換され、idやclassを付与することもできる。
なので、他にHTMLタグを用意しなくてもCSSで修飾することはできる模様。

'（シングルクォーテーション） と "（ダブルクォーテーション） の違い


タグの属性値を指定する際に記述する ' と " はどちらも同じ意味になる。
開始と終了が同じものであれば、同タグ内で混在していてもエラー無く読み込まれる。

Bloggerで読み込まれた後は、Bloggerエディタ内で " は ' に自動変換される模様。
つまり、テンプレートタグでは ' で閉じることが推奨されているみたい。

Bloggerのテンプレートタグ一覧


b:skin（スキン）


スキンは、<head>タグ内に書き込むタグで、テンプレートのCSSを書き込む部分になる。

<b:skin>にはバージョンを指定でき、基本的には<b:skin>～</b:skin> の～部分にCSSを書き込むことになる。
また、ここにはテンプレートデザイナー用のタグを使用することができる（詳しい文法は下記を参照のこと）。

HTMLとして出力される場合は <style>タグ で出力される。

文法

<b:skin version='1.3.0'>
  <![CDATA[

  /* テンプレートデザイナー */
  <Group description="main" selector="">
    <Variable name="background-color" description="背景色" type="color" default="#FFFFFF" value="#FFFFFF"/>
  </Group>

  /* ここにCSSを書き込む */
  .header{
    background: $(background-color); /* テンプレートデザイナーに対応させる */
  }

  ]]>
</b:skin>

備考

・<b:skin>タグ を使わずに <style>タグ を使うこともできる（そういう方法がある）
・<b:template-skin>タグは、Bloggerの基本的な機能と連携するcssを書き込むときに使う（使うことは少ないかも）

b:section（セクション）


セクションは、レイアウト画面の領域を区切りを定義するタグ
セクションは主に「ヘッダー」「メイン」「サイドバー」「フッター」で使われる。

属性を設定することで、HTMLタグにようにidやclassを割り振ったり、ガジェットの制御を行うことができる。
<b:section 属性値>～</b:section> の～部分に <b:widget> 以下を記述する。

HTMLとして出力される場合は <div>タグ に置換されて表示される。

文法

<b:section id='ヘッダー' class='header' showaddelement='no'>
<!-- コンテンツ -->
</b:section>

属性

・id（必須）：レイアウトで表示されるセクション名を定義する（かなも使用可）
　→ HTMLのidのように使うことできる
・class（省略可）：クラスを定義する。HTMLのclassのように使うことができる
・maxwidgets（省略可）：セクション内におけるガジェットの最大数を定義する（省略時は上限なし）
・showaddelement（省略可）：レイアウト画面で「ガジェットを追加」の表示の可否を定義する
　→ 'yes'なら表示、'no'なら非表示、省略時は'yes'となる
・growth（省略可）：ガジェットの並べ方を指定する
　→ 'vertical'なら縦、'horizontal'なら横、省略時は'vertical'となる

b:widget（ウィジェット）


ウィジェットは、Bloggerガジェット（＝ウィジェット）を定義するタグ。

<b:widget 属性値>～</b:widget> の～部分に <b:includable> 以下を記述する。

HTMLとして出力される場合は <div>タグ に置換されて表示される。

文法

<b:widget id="header" type='Header'>
<!-- コンテンツ -->
</b:widget>

属性

・id（必須）：HTMLのidのように使うことできる
・type（必須）：ガジェットの種類を定義する（主に使用されるものは以下の通り）
　→ 'Header'：ヘッダーガジェット
　→ 'PageList'：ページリストガジェット
　→ 'Blog'：ブログガジェット（投稿記事）
　→ 'Profile'：プロフィールガジェット
　→ 'PopularPosts'：人気の記事ガジェット
　→ 'Label'：ラベルガジェット
　→ 'HTML'：HTML/JavaScriptガジェット
　→ 'Text'：テキストガジェット
　→ 'LinkList'：リンクリストガジェット
　→ 'BlogArchive'：ブログアーカイブ
　→ 'ContactForm'：連絡フォーム
　→ 'Navbar'：ナビバーガジェット
・locked（省略可）：ガジェットの移動・削除の可否を定義する
　→ 'yes'なら移動・削除不可、'no'なら移動・削除可、省略時は'no'となる
・title（省略可）：レイアウト画面で表示されるガジェットのタイトルを定義する
　→ 省略時は'type'属性で決まっているデフォルトのタイトルが表示される
・pageType（省略可）：ガジェットを表示するページタイプを指定する
　→ 'all'：すべてのページで表示（省略時はallになる）
　→ 'archive'：アーカイブガジェットから参照できるページ
　→ 'main'：メイン（たぶんインデックス）
　→ 'item'：個別記事のページ
・visible（省略可）：ガジェットをページに出力するかどうかを指定する
　→ 'true’なら出力する、'false’なら出力しない（省略すると 'true' ）
・mobile（省略可）：モバイル版での表示の可否を定義する
　→ 'yes'、'no'、'only'のいずれかを指定、省略時は'default'となる
　→ 今はcssでレスポンシブデザインにするので不要だと思う
・version（省略可）：ガジェットのバージョンを指定
　→ ガジェットのバージョンによって属性の仕様が変わったりするらしい
　　⇒ 仕様については「BloggerのBlogウィジェットをバージョン2にする」が参考になる

備考

・<b:widget-settings>タグ を使うとウィジェットの設定を定義しておくことができる

b:includable（インクルーダブル）


インクルーダブルは、ブログのコンテンツを表示する要素で、コンテンツの表示の仕方を定義する。

<b:includable id='main'>はプログラムでいうメイン関数で、プログラムの入口にあたる（記述必須のもの）。
なので、<b:widget>タグ内には <b:includable id='main'> が必ず一つ存在しなければならない。

<b:includable id='main'>～</b:includable> の～部分に表示するコンテンツを記述することになる。
<b:includable> は <b:widget> 内に複数定義することができる（main以降のidは任意で決められる）。

文法

<!-- 開始タグ（必須） -->
<b:includable id='main'>
<!-- コンテンツ -->
</b:includable>

<!-- タイトル -->
<b:includable id='title'>
<!-- コンテンツ -->
</b:includable>

<!-- 説明 -->
<b:includable id='description'>
<!-- コンテンツ -->
</b:includable>

属性

・id (必須)：includable固有のIDを定義する。ガジェットには必ず1つ <b:includable id='main'> が必要になる
・var (省略可)：<b:include>か呼び出される際に、渡されるデータの引数を指定する

b:include（インクルード）


インクルードは、特定の処理を呼び出すタグ。

自分で設定した処理を呼び出したり、元々Bloggerに備わっている処理を呼び出すことができるっぽい。

プログラムの関数の呼び出しのようなものなので、閉じタグは要らない。

文法

<b:includable id='main' var='post'>
  <b:include name='title' data='post'/> <!-- 処理1を呼び出す -->
  <b:include name='breadcrumb' data='post'/> <!-- 処理2を呼び出す -->
</b:includable>

<!-- 処理1：タイトルの表示させる処理 -->
<b:includable id='title' var='post'>
<!-- タイトルを表示するコード -->
</b:includable>

<!-- 処理2：パンくずリストの表示させる処理 -->
<b:includable id='breadcrumb' var='post'>
<!-- タイトルを表示するコード -->
</b:includable>

属性

・name（必須）：文字と数字で構成されるID
　→ 呼び出す処理を記述した <b:includable> のIDと一致させなければならない
・data（省略可）：<b:includable> にわたすデータを指定する
　→ <b:includable> で指定したvar属性の値を記述する
・cond（省略可）：結果が true のときにのみにインクルードを行う条件式
　→ <b:if> の cond属性と同じ

Bloggerの処理を呼び出す

・<b:include data='blog' name='all-head-content'/>：文字化け対策のエンコード
・<b:include data='blog' name='google-analytics'/>：Googleアナリティクスを呼び出す
・<b:include name='quickedit'/>：Bloggerのクイック編集を表示させる
・<b:include name='nextprev'/>：ページナビを表示させる
・<b:include name='feedLinks'/>：登録：投稿（Atom）を表示させる

data:（データ）


データは、Bloggerに保存されたデータを呼び出すタグ。

<data:属性値/> で呼び出すことができるが、特定のガジェット内でしか使えないものもある。

属性値と使用可能条件

【すべてページ】

・title：ブログのタイトル
・pageType：現在のページの種類を表示（「index」「item」「archive」「static_page」のいずれか）
・url：現在のページURL
・homepageUrl：ブログのホームページURL
・pageTitle：現在のページのタイトル（アーカイブや個別記事ページに関する追加情報を含めることもできる）
・encoding：ブログで使用するエンコード（UTF-8 など）
・languageDirection：左から右に記述する言語は「ltr」、右から左に記述する言語は「rtl」
・feedLinks：ページヘッダー用の自動検出フィードのリンク

【ページヘッダー（type='Header'）】

・title：ブログのタイトル
・description：ブログの説明

【ブログ投稿（type='Blog'）】

・feedLinks：現在のページのフィードのリスト
　→ メインページの場合：メインのブログフィードが含まれる
　→ アイテムページの場合：コメントのフィードも含まれる
　→ フィードリストの各項目には以下が含まれる
　　⇒ url：フィードの URL
　　⇒ name：フィードの名前（「投稿」や「コメント」など）
　　⇒ feedType：フィードの種類（Atom または RSS）
　　⇒ mimeType：フィードの MIME タイプ
・olderPageUrl：現在のページ上の投稿よりも古い投稿がある場合、それらURLを呼びだす
・olderPageTitle：投稿の古いページへのリンクのタイトル
・newerPageUrl：現在のページ上の投稿よりも新しい投稿がある場合、それらURLを呼び出す
・newerPageTitle：投稿の新しいページへのリンクのタイトル
・commentLabel：コメント数を示すフレーズ（「コメント件数」など）
・authorLabel：投稿者が誰なのかを示すフレーズ（「投稿者:」など）
・timestampLabel：投稿が作成された日時を示すフレーズ（「投稿日時:」など）
・postLabelsLabel：投稿のラベル一覧を示すフレーズ（「この投稿のラベル」など）
・backlinksLabel：現在の投稿のバックリンクを示すフレーズ（「この投稿へのリンク」など）
・posts：現在のページに表示されているすべての投稿のリスト（それぞれに以下の要素が含まれる）
　→ dateHeader：現在の投稿の日付（その日付の最初の投稿である場合にのみ表示）
　→ id：投稿のID番号
　→ title：投稿のタイトル
　→ body：投稿のコンテンツ
　→ author：投稿者の表示名
　→ url：現在の投稿のパーマリンク
　→ timestamp：投稿のタイムスタンプ（dateHeader とは異なり、これはすべての投稿に存在する）
　→ labels：投稿のラベルのリスト（それぞれに以下の要素が含まれる）
　　⇒ name：ラベルのテキスト
　　⇒ url：現在のブログ内で、このラベルが付いた投稿の一覧が表示されるページURL
　　⇒ isLast：このラベルがリストの最後のラベルかどうかを示す（True か False）
・allowComments：投稿でコメントを許可する場合は「True」
・numComments：この投稿のコメントの数
・showBacklinks：この投稿のバックリンクを表示するかどうか
・numBacklinks：現在の投稿のバックリンクの数
・addCommentUrl：現在の投稿の [コメントを追加] フォームの URL
・emailPostUrl：現在の投稿の [この投稿をメール送信] フォームの URL
・editUrl：現在の投稿の編集フォームの URL
・feedLinks：現在の投稿固有のフィードのリスト（それぞれに以下の要素が含まれる）
　→ url：フィードの URL
　→ name：フィード名（「投稿」や「コメント」など）
　→ feedType：フィードの種類（Atom または RSS）
　→ mimeType：フィードの MIME タイプ
・comments：現在の投稿のコメント一覧（それぞれに以下の要素が含まれる）
　→ id：コメントの ID 番号
　→ body：コメントの本文
　→ timestamp：コメントの作成時刻
　→ author：コメント投稿者の表示名、または「匿名」
　→ authorUrl：コメント投稿者のプロフィールのURL（匿名コメントでない場合）
　→ deleteUrl：このコメントを削除するためのURL
　→ isDeleted：このコメントが削除済みかどうか

【ブログのアーカイブ（type='BlogArchive'）】

・title：ウィジェットのタイトル
・style：「MENU」、「FLAT」、「HIERARCHY」のいずれか
・data：各アーカイブ ユニットのリスト（それぞれに以下の要素が含まれる）
　→ name：このアーカイブの期間の名称（「2006 年 8 月」など）
　→ url：この期間の投稿が含まれているページへのリンク
　→ post-count：この期間内の投稿件数

【不明】

・data:post.snippet：投稿記事本文の要約
・data:blog.metaDescription：検索向け説明

すべてのタグは「Bloggerのデータタグ（data:）の属性値一覧」を参照

b:loop（ループ＝繰り返し）


ループは、処理を繰り返すことにできるタグ。

意味合い的にはプログラムのfor文やwhile文にあたるもの。

<b:loop 属性値>～</b:loop> の～部分に繰り返したい処理を記述する。

ただし、Bloggerの場合は処理の繰り返し以外に、データベースから記事を取得する際にもループが必要になる。

よって個別記事ページなんかにも記事のDBを巡回するループの指定が必要な模様。

文法

<!-- 投稿タイトルを繰り返して取得する -->
<b:loop var='i' values='data:posts'>
 <h2><data:i.title/></h2>
</b:loop>

<!-- インデックスを使ったループ -->
<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>インデックス: <data:index />、数字: <data:number /></li>
  </b:loop>
</ul>

属性

・values（必須）：繰り返す処理を行うデータの集合を指定する
　→ 'data:属性値'を入れて使う
　→ '1 to 10'のように数値の範囲を指定して繰り返し回数を指定することが可能
・var（必須）：任意の変数を指定する。valuesで指定したデータを順次取り出し、指定した変数にデータが格納する
　→ 英数字で任意の変数を指定できる
　→ <data:varの属性値>で格納したデータを参照できる
・index（省略可）：インデックス（繰り返しごとに1ずつ加算される変数）を指定する
　→ <data:index属性値>でインデックスの数値を参照できる
　→ インデックスは0から開始され、繰り返しが実行されるたびに1ずつ加算される

if（イフ＝条件分岐）


イフは、条件によって表示させるコンテンツを分岐させることができるタグ。

分岐条件が1つの場合、<b:if cond='条件'>～</b:if>のような感じで記述する（これが基本パターン）。

条件と分岐させる処理が増えるにつれ、<b:elseif> <b:else> を使うことになる（これらは必須ではない）。

プログラムのif～else文にあたるもので、使い方もほぼ同じ。

なお、Bloggerでは<b:～ />とすることで、閉じタグ（</b:～>）を省略することが可能。

文法

<!-- 条件A 条件B 条件Cの分岐 -->
<b:if cond='条件A'>
  <!-- 条件Aの処理 -->
<b:elseif cond='条件B' />
  <!-- 条件Bの処理 -->
<b:else/>
  <!-- 条件Cの処理（条件Aと条件Bに当てはまらない場合の処理） -->
</b:if>

<!-- ページの種類による条件分岐 -->
<b:if cond='data:blog.pageType == "item"'>
  <!-- 表示するページが「個別記事ページ」の場合の処理 -->
<b:elseif cond='data:blog.pageType == "static_page"'>
  <!-- 表示するページの種類が「固定ページ」の場合の処理 -->
</b:if>
</b:if>

属性

・cond：条件式を定義する（使用できる条件式は以下の通り）
　→ AとBが等しい：A == B
　→ AとBが等しくない：A != B
　→ AよりBが大きい：A < B
　→ AよりBが小さい：A > B
　→ AよりBが以上：A >= B
　→ AよりBが以下：A <= B
　→ AかつB（AND）：A and B
　→ AまたはB（OR）：A or B
　→ Aが真ならB、Aが偽ならC：A ? B : C
　→ AにB1かB2が含まれる：A in {"B1", "B2"}
　→ AがBを含む：A contains "B"
　→ A1かA2がBに含まれる：{"A1", "A2"} contains B

※条件式を組み合わせたり、条件を増やすことも可能

条件の例

・トップページの時：<b:if cond='data:blog.url == data:blog.homepageUrl'>
・個別記事ページの時：<b:if cond='data:blog.pageType == "item"'>
・固定ページの時：<b:if cond='data:blog.pageType == "static_page"'>
・アーカイブページの時：<b:if cond='data:blog.pageType == "archive"'>
・ラベルページの時：<b:if cond='data:blog.pageType == "index"'>
・特定の記事の時：<b:if cond='data:blog.url == "（特定の記事のURL）"'>
・ハンドル名がAの時：<b:if cond='data:displayname == "A"'>
・ハンドル名がAか固定ページの時：<b:if cond='data:displayname == "A" or data:blog.pageType == "static_page"'>
・コメントがついている時：<b:if cond='data:post.numComments > 1'>

b:switch（スイッチ）


スイッチは、複数の条件分岐を設けることができるタグ。

<b:switch var='条件式'>～</b:switch> の～の中に<b:case value="値" />を記述して条件を追加していく。

<b:switch>タグ内には最後に<b:default/>という条件で、指定した条件以外の処理を記述する必要がある。

<b:switch>タグは<b:if>タグと似たもので、<b:case>は<b:elseif>、<b:default>は<b:else>のような使い方をする。

文法

<!-- ページタイプによる条件分岐 -->
<b:switch var='data:blog.pageType'>
  <b:case value="item"/>
  <!-- 表示するページタイプが「個別記事ページ」の場合の処理 -->
  <b:case value="static_page"/>
  <!-- 表示するページタイプが「固定ページ」の場合の処理 -->
  <b:default/>
  <!-- 表示するページタイプが「個別記事ページ」でも「固定ページ」でもない場合の処理 -->
</b:switch>

属性

【b:switch】

・var：データ式を指定する

【b:case】

・value：ページタイプなどの値を指定する

expr:（エクスプレッション）


エクスプレッションは、データディクショナリの値に基づいた属性値を設定できる。

具体的には、data:で呼び出せる値をHTMLに含めるときに使われるもの。

特に<a>タグにブログURLを含める時などに使用されることが多い。

文法

<!-- ブログURLへのリンク -->
<a expr:href='data:blog.homepageUrl'>ホーム</a>

<!-- RSSを投稿 -->
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSSを投稿</a>

b:eval（イーバル）


イーバルは、標準のデータタグよりも複雑な式を評価することができる

具体的には、data:から呼び出した値を使って計算式を作ったり、投稿を配列番号で呼び出したりできる。

イーバルは <b:eval expr='[式]' /> のような形で記述する。

文法

/* CSSのmin-heightに新しい幅の値を元に算出された相対的な高さを出力する */
min-height: <b:eval expr="data:newWidth * data:height / data:width" /> px;

<!-- 最初（0番目）のラベルURLを出力する -->
<b:eval expr="data:post.labels[0].url" />

<!-- コメントが許可されている場合は"コメント"、許可されてない場合は"無効なコメント"を出力する -->
<b:eval expr='data:post.allowComments ? "コメント" : "無効なコメント" />

snippet()（スニペット）


スニペットは、要約文を作ることができる関数。

タグ内で使用され、文字数や中略記号の有無などを設定することができる。

文法

<b:eval expr='snippet(data:post.body, {length:50, links:false, linebreaks:false, ellipsis:true}'/>

属性

・length：抽出する文字数を指定する
・links：リンクの可否を指定する（true or false）
・linebreaks：改行の可否を指定する（true or false）
・ellipsis：中略記号（…）の表示の表示の可否を指定する（true or false）


【参考】

・レイアウト用ページ要素タグについて（Bloggerヘルプ）
・レイアウト用のウィジェットタグ（Bloggerヘルプ）
・レイアウト用のデータタグ（Bloggerヘルプ）
・Bloggerのテンプレートをいじる（Aragger）
・【第３回】これでわかった！Bloggerの制御タグ・データタグまとめ（ぶろぐらまー）