Blogger Labo：ifを使って要素を判別するテンプレートタグまとめ

Bloggerのテンプレートでは、特定のページや要素を指定したい時にifタグを使います。

ifタグとは条件分岐を示すタグで、単語の通り「もし（～だったら）」といった感じで使われるものです。

今回は、このifタグを使った要素の判別方法をまとめていこうと思います。


ifタグについて


Bloggerのifタグは特定の要素のみを処理したい時に使います。
例えば「個別記事ページのみで、パンくずリストを表示させたい」などです。

ifタグは「開始タグ（<b:if cond='…'>）」と「閉じタグ（</b:if>）」で構成されます。
この開始タグと閉じタグの間に記述した処理が、ifタグで指定した条件でのみ行われる処理となります。

ifタグの「cond='…'」の「…」の部分には条件を記述します。
例えば「<b:if cond='data:blog.pageType == "ページタイプ"'>」といった形です。

この「==」は等しいという意味で、この部分を等しくないとしたければ「!=」となります。
条件分岐の指定方法は以下の通りです。

・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

blog型とview型


ifタグには「blog型」と「view型」があります。

blog型は従来の記法です。公式リファレンスではこちらが紹介されています。
view型は比較的最近使えるようになった記法です。

どちらでも同じように使えます（自分はblog型を使っています）。

ページタイプ


トップページ（Homepage）


blog型

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- トップページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isHomepage'>
<!-- トップページの場合の処理 -->
</b:if> 

個別記事ページ（Item pages）


blog型

<b:if cond='data:blog.pageType == "item"'> 
<!-- 個別記事ページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isPost'> 
<!-- 個別記事ページの場合の処理 -->
</b:if> 

固定ページ（Static page）


blog型

<b:if cond='data:blog.pageType == "static_page"'>
<!-- 固定ページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isPage'>
<!-- 固定ページの場合の処理 -->
</b:if> 

個別記事と固定ページ


blog型

<b:if cond='data:blog.url == data:post.url'>
<!-- 個別記事と固定ページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isSingleItem'>
<!-- 個別記事と固定ページの場合の処理 -->
</b:if> 

インデックスページ（ホーム、アーカイブ、ラベル、検索）


blog型

<b:if cond='data:blog.pageType == "index"'>
<!-- インデックスページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isMultipleItems'>
<!-- インデックスページの場合の処理 -->
</b:if> 

ラベルページ


blog型

<b:if cond='data:blog.searchLabel'>
<!-- ラベルページの場合の処理 -->
</b:if>

view型

<b:if cond='data:view.isLabelSearch'>
<!-- ラベルページの場合の処理 -->
</b:if>

特定のラベルページ


blog型

<b:if cond='data:blog.searchLabel == "ラベル名"'>  
<!-- ラベル名のラベルページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isLabelSearch == "ラベル名"'>  
<!-- ラベル名のラベルページの場合の処理 -->
</b:if> 

検索ページ


blog型

<b:if cond='data:blog.searchQuery'> 
<!-- 検索ページの場合の処理 -->
</b:if>

view型

<b:if cond='data:view.isSearch'>
<!-- 検索ページの場合の処理 -->
</b:if>

特定の検索ページ


blog型

<b:if cond='data:blog.searchQuery == "検索ワード"'>
<!-- 検索ワードの検索ページの場合の処理 -->
</b:if> 

アーカイブページ


blog型

<b:if cond='data:blog.pageType == "archive"'> 
<!-- アーカイブページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isArchive'> 
<!-- アーカイブページの場合の処理 -->
</b:if> 

エラーページ（404）


blog型

<b:if cond='data:blog.pageType == "error_page"'>
<!-- 404ページの場合の処理 -->
</b:if> 

view型

<b:if cond='data:view.isError'>
<!-- 404ページの場合の処理 -->
</b:if> 

その他


特定のページ


<b:if cond='data:blog.url.canonical.https == "URL"'>
<!-- URLのページの場合の処理 -->
</b:if>

画像あり投稿


<b:if cond='data:post.featuredImage'>
<!-- 画像あり投稿の場合の処理 -->
</b:if>

YouTube動画あり投稿


<b:if cond='data:post.featuredImage.isYoutube'>
<!-- youtubeあり投稿の場合の処理 -->
</b:if>

画像付きページ


<b:if cond='data:blog.postImageUrl'>
<!-- 画像付きページの場合の処理 -->
</b:if>

サムネイル


<b:if cond='data:post.thumbnailUrl'>
<!-- サムネイルがある場合の処理 -->
</b:if> 

記事の最初の画像


<b:if cond='data:post.firstImageUrl'>
<!-- 記事の最初の画像がある場合の処理 -->
</b:if> 

モバイルバージョン


<b:if cond="data:blog.isMobile">
<!-- モバイルページの場合の処理 -->
</b:if>

レイアウト


<b:if cond='data:blog.isLayoutMode'>
<!-- 管理画面のレイアウトの処理 -->
</b:if>


プレビューモード


<b:if cond='data:view.isPreview'>
<!-- プレビューモードの処理 -->
</b:if>