Bloggerテーマの基礎知識 - <b:class>要素について知ろう

Bloggerではテーマの中でのみ使える固有の要素タグがあります。
この固有の要素タグはブログが表示される時に様々な制御が行われて最終的なHTMLが作り上げられていきます。

ここではブログを構成するデータを扱う<b:class>要素について解説します。

<b:class>要素とは

<b:class>要素は、条件を満たす時のみHTMLタグの class 属性に値を付ける為の要素です。

例えば、<div>要素に対してトップページの時のみ class='toppage' という属性を付けるといったことが可能になります。

<b:class>要素の属性

cond

class属性を付与する時の条件を指定します。
条件が一致する場合のみ class属性に値が追加されます。

条件の書き方の参考：ページの種類を判断しよう

条件分岐を使いこなそう

name

条件が一致した時に追加されるclassの値を指定します。

<b:class>要素の利用例

テーマ内の記述例

テンプレートにて以下のように<b:class>要素を記述したとしましょう。

<div>
  <b:class cond='data:view.isHomepage' name='toppage'/>
  <div class='item'>
    <b:class cond='data:view.isHomepage' name='home'/>
  </div>
</div>

生成されるHTMLの例

トップページの時には<div>に class属性が付きますが、それ以外の場合は class属性が付きません。
既に別のclass属性が指定されていた場合には追加で属性が付与されます。

トップページの時

<div class='toppage'>
  <div class='item home'>
  </div>
</div>

トップページ以外の時

<div>
  <div class='item'>
  </div>
</div>

Ararami Studio