【Blogger】特定ページにだけ表示させる・させない方法+応用編

※2016/12/29記事を修正しました。

特定のページにだけ○○を表示したい!!
特定のページにだけ○○を表示させたくない!!

そういった悩みは以下のソースを使えば解決!

■1・トップページにのみ表示させたい場合

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

/* ここにトップページにのみ表示させたいものを明記 */

</b:if>

■2・個別記事にのみ表示させたい場合

<b:if cond='data:blog.pageType == &quot;item&quot;'>

/* ここに個別ページにのみ表示させたいものを明記 */

</b:if>


■3・ページにのみ表示させたい場合

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

/* ここに個別ページにのみ表示させたいものを明記 */

</b:if>


■4・特定のURLにのみ表示させたい場合

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

/* ここに特定のURにのみ表示させたいものを明記 */

</b:if>


■5・ラベルページにのみ表示させたい場合

<b:if cond='data:blog.pageName != ""'>
  <b:if cond='data:blog.pageType != "archive"'> /* アーカイブページに表示させないタグ */
    <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>

/* ここにラベルページにのみ表示させたいものを明記 */

</b:if>
</b:if>
</b:if>
</b:if>


1つ目の「=」を「!」に置き換えると逆に作用します。

■1の場合

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

/* ここにトップページにのみ表示させたいものを明記 */

</b:if>
↓1つ目の「=」を「!」に置き換えると・・・↓
<b:if cond='data:blog.url != data:blog.homepageUrl'>

/* トップページにのみ表示されなくなる */

</b:if>


■2の場合

<b:if cond='data:blog.pageType == &quot;item&quot;'>

/* ここに個別記事にのみ表示させたいものを明記 */

</b:if>
↓1つ目の「=」を「!」に置き換えると・・・↓
<b:if cond='data:blog.pageType != &quot;item&quot;'>

/* 個別記事にのみ表示されなくなる */

</b:if>

■例(以下のガジェット「id='HTML4'」をトップページにのみ表示させたい場合)

ガジェットに適用させたい場合は
<b:includable id=''>~</b:includable>
の中に挿入しましょう。

 <b:widget id='HTML4' locked='false' title='Recent' type='HTML'>
       <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 != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

</b:if>

</b:includable>
      </b:widget>

■応用編

逆の動作を指示するタグ
<b:else/>
を使ってみましょう。
上記の「トップページにのみ表示させる」コードの間にいれると以下のようになります。

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

/* トップページにのみ表示される範囲 */

<b:else/>/* 以下逆の動作 */

/* トップページに表示させれない範囲 */

</b:if>


Related Posts

Previous
Next Post »