Bloggerで特定のページでウィジェットを表示させない方法

ブログを運営していくうえで、特定ページのみウィジェットを表示させたい場合や、特定ページのみ表示させたくない場合があると思います。

しかしながら、Bloggerにおいて、レイアウトから行うガジェットの追加で追加する個別ウィジェットの設定には、そのような設定がありませんし、想定されていないと思います。

今回は、Bloggerで特定のページでウィジェットを表示させない方法について説明していきたいと思います。

ページの種類について

Bloggerテンプレートにおいて、ページの種類は下記のように分類できると思います。

トップページ
個別ページ
アーカイブページ
記事ページ
ラベルページ
エラーページ
個別記事ページ

トップページ

トップページの条件は下記のようにして行います。

現在のページがトップページの場合

<b:if cond='data:blog.url == data:blog.homepageUrl'>

現在のページがトップページでない場合

<b:if cond='data:blog.url != data:blog.homepageUrl'>

個別ページ

個別ページの条件は下記のようにして行います。

現在のページが個別ページの場合

<b:if cond='data:blog.pageType == "static_page"'>

現在のページが個別ページでない場合

<b:if cond='data:blog.pageType != "static_page"'>

アーカイブページ

アーカイブページの条件は下記のようにして行います。

現在のページがアーカイブページの場合

<b:if cond='data:blog.pageType == "archive"'>

現在のページがアーカイブページでない場合

<b:if cond='data:blog.pageType != "archive"'>

記事ページ

記事ページの条件は下記のようにして行います。

現在のページが記事ページの場合

<b:if cond='data:blog.pageType == "item"'>

現在のページが記事ページでない場合

<b:if cond='data:blog.pageType != "item"'>

ラベルページ

ラベルページの条件は下記のようにして行います。

現在のページがラベルページの場合

<b:if cond='data:blog.pageType == "index"'>

現在のページがラベルページでない場合

<b:if cond='data:blog.pageType != "index"'>

エラーページ

エラーページの条件は下記のようにして行います。

現在のページがエラーページの場合

<b:if cond='data:blog.pageType == "item"'>

現在のページがエラーページでない場合

<b:if cond='data:blog.pageType != "item"'>

個別記事ページ

個別記事ページの条件は下記のようにして行います。

現在のページが個別記事ページの場合

<b:if cond='data:blog.url == "（個別記事のURL）"'>

現在のページが個別記事ページでない場合

<b:if cond='data:blog.pageType != "（個別記事のURL）"'>

どのように行うか

上記の条件の場合、どうするかという条件文により行います。なお、上記条件を変える以外は同じなので、下記例にて説明します

（例）トップページでない場合、ウィジェットを表示しない
太線部分を追加して行います。コードの意味としては、トップページの場合ウィジェットを表示させ、そうでない場合は、背景を透明にして、高さ、幅、枠線を無くするというものです。

<b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>...</b:widget-settings>
    <b:includable id='main'>
      <b:if cond='data:blog.url == data:blog.homepageUrl;'>
        <!-- only display title if it's non-empty -->
        <b:if cond='data:title != ""'>
          <h2 class='title'><data:title/></h2>
        </b:if>
        <div class='widget-content'>
          <data:content/>
        </div>
        <b:include name='quickedit'/>
      <b:else/>
        <style>
        div#HTML1.widget.HTML{
          opacity: 0; //透明にする
          padding: 0; //パディングを0にする
          margin: 0 0 -20px 0; //マージンを0にしたうえで、下マージンを詰める
          border: 0; //枠線なし
          max-height: 0; //高さ0
        }
        </style>
      </b:if>
    </b:includable>
</b:widget>

なお、マージンの-20pxの値については、それぞれ違いがあると思うので調整していただけたらと思います。

以上、参考にしていただけたら幸いです。

メニュー

2017年4月25日火曜日