Blogger でプレビュー時に特定の要素を非表示にする

namimori です。

本記事ではBlogger において、「プレビューであるかどうか」を条件に要素の表示を分岐させる方法を紹介します。アドセンスなどの広告類をプレビュー時に読み込まないようにしたい場合に効果的です。

プレビューによる分岐の条件文

テーマのHTML編集画面にて、次の条件文を用います。

プレビュー時にのみ表示したい場合は

cond='data:view.isPreview'

プレビュー時に非表示にしたい場合は

cond='!data:view.isPreview'

を用います。「!」は否定を意味します。この他にも複数の表記方法がありますが、上記の表記が簡潔で良いと思われます。

実例

namimori はプレビューモードで非表示にしたい場合に使っているので、以下ではプレビュー時に非表示（普通にブログにアクセスした場合は表示）にする方法を紹介します。

ガジェット（ウィジェット）

サイドバーやフッターのガジェットを非表示にする場合、HTML編集画面にて

<b:widget cond='!data:view.isPreview' id='HTML1' locked='false' title=''
  type='HTML'>

  ガジェットの内容
  
  </b:widget> 

のように非表示にしたいガジェットの<b:widget>タグ内にcond文を追加します。

JavaScript

Javaスクリプトを読み込まないようにする場合、HTML編集画面にて

<b:if cond='!data:view.isPreview'>
  <script>
  
    JavaScriptの内容

  </script>
</b:if>

のようにプレビュー時に使わない（読み込まないようにしたい）Javaスクリプトを<b:if>～</b:if>タグで囲みます。namimori はアドセンス関連のスクリプトを上記タグで囲んでいます。

おわりに｜プレビュー時にアドセンスを非表示

今回のプレビューでの表示・非表示対応のきっかけはアドセンスの表示の制御をしたいと思ったからです。

namimori の環境だけかもしれませんが、Blogger で記事編集の際にプレビュー表示をしているとアドセンスが読み込まれ表示されてしまうことがあります。（基本的にはアドセンス部分に白抜きの空白が表示されるのですが、何度かプレビューを読み込みなおしたりすると表示されてしまいます。）

自己クリックはもちろんしないよう気をつけていますが、自己インプレッションもなるべく避けた方がよさそうなのでプレビュー時にアドセンス関連のガジェットやスクリプトを全て無効にしました。

今回は以下のサイトの情報を参考にカスタマイズしています。

• data:view.isPreview (Global) - Blogger Data Documentation - Blogger Code PE
• Bloggerテンプレートの文法 | Bloggerテンプレート自作カスタム