Bloggerのカスタマイズのページ毎の振り分けの一覧と条件分岐のifの使い方

Bloggerブログのテンプレートは振り分けを使ってページ毎にコンテンツを表示できる。使い方は条件分岐の独自タグのifの開始タグと終了タグでコンテンツを囲むだけだから非常に簡単だ。Bloggerのブログのカスタマイズにとても便利なので、どんなページにコンテンツを振り分けて表示できるかを一覧に纏めておきたいと思う。

目次

1. ページ振り分けの二種類のifタグ
2. data:view型の振り分けタグ
3. data:blog型の振り分けタグ
4. ページ振り分けのifタグの使い方
5. 入れ子のタグで条件を絞り込む
6. 条件や条件の判定を切り替える
7. 複数の振り分け条件を盛り込む

ページ振り分けの二種類のifタグ

data:view型の振り分けタグ

ifに振り分け条件のcondを個別に付ける。

公式テーマのContempoとSohoとEmporioとNotableから追加された。しかし以前のテーマでも同じように使える。新しいタイプの振り分けタグだ。

※ページの振り分け以外のデータの取得などではdata:view型が動作しない場合もある。

ホームページ（トップページ）

<b:if cond='data:view.isHomepage'>
ホームページのコンテンツ
</b:if>

マルチプルアイテム：ホーム、アーカイブ、ラベル、検索、検索結果ページ

<b:if cond='data:view.isMultipleItems'>
マルチプルアイテムのコンテンツ
</b:if>

シングルアイテム：記事、追加ページ

<b:if cond='data:view.isSingleItem'>
シングルアイテムのコンテンツ
</b:if>

アーカイブページ

<b:if cond='data:view.isArchive'>
アーカイブページのコンテンツ
</b:if>

検索ページ（ラベルと検索結果ページを含む）

<b:if cond='data:view.isSearch'>
検索ページのコンテンツ
</b:if>

ラベルページ

<b:if cond='data:view.isLabelSearch'>
ラベルページのコンテンツ
</b:if>

検索結果ページ

<b:if cond='data:view.search.query'>
検索結果ページのコンテンツ
</b:if>

特定の検索結果ページ

<b:if cond='data:view.search.query == "キーワード"'>
特定の検索結果ページのコンテンツ
</b:if>

※キーワードは検索で入力されるもの。

記事ページ

<b:if cond='data:view.isPost'>
記事ページのコンテンツ
</b:if>

追加ページ

<b:if cond='data:view.isPage'>
追加ページのコンテンツ
</b:if>

注目の画像投稿ページ（通常画像かYouTube動画サムネイル付きの記事／追加ページ）

<b:if cond='data:view.featuredImage'>
注目の画像投稿ページのコンテンツ
</b:if>

YouTube画像投稿ページ（YouTube動画サムネイル付きの記事／追加ページ）

<b:if cond='data:view.featuredImage.isYoutube'>
YouTube画像投稿ページのコンテンツ
</b:if>

付記：YouTube動画サムネイルが全ての画像の先頭にある場合のみ。

エラーページ

<b:if cond='data:view.isError'>
エラーページのコンテンツ
</b:if>

レイアウト（管理画面）

<b:if cond='data:view.isLayoutMode'>
レイアウトのコンテンツ
</b:if>

プレビュー（管理画面）

<b:if cond='data:view.isPreview'>
プレビューのコンテンツ
</b:if>

参考サイト

• Les données data:view (Global) - Blogger Data Documentation

data:blog型の振り分けタグ

ifに振り分け条件のcondを個別に付けるか、内容を判定する。

公式テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行と共に使われていた。その後に追加されたテーマでも変わらずに動作する。古いタイプの振り分けタグだ。

※ページの振り分け以外のデータの取得などではdata:blog型が動作しない場合もある。

ホームページ（トップページ）

<b:if cond='data:blog.homepageUrl'>
ホームページのコンテンツ
</b:if>

URL（個別ページ）

<b:if cond='data:blog.url == URL'>
URLのコンテンツ
</b:if>

ソースコードの「URL」にはページ毎のサイトアドレスを記載する。

手動で記載する場合は半角二重引用符で囲って応答ヘッダーのhttpやhttpsからの絶対パスのサイトアドレスを記載しなくては動作しない。

<b:if cond='data:blog.url == "絶対パス"'>
URLのコンテンツ
</b:if>

BloggerはモバイルでのURLが「?m=1」付きにリダイレクトされるから手動ではもう一つ注意しなくてはならない。振り分けに「URL」の絶対パスを記載してもデスクトップと同じページとして扱われなくなってしまう。両方とも対応するには二つの振り分けが必要にもなる。

独自タグのdataからもサイトアドレスを振り分けタグに出力して記載できてモバイルの「?m=1」付きのURLには修正なしに自動て対応できるから便利なんだ。

dataを使う場合は「URL」に半角二重引用符は要らない。

<b:if cond='data:blog.url == dataのURLの独自タグ'>
URLのコンテンツ
</b:if>

トップページは「data:blog.homepageUrl」を記載すれば大丈夫だけど、しかし子ページはdataのURLの独自タグに相対パスを追加するのが簡単だろう。

<b:if cond='data:blog.url == data:view.url path "相対パス"'>
URLのコンテンツ
</b:if>

最初の「data:view.url」でルートドメイン（トップページのサイトアドレス）が半角スラッシュまで出力されるから残りの部分の相対パスを手動で付け加えておく。

子ページのサイトアドレスは一般的にディレクトリーは末尾に半角スラッシュが付いてファイルは何も付かない。

Bloggerブログの子ページはアーカイブがディレクトリー、その他はファイルとして公開されているから前者は相対パスの末尾に半角スラッシュを付けて後者は何も付けずに記載すると大丈夫だ。

インデックスタイプ：ホーム、ラベル、検索、検索結果ページ

<b:if cond='data:blog.pageType == "index"'>
インデックスタイプのコンテンツ
</b:if>

アーカイブタイプ（アーカイブページ）

<b:if cond='data:blog.pageType == "archive"'>
アーカイブタイプのコンテンツ
</b:if>

検索ページ（ラベルと検索結果ページを含む）

<b:if cond='data:blog.searchUrl'>
検索ページのコンテンツ
</b:if>

ラベルページ

<b:if cond='data:blog.searchLabel'>
ラベルページのコンテンツ
</b:if>

検索結果ページ

<b:if cond='data:blog.searchQuery'>
検索結果ページのコンテンツ
</b:if>

特定の検索結果ページ

<b:if cond='data:blog.searchQuery == "キーワード"'>
特定の検索結果ページのコンテンツ
</b:if>

※キーワードは検索で入力されるもの。

アイテムタイプ：記事ページ

<b:if cond='data:blog.pageType == "item"'>
アイテムタイプのコンテンツ
</b:if>

記事ページID（個別ページ）

<b:if cond='data:blog.postId == 記事ページID'>
記事ページIDのコンテンツ
</b:if>

※記事ページIDは投稿の編集画面のURLの末尾の十二桁の数字。

スタティックタイプ：追加ページ

<b:if cond='data:blog.pageType == "static_page"'>
スタティックタイプのコンテンツ
</b:if>

追加ページID（個別ページ）

<b:if cond='data:blog.pageId == 追加ページID'>
追加ページIDのコンテンツ
</b:if>

※追加ページIDは投稿の編集画面のURLの末尾の十二桁の数字。

画像付き投稿ページ（通常画像かYouTube動画サムネイル付きの記事／追加ページ）

<b:if cond='data:blog.postImageUrl'>
画像付き投稿ページのコンテンツ
</b:if>

エラーページ

<b:if cond='data:blog.pageType == "error_page"'>
エラーページのコンテンツ
</b:if>

モバイルリクエスト（スマホ閲覧用）

<b:if cond='data:blog.isMobileRequest == "true"'>
モバイルリクエストのコンテンツ
</b:if>

※コードの「isMobileRequest」で止めて「== "true"」の部分を省略しても使える。

参考サイト

• Les données data:blog (Global) - Blogger Data Documentation

ページ振り分けのifタグの使い方

通常の使い方は条件分岐のifの開始タグと終了タグの間にコンテンツを記載するだけだから非常に簡単だけど、しかしその他に特殊な使い方が三つあって何れも便利なので、覚えておくと良いと思う。

入れ子のタグで条件を絞り込む

条件分岐のifは入れ子にできるので、複数の条件を続けてかけて行っても構わない。

サンプルのソースコード

<b:if cond='MultipleItems'>
マルチプルアイテムのコンテンツ
<b:if cond='MultipleItems'>
ホームページのコンテンツ
</b:if>
</b:if>

外側の広い条件のタグから内側の狭いの条件のタグへとコンテンツを段々と細かく選び取りながら振り分ける。

条件や条件の判定を切り替える

ifの条件を付けるcondの内容のdataは半角クエスチョンの「!」の演算子を先頭に置くと反対に除外として扱われる。

サンプルのソースコード

<b:if cond='!data:view.isHomepage'>
ホームページ以外のコンテンツ
</b:if>

condの内容としてdataの先頭に「!」を付けると反対の意味付けで扱われる。

同様の演算子として「not」もあって半角スペースで区切って<b:if cond='not data:view.isHomepage'>コンテンツ</b:if>のように記載するとやはりcondの内容を否定して反対の仕方で動作する。

condの内容が等価演算子の「==」の判定を持つ場合は不等価演算子の「!=」を記載すると反対に除外として扱われる。

サンプルのソースコード

<b:if cond='data:blog.pageType != "index"'>コンテンツ</b:if>
インデックスタイプ以外のコンテンツ
</b:if>

condに含まれる判定が「!=」だと判定の対象が除外の方向で捉えられる。

他にもdata:blog型のモバイルリクエストの振り分けは判定の内容が「true」（真）で当て嵌まって決まる。この場合は「false」（偽）にすると反対の判定が行われる。振り分けタグは条件付けを除外として扱うようになる。

複数の振り分け条件を盛り込む

ifにelseifかelseを追加するかcondにandかorを追加するという二つの方法が考えられる。

ifにelseifかelseを追加する方法

Bloggerの独自タグの条件分岐のifはcondで条件を付けてコンテンツを振り分ける。その中にelseifを入れてcondからさらに細かく、またはelseを入れて反対の条件からもコンテンツを表示できる。

サンプルのソースコード

<b:if cond='data:view.isMultipleItems'>
マルチプルアイテムのコンテンツ
<b:elseif cond='data:view.isPost'/>
記事ページのコンテンツ
<b:else/>
マルチプルアイテムと記事ページ以外（追加ページ）のコンテンツ
</b:if>

elseifとifはどちらも終了タグがなくて開始タグに含まれるので、開始タグの最後の前に半角スラッシュを入れなくてはならない。

ifに必要な分だけ使う。どちらか一つでも構わない。elseifは別々の条件付けで幾つでも追加できる。elseは前の全ての条件の反対を示すから一つで十分だろう。

condにandかorを追加する方法

ifの振り分け条件のcondには複数の条件を入られる。一挙に働くのが「and」、別途に働くのが「or」の演算子なんだ。前者は複数の条件の全てを満たす場合、後者は複数の条件の一つを満たす場合にコンテンツが振り分けられる。

サンプルのソースコード

<b:if cond='data:view.isPost and data:view.isfeaturedImage or data:view.isHomepage'>
記事ページで注目の画像投稿があるものかホームページのコンテンツ
</b:if>

「and」は複数のページを合わせて一つの場合を抜き出せる。「or」は振り分けたいページを幾つも追加できる。

どちらもcondの条件を半角スペースて区切って記載する。両方を同時に使えるし、必要な分だけでも構わない。

二種類の演算子が同時に使われて三つ以上の条件になると分かり辛いけど、とにかく「and」はそれ自身の左右（直近の両側）の条件を繋ぎ合わせるもので、「or」はそれ自身の左右（直近の両側）の条件を切り離すものと捉えるともっと遠くの他の条件に惑わされずに済むかも知れない。

または「and」は複数の条件を一つに纏めるのと等しいので、例えば「条件① and 条件② or 条件③ and 条件④」のような場合は条件①と 条件②による一つの条件か条件③と条件④による一つの条件として捉えられる。

マークアップで「and」は「&&」、「or」は「||」の演算子を使っても同じになって複数の条件を組み合わせて使える。ただし「&&」に関しては通常だとBloggerのテンプレートのXML構文に抵触してエラーになるので、「&&」という実体参照に変換して正常に読み取られるようにエスケープする必要がある。

二つの方法でifに複数の振り分け条件を盛り込めるけれどもそれぞれを併用できるので、色んなパターンでページ毎にコンテンツを細かく振り分けて表示するようなカスタマイズには欠かせない。

複数の条件を一つに纏める方法

演算子の「and」と「or」は複数の条件を一つに纏めることもできて半角括弧で囲って記載する。

サンプルのソースコード

<b:if cond='data:view.isSingleItem and (data:view.isfeaturedImage or data:view.isPage)'>
シングルアイテムページで注目の画像投稿があるもの（画像ありの記事ページ）か追加ページのコンテンツ
</b:if>

特に「or」の演算子による複数の条件を「and」に対して同じように付ける場合に使う。

入れ子のタグで書き換える

<b:if cond='data:view.isSingleItem'>
<b:if cond='data:view.isfeaturedImage or data:view.isPage'>
シングルアイテムページで注目の画像投稿があるもの（画像ありの記事ページ）か追加ページのコンテンツ
</b:if>
</b:if>

つまり演算子付きの複数の条件を括弧に入れて別の演算子付きの条件と合わせるのは条件分岐のifを入れ子で使うのと等しい結果となる。

括弧の外側の演算子が「or」の場合は括弧なしで記載したのと同じになる。例えば<b:if cond='data:view.isPost or (data:view.isMultipleItems and !data:view.isArchive)'>記事ページかマルチプルアイテムでアーカイブ以外（ホームかラベルかブログ内検索）のページのコンテンツ</b:if>の条件は括弧を外して「data:view.isPost or (data:view.isMultipleItems and !data:view.isArchive」だけでも変わらない。だから括弧を付けるのは意味がないけど、しかしエラーにならないから付けて全く使えないわけではない。