ホーム / ガジェットを b:if cond タグで囲う方法【Bloggerカスタマイズ】 /

ガジェットを b:if cond タグで囲う方法【Bloggerカスタマイズ】

Bloggerで「あるガジェットを特定のページだけに表示したい」と思ったことはありませんか？

  • トップページだけにバナーを表示したい
  • 特定の固定ページだけにウィジェットを出したい
  • サイドバーのガジェットを特定記事で非表示にしたい

…今回はガジェットを b:if cond タグで囲う方法をご紹介します！

✅ ガジェットを <b:if> で囲むのはNG？

以下のように書くと、テンプレート編集画面では通っても「レイアウト画面でエラー」になることがあります：

<b:if cond='data:blog.url == "https://example.com/page.html"'>
  <b:widget id='HTML9' ... />
</b:if>

🔺この書き方だとBloggerがウィジェットを正しく認識できず、
「The widget is not within a section」などのエラーになる可能性があります。

🎯 正しい方法：<b:includable> の中で条件分岐する

以下のように、ウィジェット本体は常に表示させておき、その中身だけを条件で表示・非表示にするのが安全で確実です。

💡 コード例：特定ページでのみガジェットを表示

<b:widget id='HTML9' locked='false' title='' type='HTML'>
  <b:widget-settings>
    <b:widget-setting name='content'>
      <![CDATA[
        <div class="banner">
          <a href="/p/sample-page.html">
            <img src="https://example.com/banner.jpg" alt="バナー" />
          </a>
        </div>
      ]]>
    </b:widget-setting>
  </b:widget-settings>

  <b:includable id='main'>
    <!-- ✅ ここで条件分岐 -->
    <b:if cond='data:blog.url == "https://example.com/p/sample-page.html"'>
      <div class='widget-content'>
        <data:content/>
      </div>
    </b:if>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

✅ 条件の書き方いろいろ

表示したい場所 条件式の例
トップページのみ data:blog.url == data:blog.homepageUrl
特定のURLで表示 data:blog.url == "https://example.com/p/sample-page.html"
複数のページで表示 data:blog.url == "URL1" or data:blog.url == "URL2"

💬 補足

  • ガジェットの表示・非表示を切り替えるだけなので、レイアウト編集画面でも安心して使えます。
  • 複数条件にも対応可能です（or を使う）。
  • 固定ページ、投稿ページ、トップページなど、どこでもOK！

✍ まとめ

方法 特徴
<b:if> で <b:widget> を囲む ❌ エラーになりやすい・非推奨
<b:includable> 内で <b:if> を使う ✅ 安定して動作する・Blogger推奨構造

Bloggerを使っていて「このウィジェット、あのページだけに出したい…」という場面、ぜひこの方法を活用してみてください！

QooQ