【2023年】これからブログを始める人へおすすめの書籍

Kissy

bloggerで表示しているページを判断する方法

作成: 更新:

enter image description here

bloggerをカスタマイズするときによく使うb:ifをつかった条件分岐についてまとめます。

条件文

b:if ~ b:elseif ~ b:else ~

例えば、「トップページには表示したいが、記事ページには表示したくない」というように、条件によって表示を切り替えたい場合に使用します。条件はcond属性に記載します。

<b:if cond='data:blog.pageType == "index"'>
	トップ/カテゴリ/アーカイブの表示
<b:elseif cond='data:blog.pageType == "error_page'>
	エラーページの表示
<b:else/>
	上記以外の表示
</b:if>

ちなみに、否定の条件の場合は、!=を使います。

<b:if cond='data:blog.pageType != "index"'>
	トップ/カテゴリ/アーカイブ以外の表示
<b:else/>
	トップ/カテゴリ/アーカイブの表示
</b:if>

ページの種類を条件にする

トップページの条件

トップページかどうかは以下で判断します。
URLで判断しているのはpageTypeではトップページなのか、カテゴリページなのか、アーカイブページなのかが判断つかないためです。

<b:if cond='data:blog.url == data:blog.homepageUrl'>
	トップページの表示
<b:else/>
	トップページ以外の表示
</b:if>

記事ページの条件

記事ページかどうかは以下で判断します。

<b:if cond='data:blog.pageType == "item"'>
	記事ページの表示
<b:else/>
	記事ページ以外の表示
</b:if>

固定ページの条件

固定ページ(bloggerのメニューで「ページ」となっているもの)かどうかは以下で判断します。

<b:if cond='data:blog.pageType == "static_page"'>
	カテゴリ/アーカイブページの表示
</b:if>

カテゴリページの条件

カテゴリページかどうかは以下で判断します。

<b:if cond='data:blog.searchLabel'>
	カテゴリページの表示
<b:else/>
	カテゴリページ以外の表示
</b:if>

検索ページの条件

検索ページかどうかは以下で判断します。

<b:if cond='data:blog.searchQuery'>
	検索ページの表示
<b:else/>
	検索ページ以外の表示
</b:if>

月別アーカイブページの条件

月別アーカイブページかどうかは以下で判断します。

<b:if cond='data:blog.pageType == "archive"'>
	月別アーカイブページの表示
<b:else/>
	月別アーカイブページ以外の表示
</b:if>

年別アーカイブページの条件

年別アーカイブページを区別する方法は現状わかっていません。わかったら追記しますね。

404 Not Foundページの条件

404 Not Foundページかどうかは以下で判断します。

<b:if cond='data:blog.pageType == "error_page"'>
	404 Not Foundページの表示
<b:else/>
	404 Not Foundページ以外の表示
</b:if>

トップ/カテゴリ/年別アーカイブの条件

トップ/カテゴリ/年別アーカイブのいずれかかどうかは以下で判断します。トップページ、カテゴリページ、年別アーカイブのそれぞれを区別しなくてもいい場合はこの条件が適しています。

<b:if cond='data:blog.pageType == "index"'>
	トップ/カテゴリ/年別アーカイブページの表示
<b:else/>
	トップ/カテゴリ/年別アーカイブページ以外の表示
</b:if>

その他のよく使う条件

PC/モバイルを条件にする

モバイルかどうかを判断するには以下で判断します。ただし、この条件を使用するには、「テンプレート」-「モバイルテンプレートの使用」が「はい」になっている必要があります。

<b:if cond='data:blog.isMobile'>
	モバイルの表示
<b:else/>
	PCの表示
</b:if>

ちなみに、このブログは今のところ「モバイルテンプレート」を使用していないので、この条件が使えません。

アイキャッチ画像の有無を条件にする

アイキャッチ画像があるか/ないかを条件にする場合は、以下のようにします。2つ記載していますが、どちらでも問題ありません。

<b:if cond='data:post.thumbnailUrl'>
	アイキャッチ画像がある場合の表示
<b:else/>	
	アイキャッチ画像がない場合の表示
</b:if>
<b:if cond='data:post.firstImgeUrl'>
	アイキャッチ画像がある場合の表示
<b:else/>	
	アイキャッチ画像がない場合の表示
</b:if>

1ページ目かどうかを条件にする

カテゴリページやアーカイブページなどでは、複数のページで表示される場合があります。このとき、「1ページ目のみ表示して、2ページ目以降は表示したくない」ということがあります。

そういう場合は、以下で判断します。

<b:if cond='data:post.isFirstPost'>
	1ページ目の表示
<b:else/>
	2ページ目以降の表示
</b:if>

最後まで読んでいただき、ありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK