Bloggerで、
- トップページだけにバナーを出したい
- 記事ページだけ広告を表示したい
- 特定ラベルの記事だけデザインを変えたい
- 固定ページではサイドバーを消したい
と思ったことはありませんか？
これらを実現するのがBloggerの条件分岐タグ
<b:if> です。
Bloggerは1つのHTMLテンプレートですべてのページを動かしています。だからこそ「条件分岐」を理解しているかどうかで、カスタマイズの自由度が大きく変わります。
予備知識：条件分岐の基本ルール
条件分岐とは、「もし○○という条件なら、これを表示する」という命令のことです。Bloggerでは独自のタグを使用してこれを記述します。
基本の書き方
<b:if cond='条件式'>
<!-- 条件に一致した時に表示される内容 -->
</b:if>
というページ情報が常に渡されています。
絶対に守るべき注意点
- 演算子の前後のスペース： ==（等しい）や !=（等しくない）などの記号の前後には、必ず半角スペースを入れてください。これがないと、保存時にエラーが出たり、ブログが真っ白になったりすることがあります。
- バックアップを忘れずに： HTMLの編集は失敗するとブログが表示されなくなる恐れがあるため、作業前には必ずテーマのバックアップを取りましょう。
data:blog.pageId == "1234567890"
ページの種類で表示を切り替える
現在のBloggerで主流の「data:view」型（新しいテーマ向け）と、以前からある「data:blog」型の2種類があります。
| ページ名 | 条件式（data:view型） |
|---|---|
| トップページ | data:view.isHomepage |
| 記事ページ | data:view.isPost |
| 固定ページ | data:view.isPage |
| アーカイブ | data:view.isArchive |
| ラベルページ | data:view.isLabelSearch |
| エラーページ | data:view.isError |
コード例
<b:if cond='data:view.isPost'>
<!-- ここに広告や目次のコード -->
</b:if>
特定のURLや複数の条件を組み合わせる
特定の固定ページIDで判定：
data:blog.pageId == "1234567890"
特定の記事IDで判定：
data:blog.postId == "1234567890"
「～ではない時」や「複数の条件」
否定（! / not）：
トップページ以外
cond='!data:view.isHomepage'
かつ（and）：
画像付きの記事ページのみ
cond='data:view.isPost and data:view.featuredImage'
または（or）：
記事か固定ページのみ
cond='data:view.isPost or data:view.isPage'
複雑な条件分岐（elseif / else）
「Aならこれ、Bならそれ、それ以外はこれ」と3つ以上に分けたい場合に使います。
<b:if cond='data:view.isPost'>
<p>記事ページです</p>
<b:elseif cond='data:view.isHomepage'/>
<p>トップページです</p>
<b:else/>
<p>それ以外のページです</p>
</b:if>
※b:elseif の最後には /（半角スラッシュ）が必要な点に注意してください。
よく使うBlogger条件分岐
トップページ
<b:if cond='data:view.isHomepage'>
<!-- トップページの場合の処理 -->
</b:if>
個別記事ページ
<b:if cond='data:view.isPost'>
<!-- 個別記事ページの場合の処理 -->
</b:if>
固定ページ
<b:if cond='data:view.isPage'>
<!-- 固定ページの場合の処理 -->
</b:if>
個別記事＋固定ページ
<b:if cond='data:view.isSingleItem'>
<!-- 個別記事と固定ページの場合の処理 -->
</b:if>
インデックスページ（ホーム・アーカイブ・ラベル・検索）
<b:if cond='data:view.isMultipleItems'>
<!-- インデックスページの場合の処理 -->
</b:if>
ラベルページ
<b:if cond='data:view.isLabelSearch'>
<!-- ラベルページの場合の処理 -->
</b:if>
特定のラベルページ
<b:if cond='data:view.isLabelSearch and data:blog.searchLabel == "ラベル名"'>
<!-- 指定ラベルのページ -->
</b:if>
検索ページ
<b:if cond='data:view.isSearch'>
<!-- 検索ページの場合の処理 -->
</b:if>
アーカイブページ
<b:if cond='data:view.isArchive'>
<!-- アーカイブページの場合の処理 -->
</b:if>
エラーページ（404）
<b:if cond='data:view.isError'>
<!-- 404ページの場合の処理 -->
</b:if>
特定のURL
<b:if cond='data:blog.url.canonical.https == "URL"'>
<!-- 指定URLページ -->
</b:if>
特定の記事
<b:if cond='data:view.isPost and data:post.id == "1234567890"'>
<!-- 特定の記事IDの場合の処理 -->
</b:if>
Bloggerで特定の記事IDを取得する方法 :
- Blogger 管理画面にログイン
- 「投稿」一覧を開く
- 対象の記事を「編集」する
- ブラウザのURLを確認
https://draft.blogger.com/blog/post/edit/ブログID/記事ID
長い数字の羅列が 記事ID です。
ラムダ式（Lambda）でリスト判定をスマートに
「ラムダ式」とは、一言で言えば「名前のない関数」です。Bloggerでは、記事のラベルやコメントなどの「リストデータ」を扱う際に、非常に強力な力を発揮します。
以前は「特定のラベルがあるか」を調べるだけでも、記事のラベルを一つずつループで回して確認する必要がありましたが、ラムダ式を使えば1行で記述可能です。
ラムダ式の基本構文
Bloggerのラムダ式は、以下の3要素で構成されます
- 対象データ: data:post.labels（ラベルのリスト）など
- 演算子（ラムダオペレータ）: any（どれか一つでも）、all（すべて）など
- 条件式: ( 変数名 => 条件 ) の形式
よく使うラムダオペレータ一覧
| オペレータ | 意味・動作 |
|---|---|
| any | 条件を満たすアイテムが1つでもあれば真（true）。 |
| all | すべてのアイテムが条件を満たせば真。 |
| none | 条件を満たすアイテムが1つもなければ真。 |
| count | 条件に合致するアイテムの「数」を返す。 |
| filter | 条件に合うものだけを抽出した新しいリストを作る。 |
| first | 条件に合う最初のアイテムを1つだけ取り出す。 |
| map | リストの中身を加工した新しいリストを作る。 |
実戦で使えるコード例
例①：特定のラベルがついた記事にだけ画像を表示する
その投稿に「Flower」というラベルが含まれているかどうかを any で判定します。
<b:if cond='data:post.labels any (l => l.name == "Flower")'>
<img src='/img/flower.jpg' />
</b:if>
例②：特定のラベルを「除外」して表示する（filter）
「重要」というラベル以外のラベルだけを表示したい場合、filter を使ってリストを絞り込みます。
<b:loop values='data:post.labels filter (l => l.name != "重要")' var='label'>
<span class='label-name'><data:label.name/></span>
</b:loop>
例③：複数のラベルのいずれかに合致するか判定（in演算子の併用）
「labelA」または「labelB」のどちらかがあれば表示します。
<b:if cond='data:post.labels any (l => l.name in {"labelA", "labelB"})'>
<!-- ヒットした時の処理 -->
</b:if>
例④：ラベルの数をカウントする
ラベルが3つ以上ついている時だけ何かを表示したい場合などに便利です。
<b:if cond='data:post.labels count (l => l.isNamespace == "false") >= 3'>
<p>ラベルがたくさんついています！</p>
</b:if>
まとめ
Bloggerの条件分岐をマスターすれば、1つのテンプレートでページごとに全く異なるレイアウトを作ることが可能になります。
まずは簡単な data:view.isHomepage から試してみて、慣れてきたら and や or、そしてラムダ式を使った高度なフィルタリングに挑戦してみてください！
コメントを投稿