bloggerのタグの使い方

bloggerの<b:if>タグの使い方

bloggerに書いているブログがあるのですが、

  • レイアウトがちぐはぐになる
  • Adsenseの位置がblogger標準の場合、気に入らない
  • 「スマホだったら→これこれ」

ということをやりたくなることがあります。その場合、スクラッチ(テンプレート変更)でやったほうが早いです。その時に重要になるのが、<b:if>タグです。

<b:if>タグでできること

下記のことはできるようです。全ては確認していません。

  • スマホ判定
  • 記事ページだけ
  • TOPページだけ
  • 特定の静的URLの場合だけ
  • ハンドルネーム判定
  • 記事のコメント数に応じて

それぞれの書き方は

 ><!-- スマホ判定 -->
<b:if cond="data:blog.isMobile"></b:if>

<!-- 記事ページだけ -->
<b:if cond='data:blog.pageType == "item"'></b:if>

<!-- TOPページだけ -->
<b:if cond='data:blog.url == data:blog.homepageUrl'></b:if>

<!-- 特定の静的URLの場合だけ -->
<b:if cond='data:blog.url == "http://blog.senatus.jp/2014/09/shimano-accu3d-u-22l.html"'></b:if>

<!-- ハンドルネーム判定 -->
<b:if cond='data:displayname != "kitatamittaka"'></b:if>

<!-- 記事のコメント数に応じて(下記は1より多い場合) -->
<b:if cond='data:post.numComments > 1'></b:if>

else条件の書き方

else条件を書く場合は、下記のようにします。

<b:if >
  <!-- 条件にマッチする場合 -->
<b:else/>
  <!-- 条件にマッチしない場合 -->
</b:if>

変更方法

例として、記事ページだけにAdsenseを表示するとします。(この方法はあまりスマートでない気がしますが)
表示場所は記事フッターの直前とします。
※テンプレートによって、異なるケースは多々あると思いますので、バックアップを忘れずに。

1.「テンプレート」の「HTMLの編集」

テンプレートHTMLの編集
テンプレートHTMLの編集

2. 該当箇所のHTMLにタグを挿入

 <!-- 何がしか -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Adseneのコード -->
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

<!-- 以下略 -->

以上で、記事ページだけにAdsenseが表示され、TOPページの場合は表示されないと重います。

知っておくと良いPC・スマホ(モバイル)の違い

不足が大いにあると思いますが、基本PCとスマホ(モバイル)では表示内容が違います。デフォルトでいくつかのウィジェットはスマホ(モバイル)では表示されません。スマホで表示したい場合は、テンプレートのモバイルで、モバイルテンプレートを編集から「カスタマイズ」を選択する必要があります。(ただし、当然レイアウトが崩れるなどのリスクはあります)
カスタムにすると、「HTMLの編集」でモバイルの変更ができるようになるので、ウィジェットの設定を変更すると、モバイル時も表示させることができます。例えばブログアーカイブをモバイルで表示させるには、

<!-- 変更前 -->
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

<!-- 変更後 -->
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

とすればよいです。「mobile=’yes’」が変更箇所です。

参考

下記のページを参考にしました。より多くの情報がのっています。