スキップしてメイン コンテンツに移動

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

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

data:view型の振り分けタグ

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

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

ホームページ(トップページ)

<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.isPost'>
記事ページのコンテンツ
</b:if>

追加ページ

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

注目の画像投稿(画像付きの記事/追加ページ)

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

YouTube画像投稿(YouTube動画付きの記事/追加ページ)

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

エラーページ

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

data:blog型の振り分けタグ

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

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

ホームページ(トップページ)

<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.pageType == "item"'>
アイテムタイプのコンテンツ
</b:if>

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

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

画像付きページ

<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>

Bloggerの振り分けタグの使い方

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

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

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

例えば<b:if cond='!data:view.isHomepage'>コンテンツのようなマークアップはホームページ以外にコンテンツを表示する。

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

例えば<b:if cond='data:blog.pageType != "index"'>コンテンツのようなマークアップはインデックスタイプ以外にコンテンツを表示する。

他にも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の条件を半角スペースて区切って記載する。両方を同時に使えるし、必要な分だけでも構わない。

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

コメント

些細な日常の人気の投稿

アドセンスの支払い日は翌月二十一日前後だけれども保留されると送金されない

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

Imgurで画像URLと埋め込みコードを取得する方法