bloggerのタグの使い方

2014.10.13
未分類

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

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

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

1. <b:if>タグでできること
2. else条件の書き方
3. 変更方法
4. 知っておくと良いPC・スマホ（モバイル）の違い
5. 参考

<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の編集」

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’」が変更箇所です。