Photo by Thos Ballantyne
つい先日（2015年5月22日）にbloggerの公式ブログから、bloggerの新しい独自タグのルールを作ったと発表がありました。
元ネタの方は、「Adding new expressions to Blogger templates」と言う公式ブログの記事。
今回は、この記事を辞書を片手に気合いで訳して、「これ使えるんじゃね？」と言う新しい記述法をまとめました。
皆さんのブログのカスタマイズの一助になれば、と思います。
今回の新しい記述法で変わったこと
今回の記述法で主に変わったことは、ifタグの記述がかなり楽に書けるようになった、と言うことです。
ifタグとは、「記事ページの時はこんな感じのデザインにして、カテゴリーページの時はこんな感じのデザインにしてね」と言う風に、ある条件によってデザイン等を変更できるタグのことです。
今までは複雑なブログデザインにしようとすればするほど、それに比例してifタグの記述も複雑になっていたのですが、今回の新ルールのおかげで、かなりスッキリとしたコードの記述ができるようになったのです。
なお、ifタグについて理解が不十分だと言う人は、「bloggerのカスタマイズに必須な条件分岐タグifのまとめ」の記事を読むと、より一層理解が深まると思うので、参考までに。
bloggerタグの新ルールの例
では、早速新ルールの説明に入ります。
今回は、主に4つの新ルールが誕生しました。
and：複数の条件を一括りにするタグ
今までのルールでは、「もし、現在のページが記事ページでかつ、コメントを許可している場合にＡを表示」と言う様に、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を使うことで、１つのif文で複数の記述ができるようになったのです。
or：どちらか一方の条件を満たす場合
これは上記で説明した「and」を「or」に変える事で、どちらか一方の条件を満たす場合についての記述が可能です。
<b:if cond=’data:blog.PageType == “item” or data:post.allowComments’>
A
</b:if>
上の例だと、「もし現在のページが記事ページである、又は、コメントが許可されている場合のどちらかの時にＡを表示する」と言う意味になります。
つまり、どちらか一方の条件を満たしていれば、Ａを表示できると言う感じです。
以前の記述法だと、「記事ページの時はＡを表示、カテゴリーページの時もＡを表示」と言う風に、いちいち全ての条件について書く必要がありましたが、「or」の登場によって、記述を繰り返す負担がグッと減らせます。
in：orとほぼ似た意味のルール
orと似た意味のコードが、「in」。
例えば、以下の様に使うことができます。
<b:if cond=’data:blog.pageType in [“item”, “archive”]’>
A
</b:if>
上の記述だと、「もし現在のページが記事ページ（item）である、又は、カテゴリーやアーカイブページ（archive）である場合のどちらかの時に、Ａを表示」と言う意味になります。
orとかなり意味が似ていますが、orとinの使い分けは以下の様なものだと思われます。
- or・・記述方法が異なる2つの条件を書く場合
- in・・記述方法が似ている2つの条件を書く場合
先ほど紹介したorとinの記述例を比べると、その違いが分かると思います。
?：classの名称を変更できるタグ
bloggerを使っていてカスタマイズをガンガンしたい人ならば、「カテゴリーページと記事ページのメインコンテンツ部分のcssを分けたいなー」と思った事があると思います。
例えば本ブログの様に、「記事一覧をカード型にしたい！」と言う時には、ＴＯＰページと記事ページのcssの記述の使い分けが必要不可欠ですよね。
そんな時に使えるのが、「?」と言うタグです。
具体的には、以下の様に使うことができます。
<div expr:class=’ data:blog.PageType == “item” ? “content” : “itiran” ‘>
上の例だと、「もし現在のページが記事ページの場合は、上の記述を<div class=”content“>に変換して、もし記事ページでない場合は、<div class=”itiran“>に変更する」と言う意味になります。
上の例を数学の公式っぽく書くと、
<div expr:class=’条件を記述 ? 条件が正の時のタグ : 条件が不の時のタグ ‘>
と言う感じに書き表せますね。
