【入門】Bloggerの条件分岐タグをマスター！基本のblog型から便利なview型まで徹底解説

Bloggerの条件式とは？

Bloggerでテンプレートをカスタマイズしていると、次のような場面に必ず出てきます。

記事ページだけ広告を表示したい
トップページにはパンくずを出したくない
スマホだけ別のレイアウトにしたい
特定ページだけ外部スクリプトを読み込みたい

このように「ページや状況によって表示を切り替えたい」ときに使うのが条件式（条件分岐タグ）です。

Bloggerでは主に <b:if> タグを使って制御します。HTMLの中に組み込める、Blogger専用の制御構文です。

まつさん
まつさんもまだまだ理解できていません。みなさんも一緒に勉強して学んでいきましょう!!

基本構造（if / elseif / else）

<b:if cond='条件式'>
  条件が真（true）のとき表示
<b:elseif cond='別の条件式'/>
  上が偽で、この条件が真のとき表示
<b:else/>
  すべて偽のとき表示
</b:if>

重要なのは cond='ここに条件を書く' という点です。

条件式で使う基本記号一覧

AとBが等しい： A == B （左右が同じ値なら true）
AとBが等しくない： A != B （左右が違えば true）
AよりBが大きい： A < B （数値比較。右の方が大きいと true）
AよりBが小さい： A > B （数値比較。右の方が小さいと true）
AよりBが以上： A >= B （AがB以上なら true）
AよりBが以下： A <= B （AがB以下なら true）
AかつB（AND）： A and B （両方 true のときだけ true）
AまたはB（OR）： A or B （どちらかが true なら true）
Aが真ならB、Aが偽ならC： A ? B : C （三項演算子）
AにB1かB2が含まれる： A in {"B1", "B2"} （Aがどれかに一致すれば true）
AがBを含む： A contains "B" （文字列の中に含まれていれば true）
A1かA2がBに含まれる： {"A1", "A2"} contains B （Bが配列内のどれかに一致すれば true）

これらを <b:if cond='ここ'> のの中に書きます。

if（もし～なら）

<b:if cond='条件'>
  表示する内容
</b:if>

条件が成立（true）した場合だけ、中身が出力されます。

例：記事ページだけ表示

<b:if cond='data:view.isPost'>
  記事ページ用の内容
</b:if>

else（それ以外なら）

<b:if cond='data:view.isPost'>
  記事ページ
<b:else/>
  それ以外のページ
</b:if>

ifの条件に当てはまらなかった場合に表示されます。

elseif（別の条件を追加）

<b:if cond='data:view.isPost'>
  記事ページ
<b:elseif cond='data:view.isPage'/>
  固定ページ
<b:else/>
  その他
</b:if>

3種類以上に分岐したい場合に使用します。

よく使われるページ判別コード

Bloggerには「blog型」と「view型」の2種類があります。現在はview型のほうが分かりやすく推奨されます。

トップページ

blog型：data:blog.url == data:blog.homepageUrl

view型：data:view.isHomepage

記事ページ

blog型：data:blog.pageType == "item"

view型：data:view.isPost

固定ページ
data:view.isPage

一覧ページ（トップ・ラベル・アーカイブ等）
data:view.isMultipleItems

404ページ
data:view.isError

モバイル端末
data:blog.isMobile
※モバイルテンプレートを有効にしている必要があります。

演算子（条件の組み合わせ）

一致・不一致
== 等しい / != 等しくない

例：data:blog.pageType == "item"

AND / OR
and 両方成立 / or どちらか成立

例：data:view.isPost and data:blog.isMobile
→ スマホのときの記事ページ

否定
!

例：!data:view.isHomepage
→ トップページではない

含む
contains 文字列を含む / in リストに含まれる

実践例

1. 記事ページだけスクリプトを読み込む（高速化）

<b:if cond='data:view.isPost'>
  <script src='syntax.js'></script>
</b:if>

不要なページで読み込まないため、表示速度改善につながります。

2. サムネイルがない場合の代替画像

<b:if cond='data:post.thumbnailUrl'>
  <img expr:src='data:post.thumbnailUrl'/>
<b:else/>
  <img src='no-image.png'/>
</b:if>

3. 記事ページだけパンくず表示

<b:if cond='data:view.isSingleItem'>
  <nav class='breadcrumbs'>...</nav>
</b:if>

条件式を使うときの注意点（重要）

ここが非常に大事です。

1. 演算子の前後に半角スペースを入れる

誤り：data:blog.pageType=="item"
正しい：data:blog.pageType == "item"

スペースがないとテンプレートエラーになり、画面が真っ白になることがあります。

2. 閉じタグを必ず書く
</b:if> を書き忘れるとレイアウトが崩れます。

3. 引用符の使い分け
cond='data:blog.pageType == "item"'

外側はシングルクォーテーション、内側はダブルクォーテーション。混同するとエラーになります。

4. モバイル判定の前提設定
data:blog.isMobile を使う場合は、Blogger管理画面でモバイルテンプレートを有効にしておく必要があります。

まとめ

Bloggerの条件式は、ページの種類を判定する、表示内容をページごとに切り替える、不要なコードを読み込まないよう制御するための基本機能です。

まず押さえるべきポイントは次の3つです。

<b:if> の基本構造
data:view.isPost などのページ判定
and / or を使った条件の組み合わせ

この3点を理解すれば、テンプレートの制御はほぼ対応できるようになります。

blog型とview型の内部的な違い

Bloggerの条件式には「blog型」と「view型」の2種類がありますが、違いは単なる“書き方の違い”ではありません。内部的な設計思想が異なります。

1. blog型とは何か？

blog型は、Bloggerの旧テンプレート構造から存在している記法です。
代表例：data:blog.pageType == "item"

blog型は、ページの種類を文字列（"item" や "index" など）で判定する方式です。

特徴：文字列比較なのでミスが起きやすい、書き方がやや冗長、古いテンプレートとの互換性が高い。

2. view型とは何か？

view型は、Bloggerの新しいテーマで導入された比較的新しい記法です。
代表例：data:view.isPost

view型は、ページの状態を「真偽値（true / false）」で直接持っている構造です。

3. 内部構造の違い（本質的な差）

blog型（data:blog.pageType == "item"）
仕組み：毎回「比較処理」が必要

view型（data:view.isPost）
仕組み：すでに判定済みのフラグを見るだけ

4. パフォーマンスの違いはあるのか？

実用上、体感できる差はほぼありません。ただし、現在の推奨はview型です。

5. 判定範囲の違い

blog型には「曖昧な部分」があります。例：data:blog.pageType == "index"
indexには、トップページ、ラベル検索、アーカイブ、検索結果が含まれます。

一方、view型では細かく分かれています。
data:view.isHomepage / data:view.isLabelSearch / data:view.isArchive / data:view.isSearch

6. 互換性の違い

blog型：古いテーマ◎、新しいテーマ○
view型：古いテーマ△、新しいテーマ◎

7. どちらを使うべきか？

基本的にはview型を使うのが無難です。ただし、既存コードがblog型で統一されている場合は無理に混在させないほうが安全です。

まとめ

blog型は「文字列比較型の旧方式」、view型は「状態フラグ参照型の新方式」です。現在のカスタマイズでは、特別な理由がなければview型を使うのが基本方針です。

view型でできる細かいページ判定一覧

view型は data:view.◯◯ の形式で書きます。

<b:if cond='data:view.判定名'>
  表示内容
</b:if>

1. ページ種類の基本判定

■ トップページ (data:view.isHomepage)：ブログのトップURLを表示しているときに true。

■ 個別記事ページ (data:view.isPost)：投稿（記事）ページのみ true。

■ 固定ページ (data:view.isPage)：固定ページのみ true。

■ 記事または固定ページ（単一ページ） (data:view.isSingleItem)：記事ページと固定ページの両方で true。

■ 複数記事ページ（一覧系） (data:view.isMultipleItems)：一覧表示ページ全般で true。

■ アーカイブページ (data:view.isArchive)：月別アーカイブなどで true。

■ ラベル検索ページ (data:view.isLabelSearch)：特定ラベルをクリックしたときの一覧ページ。

■ 検索結果ページ (data:view.isSearch)：サイト内検索の結果ページ。

■ エラーページ（404） (data:view.isError)：存在しないURLにアクセスしたときに true。

2. 表示状態・特殊状態の判定

■ プレビューモード (data:view.isPreview)：編集画面の「プレビュー」で表示している場合に true。

■ フィード表示（RSS） (data:view.isFeed)：RSSフィードとして出力されている場合に true。

3. URL関連の補助判定

例：■ トップページの1ページ目だけ
<b:if cond='data:view.isHomepage and data:blog.url == data:blog.homepageUrl'>

4. 実用パターン例

記事ページだけ広告を表示： <b:if cond='data:view.isPost'>

記事・固定ページだけ共通表示： <b:if cond='data:view.isSingleItem'>

一覧ページだけサイドバー強調： <b:if cond='data:view.isMultipleItems'>

404ページだけ特別メッセージ： <b:if cond='data:view.isError'>

5.blog型との細かさの違い

view型では isHomepage, isLabelSearch, isArchive, isSearch と分離されているため、より細かく制御できるのが最大の強みです。

blog型からview型へ安全に書き換える方法

置き換えることは可能ですが、いきなり一括置換するのは危険です。

1. まず理解しておくこと

blog型は「文字列比較」、view型は「状態フラグ参照」です。

2. 基本的な安全な置き換え対応表

対象ページ	blog型（基本）	view型（推奨）
個別記事ページ	`data:blog.pageType == "item"`	`data:view.isPost`
固定ページ	`data:blog.pageType == "static_page"`	`data:view.isPage`
エラーページ	`data:blog.pageType == "error_page"`	`data:view.isError`
アーカイブ	`data:blog.pageType == "archive"`	`data:view.isArchive`
一覧ページ全般	`data:blog.pageType == "index"`	`data:view.isMultipleItems`

3. トップページ判定は慎重に

isHomepage はページ送りされた2ページ目以降は false になる挙動に注意してください。

4. 安全な移行手順（実務向け）

手順1：必ずテンプレートをバックアップ

手順2：一括置換しない

5. 混在は可能か？

結論：混在は可能です。同じ意味の判定を混ぜないことが重要です。

6. 置き換えをおすすめしないケース

安定稼働しているテーマ、古いカスタムテーマなどは無理に変更しなくてもよいです。

7. 実務的な最適解

新規はview型、既存は安定優先。これが最も安全です。

まとめ

blog型からview型への移行は可能ですが、一括置換しない、index判定は特に注意、必ずバックアップを取る、動作確認をしながら段階的に行う。これが安全な手順です。安定している既存コードを壊してまで全面移行する必要はありません。

2026/02/28