Bloggerテーマの基礎知識 - 条件分岐を使いこなそう

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

固有の要素タグの中には条件毎に出力を分ける事が出来る機能があり、これ使えばトップページと投稿ページとでデザインを変えたりという事も可能です。

ここでは最も良く使われるであろう条件分岐について解説します。



if文

ページ要素タグ「b:if」

<b:if cond='条件式'>

条件に一致する場合のみ<b:if>~</b:if>の間に書かれた内容が出力されます。
条件式で利用できる主な演算子には以下の通りです。
  • A               ・・・Aの時(Aがboolean型の時)
  • !A              ・・・Aではない時(Aがboolean型の時)
  • A == B  ・・・AとBが一致する時
  • A != B   ・・・AとBが一致しない時
  • A in {B,C}  ・・・AがBかCと一致する時
<b:if cond='data:blog.pageType == "item"'>
  <!-- ページの種類が"item"の場合だけココが出力される -->
</b:if>

条件式に複数の条件を指定する場合は「or」や「and」を使う事が出来ます。
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
  <!-- ページの種類が"item"もしくは"static_page"の場合だけココが出力される -->
</b:if>

<b:if cond='data:blog.pageType == "item" and data:blog.pageType == "static_page"'>
  <!-- ページの種類が"item"かつ"static_page"の場合だけココが出力される -->
</b:if>


ページ要素タグ「b:elseif」

<b:elseif cond='条件式'/>

<b:if>~</b:if>の間には<b:elseif />を追加する事が出来ます。
<b:if cond='data:blog.pageType == "item"'>
  <!-- ページの種類が"item"の場合だけココが出力される -->
<b:elseif cond='data:blog.pageType == "static_page"' />
  <!-- ページの種類が"item"ではないが'static_page'の場合だけココが出力される -->
<b:elseif cond='data:blog.pageType == "archive"' />
  <!-- ページの種類が"item"でも'static_page'でもはないが'archive'の場合だけココが出力される -->
</b:if>


ページ要素タグ「b:else」

<b:else />

<b:if>~</b:if>の間には<b:else />を追加する事が出来ます。
<b:if cond='data:blog.pageType == "item"'>
  <!-- ページの種類が"item"の場合だけココが出力される -->
<b:elseif cond='data:blog.pageType == "static_page"' />
  <!-- ページの種類が"item"ではないが"static_page"の場合だけココが出力される -->
<b:else />
  <!-- ページの種類が"item"でも"static_page"でもはない場合だけココが出力される -->
</b:if>



switch文

ページ要素タグ「b:switch、b:case、b:default」

<b:switch var='変数'>
<b:case />
<b:default />

1つの変数に対して値毎に条件を分ける場合に使いやすい構文です。
<b:case />や<b:default />と合わせて使用します。
<b:switch var='data:blog.pageType'>
  <b:case value='"item"' />
    <!-- ページの種類が"item"の場合だけココが出力される -->
  <b:case value='"static_page"' />
    <!-- ページの種類が"static_page"の場合だけココが出力される -->
  <b:default />
    <!-- ページの種類がいずれのcaseでもない場合だけココが出力される -->
</b:switch>



コメント