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

   

bloger 条件分岐 if cond

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

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

スポンサーリンク

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

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

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

上の例文だと「現在のページが記事ページ(item)だったら『Aの文章』を表示させて、それ以外だったら『Bの文章』を表示させる」という意味になります。「"item"」の部分では、「"item"」と書かれている場合がありますが、"と"は同じ意味なので、どちらの書き方でも構いません。

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

よく使うifタグの紹介

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

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

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

ここで注意してほしいのは、「==」の部分の左右を半角1マスずつ空けることです。半角1マス開けないとエラーが起こり、画面が真っ白になることもあります。

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

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

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

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

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

ここで注意なのが、「"item"」と書いた後に「'」の記号を忘れないこと。そして、「==」の左右を半角1マスずつ開けることです。

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

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

他にも色々あるので、まとめて紹介していきます。

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

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

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

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

<b:if cond='data:mobile'>

上のコードでは、「スマホの時はAを表示させて、パソコンの時はBを表示させる」という意味になっています。

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

bloggerでは、アイキャッチ画像(サムネイル画像)があるかないかの条件分岐もできます。この条件分岐のコードは2種類あって、どちらを使っても構いません。

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

これによって、「もしアイキャッチ画像があれば、そのアイキャッチ画像を表示させて、もしなければ、自分で用意した他の画像を表示させる」ことができます。このコードは人気記事の一覧とかで使えたりします。

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

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

このコード自体はあまり使い道がないので、忘れても構いません。ボクも使ったことないですし。

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

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

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

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

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

この「elseif」タグは、2015年6月25日に作られた、比較的新しいタグです。結構使えるやつなので、覚えておいて損はないです。

 

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

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

このように記述することで、「もし記事ページでない時」という意味に変わります。ただ、「==」の部分が「!=」に変わっただけですね。

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ!