bloggerのカスタマイズに必須な条件分岐タグifのまとめ

この記事には、アフィリエイト広告を利用しています。

スポンサーリンク

bloger 条件分岐 if cond

ある程度、bloggerのタグについて理解してきたので、今の内に理解したものからまとめていきたいと思います。

最初は、bloggerのカスタマイズで一番使うであろう、条件分岐タグの「if cond」についてまとめていきます。

スポンサーリンク

条件分岐タグ「if cond」とは何か?

条件分岐タグ「if cond」とは、例えば、「TOPページの時に表示させるけど、記事ページの時には表示させない」と言う風に、条件によってどのように表示させるかを、決める事ができるタグの事です。

例えば、bloggerのテンプレートで良く見かけるのが、

<b:if cond=’data:blog.pageType == “item”‘>
  Aの文章
<b:else/>   
  Bの文章
</b:if>

<

p>上の例文だと「現在のページが記事ページ(item)だったら『Aの文章』を表示させて、それ以外だったら『Bの文章』を表示させる」という意味になります。

“item”」の部分では、「&quot;item&quot;」と書かれている場合がありますが、“と&quot;は同じ意味なので、どちらの書き方でも構いません。

基本を理解した所で、以下は、実際にどのようなifタグがあるのかを見ていきましょう。

よく使うifタグの紹介

ifとはどんなものかが分かった所で、実際に使えるようになると便利なifタグを紹介していきます。

TOPページかどうかの条件分岐

TOPページかどうかで条件分岐したい時は、以下のコードを使っていきます。

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
ここで注意してほしいのは、「==」の部分の左右を半角1マスずつ空けることです。

半角1マス開けないとエラーが起こり、画面が真っ白になることもあります。

<b:if cond='data:blog.url == data.blog.homepageUrl'>
  A
<b:else/>
  B
</b:if>

この例文では、「TOPページの場合はAを表示させて、それ以外のページではBを表示させる、と言う意味になります。

他にも「TOPページの時はAを表示させるけど、それ以外のページの時には何も表示させない」としたい場合は、以下の様にコードを書くと良いです

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  A
</b:if>

このコードの書き方は、他の条件分岐でも応用できるので、ぜひ覚えてもらいたいです。

記事ページかどうかの条件分岐

記事ページかどうかで条件分岐したい場合は、以下のコードを書きます。

<b:if cond='data:blog.pageType == "item"'>

ここで注意なのが、「“item”」と書いた後に「」の記号を忘れないこと。

そして、「==」の左右を半角1マスずつ開けることです。

<b:if cond='data:blog.pageType == "item"'>
  A
<b:else/>
  B
</b:if>

上の例文では、「現在のページが記事ページだったらAを表示させて、現在のページがそれ以外だったらBを表示させる」と言う意味です。

<

p>実は、このコードと非常に似たようなコードが何個かあって、例えば、「item」の部分を「static_page」と変える事で「もし、現在のページが固定ページだったら」と言う意味に変わります。

<b:if cond=’data:blog.pageType == “static_page”‘>
他にも色々あるので、まとめて紹介していきます。

  • index・・・TOPページ、カテゴリー(ラベル)、月別アーカイブ
  • item・・・記事ページ
  • archive・・・カテゴリー(ラベル)、月別アーカイブ
  • static_page・・・固定ページ

これらのコードはカスタマイズする時に頻繁に使うので、確実に書けるようにしておきましょう。

モバイルかどうかの条件分岐

自分のブログを見ているユーザーが、スマホかパソコンで見ているかで条件分岐する時は、以下のようなコードを書きます。

<

p><b:if cond=’data:mobile’>

<b:if cond=’data:mobile’>
A
<b:else/>
B
</b:if>
上のコードでは、「スマホの時はAを表示させて、パソコンの時はBを表示させる」という意味になっています。

アイキャッチ画像があるかないかで条件分岐

bloggerでは、アイキャッチ画像(サムネイル画像)があるかないかの条件分岐もできます。

この条件分岐のコードは2種類あって、どちらを使っても構いません。

<b:if cond='data:post.thumbnailUrl'>
<b:if cond='data:post.firstImgeUrl'>

このコードをどんな時に使うかと言うと、以下の様に使うことができます。

<b:if cond='data:post.thumbnailUrl'>
<img expr:src='data:post,thumbnailUrl'/>
<b:else/>
<img src='自分で用意したurl'/>
</b:if>

これによって、「もしアイキャッチ画像があれば、そのアイキャッチ画像を表示させて、もしなければ、自分で用意した他の画像を表示させる」ことができます。

このコードは人気記事の一覧とかで使えたりします。

1ページ目かどうかで条件分岐

TOPページやカテゴリーページ等、何ページにもまたがって続いている時に、「1ページ目には表示させて、2ページ目以降は表示させない」と条件分岐したい場合には、以下のコードを書きます。

<b:if cond='data:post.isFirstPost'>

このコード自体はあまり使い道がないので、忘れても構いません。

ボクも使ったことないですし。

もっとifタグを使いこなす方法

条件を3種類以上させる(elseif)

ifタグを使っていると、「もし記事ページだったらAを表示させ、もしTOPページだったらBを表示、それ以外はCを表示」と言う風に、3種類以上の条件を書きたくなる時があります。

そんな時は、以下のように書いていくと良いです

<b:if cond='data:blog.pageType == "item"'>
  A
<b:elseif cond='data:blog.url == data:blog.homepageUrl'>
  B
<b:else/>
  C
</b:if>

上のコードは、「もし、現在のページが記事ページ(item)だったらAを表示、もし記事ページではなくてTOPページだったらBを表示して、記事ページでもTOPでもなければCを表示する」と言う意味になります。

この「elseif」タグは、2015年6月25日に作られた、比較的新しいタグです。

結構使えるやつなので、覚えておいて損はないです。

<

p> 

「~ではない時」と条件分岐させる

今までの説明では、「○○が~の時」という感じばかりでしたが、「○○が~ではない時」という条件分岐もできます。

<b:if cond='data:blog.pageType != "item"'>

このように記述することで、「もし記事ページでない時」という意味に変わります。

ただ、「==」の部分が「!=」に変わっただけですね。

タイトルとURLをコピーしました