Google Blogger の b:widget タグに class 名や任意の属性を追加する方法

Google Blogger のブログテンプレートの XML には b:widget という独自タグが存在しています。

これはブログに表示される時に div タグに変換されますが、ここに class 名を追加したいと思ったことがありました。

class 名追加の失敗例

<b:widget id='HTML1' locked='false' title="不要" type='HTML' version='2' class='added-class-name'>

まずは失敗例です。b:widget タグに class 属性を直接書き込んでも...

<div class="widget HTML" data-version="2" id="HTML1">

ブログで表示される時には書き込んだはずの class 名が消えています。

ではどうすれば class 属性を追加できるのか。

解決策は b:class タグ

<b:widget id='HTML1' locked='false' title="タイトル" type='HTML' version='2'>
  <b:widget-settings>
  ...
  </b:widget-settings>
  <b:includable id='main'>
    <b:class name='added-class-name'/>
    ...
    ...
  </b:includable>
</b:widget>

b:widget タグ内にある id="main" の属性が付いた b:includable タグの直下の子要素に b:class タグを追加します。

b:class タグの構文はこのようになっており、name属性の値に追加したいclass名を半角スペースを挟んで並べます。

cond 属性は条件指定が要らなければ省略できます。

<div class="widget HTML added-class-name" data-version="2" id="HTML1">
  ...
  ...
</div>

すると、このようにブログで表示される時に class 名がきちんと追加されます。

b:attr タグを使って応用

この方法を応用すればカスタマイズの幅が広がります。

<b:widget id='HTML1' locked='false' title="タイトル" type='HTML' version='2'>
  <b:widget-settings>
  ...
  </b:widget-settings>
  <b:includable id='main'>
    <b:attr name='data-attribute-name' value='attribute-value'/>
    ...
    ...
  </b:includable>
</b:widget>

b:class タグをこのように b:attr タグに置き換えると、b:widget タグに任意の属性と属性値を追加できます。

b:attr タグの構文はこのようになっており、name、value の値にそれぞれ追加したい属性名と属性値を入れます。

cond 属性は b:class 属性と同じく省略できます。

<div class="widget HTML" data-attribute-name="attribute-value" data-version="2" id="HTML1">
  ...
  ...
</div>

すると、このようにブログで表示される時に設定した属性が追加されているはずです。

複数の属性を追加したい時は、b:attr タグを下に並べていけばいいだけです。