BloggerのテンプレートXML

Bloggerのテーマをカスタマイズする際は、BloggerのUIから「テーマ」「▼」「HTMLを編集」とすることで、テンプレートXML(HTML)の編集画面になります。

その中には、「b:if」等の普段見慣れないBlogger独自のタグが含まれます。編集をスムーズに行うために、これらのタグについてBloggerヘルプ「レイアウト用のウィジェットタグ」にしたがって勉強していきます。ページ最後にGoogleのヘルプに載っていないタグや式やコードに遭遇した際の参考サイトも紹介しています。

データ

data:

ブログの投稿データや、その際につけたタグや、作成日、といったデータは画像やテンプレートXMLとは別に保存され、表示時にテンプレートXMLにはめ込まれてページができます。

そのはめ込みの位置を「data:」タグであらわします。「data:」はタグとしてデータを表示するだけでなく、後述する「b:if」の条件判定に使われたり、「expr:」等とともに用いられ属性値となったりもします。

<!-- タグとして使われる場合 -->
<!-- ガジェットのタイトルを表示 -->
<h3><data:title/></h3>

<!-- タグとして用いられない場合 -->
<!-- ガジェットのタイプが'AdSense'時の処理 -->
<b:if cond='data:widget.type == &quot;AdSense&quot;'>
<!-- なにかしらの処理 -->
</b:if>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

「blog」データ(「data:blog.title」や「data:blog.url」)等はページのどこでも利用できますが、他のデータはガジェット(後述)固有のもので、その範囲でしか利用できません。どのガジェットでどのようなデータが利用できるかはBloggerヘルプ:「レイアウト用のデータタグ」に紹介されています。

また、「data:」にはテンプレートXML構成中に定義された一時的な変数も格納されます。

ガジェット関連のタグ

b:section
b:widget
b:wedget-settings
b:wedget-setting

BloggerのUIを開いてもらうとわかりますが、Bloggerでは「テーマ」別に大まかなレイアウトがつくられています。「サイドバー（上）」や「サイドバー（下）」、「ヘッダー」、「ページの本文」などのくくりがそれにあたります。

これらの中に「ガジェット(ウェジット)」というブログパーツを当てはめていくことで構成されています。

テンプレートXML中においてこの「大まかなレイアウト」は「b:section」タグとして表されます。このタグが始まって閉じられるまでが境界になります。

ガジェットは「b:widget」というタグであらわされます。ガジェットの設定は「b:wedget-settings」タグの内側に記述され、ひとつの設定は「b:wedget-setting」タグであらわされます。

例えば「サイドバー（下）」に「ブログアーカイブ」ガジェットが設定されている時、該当の部分は次のような記述になっています。

<b:section class='sidebar_bottom' id='sidebar_bottom' name='Sidebar (Bottom)' preferred='yes'>
  <b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive' visible='true'>
  <b:widget-settings>
  <b:widget-setting name='showStyle'>FLAT</b:widget-setting>
  <b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
  <b:widget-setting name='showWeekEnd'>true</b:widget-setting>
  ...

ガジェットが存在すれば、必ずその外側には「b:section」タグがあります。「b:seciton」「b:widget」「b:wedget-settings」「b:wedget-setting」の階層順位は常にこの順ですです。また、親と同じ要素が子要素(「b:widget」の子要素として「b:widget」が入る等)といったこともありません。

CSS関連のタグ

b:skin
b:template-skin

レイアウトに関連するBlogger独自タグに「b:skin」と「b:template-skin」があります。こちらはCSSデータや関連する設定データを<![CDATA[]]>セクションの中に持ちます。

これらにはBloggerのUIからテーマをカスタマイズした場合のデータが保存され、ページ表示の時はそのデータを元にCSSが作成されます。

ページ構成関連のタグ

b:includable
b:include
b:if(b:elseif,b:else)
b:loop
b:switch
b:class
b:attr
b:eval
b:with

「b:includable」はプログラム上の関数のようにHTML出力を用意しておく部分です。id属性に関数名にあたる記述をします。

オプションでvar属性も持つことができ、これには関数呼び出し時の引数を格納するための変数名をセットすることができます。

また「b:widget」内には必ず一つidが"main"となっている、「b:includable」が存在しガジェットの記述はそのmainから始まります。

「b:includable」で定義した関数を使う際は「b:include」を使います。この時呼び出しす関数名はname属性にセットします。

引数はdata属性に記述します。

<b:includable id='sample'>
<!-- ページの出力 -->
</b:includable>

<!-- 呼び出し -->
<b:include name='sample'>

「b:if」ではcond(後述します)を使って条件式を作成できます。「b:elseif」や「b:else」を利用する場合は単独で閉じます。

<b:if cond='条件1'>
  <!-- 条件1が真の時 -->
<b:elseif cond='条件2' />
  <!-- 条件2が真の時 -->
<b:else/>
  <!-- その他の時 -->
</b:if>

「b:if」の代わりに「b:switch」も利用可能です。表示しようとするurlがBloggerの分類における「ページ」なのか「投稿」なのかを分ける分岐がGoogleのページに次のように紹介されていました。

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <!-- ページデータ -->
<b:case value="item" />
  <!-- 投稿データ -->
<b:default />

</b:switch>

「b:loop」でループ処理をすることができます。values属性に変数のセット、var属性に設定した変数名に、ループ毎に呼び出された値が入ります。

varで設定した変数を使うにはdata:を付ける必要があります。

また単純に回数を指定したい場合は、valuesに'9 to 7'等の数値のレンジをセットできます。さらに、index属性でindexを格納する変数名をセットすれば0から始まるindexも得られます。

<b:loop values='data:links' var='link'>
  <a expr:href='data:link.href'><data:link.title/></a>
</b:loop>

<b:loop var='number' index='index' values='3 to 1'>
  <!-- numberは3,2,1 -->
  <!-- indexは0,1,2 -->
</b:loop>

「b:class」タグは直前のタグにクラスを加えるものです。cond(後述します)を伴うことが多いですが、なくても利用可能です。name属性に付与するクラス名を入れます。

<ターゲットとなるタグ/>
<b:class cond='data:post.adNumber + data:numDesktopAds lt data:maxNumAds' name='desktop-ad'/>

「b:attr」タグは直前のタグに属性を加えるものです。こちらもclass同様condがなくても使えます。nameに属性名、valueに値をセットします。

<ターゲットとなるタグ/>
<b:attr cond='data:view.isArchive' name='open' value='open'/>

「b:eval」タグは複雑な式を使いたい時に利用する構文です。掛け算や割算、[]を使った配列のインデックス指定等が行えます。

max-width: <b:eval expr="data:newWidth * data:height / data:width" />px;

<b:eval expr="data:post.labels[0].url" />

「b:with」ではvalue属性に設定したデータ式を、var属性に設定した別名で扱えるようにします。

別名が使える範囲は「b:with」が閉じられる場所までです。

<b:with value='data:widgets.AdSense any (w =&gt; w.sectionId == &quot;ads&quot;)' var='hasVerticalAds'>
  <div class='page_body'>
    <b:class cond='data:hasVerticalAds' name='has-vertical-ads'/>
    ...

属性

cond
expr:

先ほどからたびたび登場している「cond」ですが、これはBlogger独自の属性です。条件式を属性値に持つもので「b:if」などで使います。「b:include」で用いられた場合は条件式が成立する時だけ、関数呼び出しをするというように解釈されます。

<!-- コメントが1件以上あったら -->
<b:if cond='data:post.numberOfComments gt 0'>
<!-- なにかしらの処理 -->
</b:if>

<!-- postがある場合postを引数にしてpostSnippetを呼び出し -->
<b:include cond='data:post' data='post' name='postSnippet'/>

<!-- 反転したい場合はnotが使えます。 -->
<b:include cond='not data:view.isPreview' ...

<!-- cond内で不等号を使いたい場合はエスケープが必要です -->
<b:include cond='10 &lt; data:count' ...

「expr:」は属性と言っていいのかわかりませんが、後に続く本来の属性の値として「data:」の値を使いたい場合の用います。「expr:」をつけないと、属性値中の「data:」は単なる文字列として扱われてしまいます。

また、「expr:」の処理の中では、「+」での文字連結や、「? true : false」形式での三項演算子も使えます。

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<a expr:href='data:post.hasJumpLink ? data:post.url fragment "more" : data:post.url' expr:title='data:post.title'>

エスケープ

BloggerのUIからテンプレートXMLを編集して保存する際は、日本語文字などエスケープが必要な文字は自動で変換してくれます。ただし不等号はタグとみなされ保存ができないことがあります。それ以外はHTML用のエスケープ文字に置き換えられたり、数値文字参照(&#....)に変換されます。

通常のHTMLでは&quote;はダブルクォート(")ですが、Bloggerのテンプレート内では'(シングルクォート)となるようです。

Googleより詳しいマニュアル

JavaScriptなどほかのプログラム言語でも同じ名前の関数が存在し機能としては想像できると思って説明していませんでしたが、例えば先ほど出てきたany関数はGoogle版のBloggerのヘルプには載っていません。このような時におすすめなのがBlogger Code PEです。フランス語なので筆者は自動翻訳なしには読めませんが、かなり詳しくBloggerについて書かれています。

ただし、Bloggerのテーマやガジェットにはバージョンがあるようで、書かれていることすべてが自分の使っている環境で実現できるわけではないので注意してください。

投稿:2021/12/09 - 更新: