bloggerの新しい独自タグが発表されたので紹介する

   

blogger 新表現Photo by Thos Ballantyne

つい先日(2015年5月22日)にbloggerの公式ブログから、bloggerの新しい独自タグのルールを作ったと発表がありました。

元ネタの方は、「Adding new expressions to Blogger templates」と言う公式ブログの記事。今回は、この記事を辞書を片手に気合いで訳して、「これ使えるんじゃね?」と言う新しい記述法をまとめました。

皆さんのブログのカスタマイズの一助になれば、と思います。

スポンサーリンク

今回の新しい記述法で変わったこと

今回の記述法で主に変わったことは、ifタグの記述がかなり楽に書けるようになった、と言うことです。

ifタグとは、「記事ページの時はこんな感じのデザインにして、カテゴリーページの時はこんな感じのデザインにしてね」と言う風に、ある条件によってデザイン等を変更できるタグのことです。

今までは複雑なブログデザインにしようとすればするほど、それに比例してifタグの記述も複雑になっていたのですが、今回の新ルールのおかげで、かなりスッキリとしたコードの記述ができるようになったのです。

なお、ifタグについて理解が不十分だと言う人は、「bloggerのカスタマイズに必須な条件分岐タグifのまとめ」の記事を読むと、より一層理解が深まると思うので、参考までに。

bloggerタグの新ルールの例

では、早速新ルールの説明に入ります。今回は、主に4つの新ルールが誕生しました。

and:複数の条件を一括りにするタグ

今までのルールでは、「もし、現在のページが記事ページでかつ、コメントを許可している場合にAを表示」と言う様に、2つの条件を同時に満たす場合を表す時には、以下の様に記述をする必要がありました。

<b:if cond='data:blog.PageType == "item"'>
<b:if cond=’data:post.allowComments'>
    A
</b:if></b:if>

このように2回連続でifの記述を書かないといけなかったし、実際のコードではifのコードが頻繁に出現するので、かなり複雑なコードになりがちでした。

しかし、今回の新ルールで搭載された「and」を使えば、より簡単な記述が可能です。

<b:if cond='data:blog.PageType == "item" and data:post.allowComments'>
   A
</b:if>

andを使うことで、1つのif文で複数の記述ができるようになったのです。

or:どちらか一方の条件を満たす場合

これは上記で説明した「and」を「or」に変える事で、どちらか一方の条件を満たす場合についての記述が可能です。

<b:if cond='data:blog.PageType == "item" or data:post.allowComments'>
   A
</b:if>

上の例だと、「もし現在のページが記事ページである、又は、コメントが許可されている場合のどちらかの時にAを表示する」と言う意味になります。

つまり、どちらか一方の条件を満たしていれば、Aを表示できると言う感じです。

以前の記述法だと、「記事ページの時はAを表示、カテゴリーページの時もAを表示」と言う風に、いちいち全ての条件について書く必要がありましたが、「or」の登場によって、記述を繰り返す負担がグッと減らせます。

in:orとほぼ似た意味のルール

orと似た意味のコードが、「in」。例えば、以下の様に使うことができます。

<b:if cond=’data:blog.pageType in [“item”, “archive”]’>
   A
</b:if>

上の記述だと、「もし現在のページが記事ページ(item)である、又は、カテゴリーやアーカイブページ(archive)である場合のどちらかの時に、Aを表示」と言う意味になります。

orとかなり意味が似ていますが、orとinの使い分けは以下の様なものだと思われます。

  • or・・記述方法が異なる2つの条件を書く場合
  • in・・記述方法が似ている2つの条件を書く場合

先ほど紹介したorとinの記述例を比べると、その違いが分かると思います。

?:classの名称を変更できるタグ

bloggerを使っていてカスタマイズをガンガンしたい人ならば、「カテゴリーページと記事ページのメインコンテンツ部分のcssを分けたいなー」と思った事があると思います。

例えば本ブログの様に、「記事一覧をカード型にしたい!」と言う時には、TOPページと記事ページのcssの記述の使い分けが必要不可欠ですよね。

TOPと記事ページのcssを分ける

そんな時に使えるのが、「?」と言うタグです。具体的には、以下の様に使うことができます。

<div expr:class=' data:blog.PageType == "item" ? "content" : "itiran" '>

上の例だと、「もし現在のページが記事ページの場合は、上の記述を<div class="content">に変換して、もし記事ページでない場合は、<div class="itiran">に変更する」と言う意味になります。

上の例を数学の公式っぽく書くと、

<div expr:class='条件を記述 ? 条件が正の時のタグ : 条件が不の時のタグ '>

と言う感じに書き表せますね。

スポンサーリンク

この記事をシェアする

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

スポンサーリンク