ホーム / Bloggerガジェットを特定ページにだけ表示させる方法と便利なコード自動生成ツールの紹介 /

Bloggerガジェットを特定ページにだけ表示させる方法と便利なコード自動生成ツールの紹介

Bloggerでサイトを運営していると、「あるガジェットを特定のページだけに表示したい」というシチュエーションがありますよね。
例えば、ダウンロードリンクや特定の説明を含むガジェットを一部の固定ページだけに見せたいときです。

そこで便利なのが、<b:if> タグを使った条件分岐です。
この記事では、その使い方と、複数ページに一括で対応できる「コード自動生成ジェネレーター」の使い方をご紹介します。

■ <b:if> を使ってガジェットを特定ページに表示する方法

Bloggerでは、テンプレート編集やHTMLガジェット内に以下のようなコードを入れることで、表示条件を設定できます：

<b:if cond='
  data:blog.url == "https://www.example.com/p/page1.html" or
  data:blog.url == "https://www.example.com/p/page2.html"
'>
  <!-- ガジェットの内容ここに -->
</b:if>

このコードでは、data:blog.url が指定したURLと一致する場合だけ、ガジェットの内容が表示されます。

■ 複数のURLをまとめて書くのは大変？ → ジェネレーターで一発解決！

特定ページが1つや2つなら手書きでもOKですが、10個、20個となるとミスも増えてきます。
そんなときに便利なのが、URLをまとめて貼り付けるだけで <b:if> 条件を自動生成してくれるツールです！

■ 自動生成ツールの使い方

  1. 以下のフォームに、表示させたいページのURLを1行ずつ貼り付けます。
  2. 「&quot; にエスケープする（テンプレート編集用）」にチェックを入れるかどうか選びます。
    • テンプレート編集画面に貼る場合はチェック推奨
    • HTML/JavaScriptガジェットの場合はチェック不要
  3. 「コードを生成」ボタンを押すと、整形された <b:if> 条件コードが下に表示されます。
  4. コードをコピーして、Bloggerのテンプレートやガジェットに貼り付けましょう。

■ 使い方例

表示したいページが以下の3つあるとします：

https://www.example.com/p/page1.html
https://www.example.com/p/page2.html
https://www.example.com/p/page3.html

この3つをジェネレーターに入力すると、次のようなコードが出力されます：

<b:if cond='
  data:blog.url == "https://www.example.com/p/page1.html" or
  data:blog.url == "https://www.example.com/p/page2.html" or
  data:blog.url == "https://www.example.com/p/page3.html"
'>
  <!-- ガジェットの内容ここに -->
</b:if>

これを貼れば、指定した3ページのみにガジェットが表示されるようになります！

■ ジェネレーターのリンク

👉 Bloggerページ指定用 <b:if> 条件コードジェネレーターはこちら

このリンク先で、すぐにURLを貼り付けてコードを生成できます。
（※必要に応じて自分のブログ内でカスタマイズ・設置してお使いください）

■ おわりに

この方法を使えば、読者の体験を邪魔せず、必要な情報だけを適切な場所に表示できます。
条件分岐を上手に使って、スマートなBlogger運営を目指しましょう！

不明点があれば、お気軽にコメントで聞いてくださいね！

QooQ