ホーム / Bloggerで特定ページだけにガジェットを表示／非表示にする方法 /

Bloggerで特定ページだけにガジェットを表示／非表示にする方法

Bloggerでは、ブログパーツ（ガジェット）を特定のページだけに表示したり、特定のページ以外で非表示にすることができます。

この記事では、HTMLのテンプレート編集を使って、「このページだけ表示」「このページでは非表示」という条件付き表示の方法を解説します。

こんなことができます
  • トップページにだけバナーを表示する
  • 固定ページではサイドバーのガジェットを非表示にする
  • 特定の記事だけにスクリプトや広告を表示する

手順1：テンプレート編集画面を開く

  1. Bloggerの管理画面にログイン
  2. 左側のメニューから「テーマ」をクリック
  3. 右上の「▼」→「HTML を編集」を選ぶ
  4. 編集画面で特定ページで表示（非表示に）したいガジェットを探す

手順2：条件付きで表示させたいガジェットを囲む

特定ページ【だけ】に表示する場合

<b:if cond='data:blog.url == "https://○○.blogspot.com/p/sample-page.html"'> <div class="your-gadget"> <!-- ここにガジェットの内容 --> <p>このガジェットは指定ページだけに表示されます。</p> </div> </b:if>

特定ページ【以外】で表示する場合

<b:if cond='data:blog.url != "https://○○.blogspot.com/p/sample-page.html"'> <div class="your-gadget"> <!-- このガジェットはそのページ以外で表示されます --> <p>これは他のページだけで見えるガジェットです。</p> </div> </b:if>

例：固定ページ「sample-page」のときだけ表示

<b:if cond='data:blog.url == "https://○○.blogspot.com/p/sample-page.html"'> <div class="banner-box"> <p>このバナーは sample-page 固定ページだけに表示されます。</p> </div> </b:if>

補足：他にも使える条件一覧

条件式表示されるページ
data:blog.pageType == "index"トップページだけ
data:blog.pageType == "item"個別記事ページだけ
data:blog.pageType == "static_page"固定ページ（/p/～）だけ
data:blog.pageType == "archive"アーカイブページだけ


まとめ

  • Bloggerでは <b:if> タグを使うことで、ページごとにガジェットの表示を切り替えられます
  • == を使うと「このページだけ表示」、!= を使うと「このページ以外で表示」になります
  • テンプレートのHTML編集は少し怖いかもしれませんが、使いこなせるととても便利です！


QooQ