ある程度、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”」の部分では、「"item"」と書かれている場合がありますが、“と"は同じ意味なので、どちらの書き方でも構いません。
基本を理解した所で、以下は、実際にどのようなifタグがあるのかを見ていきましょう。
よく使うifタグの紹介
ifとはどんなものかが分かった所で、実際に使えるようになると便利なifタグを紹介していきます。
TOPページかどうかの条件分岐
TOPページかどうかで条件分岐したい時は、以下のコードを使っていきます。
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
ここで注意してほしいのは、「＝＝」の部分の左右を半角１マスずつ空けることです。
半角１マス開けないとエラーが起こり、画面が真っ白になることもあります。
<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”」と書いた後に「‘」の記号を忘れないこと。
そして、「＝＝」の左右を半角１マスずつ開けることです。
<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では、アイキャッチ画像（サムネイル画像）があるかないかの条件分岐もできます。
この条件分岐のコードは２種類あって、どちらを使っても構いません。
<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>
これによって、「もしアイキャッチ画像があれば、そのアイキャッチ画像を表示させて、もしなければ、自分で用意した他の画像を表示させる」ことができます。
このコードは人気記事の一覧とかで使えたりします。
１ページ目かどうかで条件分岐
TOPページやカテゴリーページ等、何ページにもまたがって続いている時に、「１ページ目には表示させて、２ページ目以降は表示させない」と条件分岐したい場合には、以下のコードを書きます。
<b:if cond='data:post.isFirstPost'>
このコード自体はあまり使い道がないので、忘れても構いません。
ボクも使ったことないですし。
もっとifタグを使いこなす方法
条件を３種類以上させる（elseif）
ifタグを使っていると、「もし記事ページだったらAを表示させ、もしTOPページだったらBを表示、それ以外はCを表示」と言う風に、３種類以上の条件を書きたくなる時があります。
そんな時は、以下のように書いていくと良いです。
<b:if cond='data:blog.pageType == "item"'> A <b:elseif cond='data:blog.url == data:blog.homepageUrl'> B <b:else/> C </b:if>
上のコードは、「もし、現在のページが記事ページ（item）だったらＡを表示、もし記事ページではなくてＴＯＰページだったらＢを表示して、記事ページでもＴＯＰでもなければＣを表示する」と言う意味になります。
この「elseif」タグは、2015年6月25日に作られた、比較的新しいタグです。
結構使えるやつなので、覚えておいて損はないです。
<
p>
「～ではない時」と条件分岐させる
今までの説明では、「○○が～の時」という感じばかりでしたが、「○○が～ではない時」という条件分岐もできます。
<b:if cond='data:blog.pageType != "item"'>
このように記述することで、「もし記事ページでない時」という意味に変わります。
ただ、「==」の部分が「!=」に変わっただけですね。
