Bloggerのガジェットを特定ページで表示・非表示に設定する方法

カスタマイズ
スポンサーリンク

サイドバーのガジェットについて、こんな事を思う時ありませんか?

  • トップページには表示したくない!
  • 記事ページだけに表示させたい!

HTMLのコードを編集することによって、ページ単位でガジェットの表示・非表示を切り替えることができます。

そこで今回は、Bloggerのガジェットを特定ページで表示・非表示にする方法をご紹介します。

※テンプレートを直接編集していくので、変更前データのバックアップをお忘れなく!
Bloggerテーマバックアップの効果的なファイル名のつけ方は?

スポンサーリンク

Bloggerのガジェットを特定ページで表示する方法

今から説明する方法は全て<b:includable id=”>~</b:includable>の中に入力します。
どういうことかと言うと、こんな感じ!

<b:includable id=’main’>
 <b:if cond=’data:blog.pageType == ●●●’>
■■■
 </b:if>
</b:includable>

上のコードは、もし、ページタイプが●●●だったら、■■■の処理を実行する という意味です。

トップページのみ表示

<b:if cond=’data:blog.url == data:blog.homepageUrl‘>
ガジェットのコード
</b:if>

個別記事ページのみ表示

<b:if cond=’data:blog.pageType == &quot;item&quot;‘>
ガジェットのコード
</b:if>

指定ページのみ表示

<b:if cond=’data:blog.url == ”指定ページのURL” ‘>
ガジェットのコード
</b:if>
※ ” data:blog.pageType ” の部分が ” data:blog.url ” となります。

スポンサーリンク

Bloggerのガジェットを特定ページのみ表示しない方法

上のコードの ” == ” の部分が ” != ” に変わるだけで、反対の意味になります。

<b:includable id=’main’>
<b:if cond=’data:blog.pageType != ●●●’>
■■■
</b:if>
</b:includable>

上のコードは、もし、ページタイプが●●●ではなかったら、■■■の処理を実行する という意味です。

言い換えると、もし、ページタイプが●●●だったら、■■■の処理を実行しない ことになります。頭がパニックになりそうですね(汗)

トップページのみ非表示

<b:if cond=’data:blog.url != data:blog.homepageUrl‘>
ガジェットのコード
</b:if>

個別記事ページのみ非表示

<b:if cond=’data:blog.pageType != &quot;item&quot;‘>
ガジェットのコード
</b:if>

指定ページのみ非表示

<b:if cond=’data:blog.url != ”指定ページのURL” ‘>
ガジェットのコード
</b:if>

スポンサーリンク

具体例:新着記事を記事ページのみ表示する

前回、Bloggerでガジェットを追加して新着記事を表示する方法について書きました。
Bloggerのサイドバーに新着記事を表示する方法
このままだとトップページを含む全てのページで新着記事が表示されてしまいます。

トップページには投稿日時が新しい順番で記事が表示されているので、サイドバーに同じものを表示するのは全く意味がありませんよね?

そこで、新着記事を個別記事ページのみ表示するよう変更しました。

HTMLコードの追加

1. Blogger管理画面「テーマ」 → 「HTMLの編集」をクリック

2. ウィジェット(ガジェット)を選択
※ガジェットのタイトルで検索(Ctrl + F)した方が早いかも。
(私の場合は ” 新着記事 ” )

3. 下にスクロールして、” <b:includable id=’main’> ” の部分を探す
※行が非表示になっている場合は、三角マークをクリックして全て表示させる

4. 以下のコードを追加して、「テーマを保存」をクリック
” <b:includable id=’main’> ” の直後
⇒ <b:if cond=’data:blog.pageType == &quot;item&quot;’>

” </b:includable> ” の直前
⇒ </b:if>

おしまい!お疲れさまでした。

変更後の確認

「自己紹介」の下に、トップページでは「人気記事」、個別記事ページでは「新着記事」が表示されるようになりました。

スポンサーリンク

さいごに

いかがでしたでしょうか?
具体例として当ブログで実際にしている新着記事についてご紹介しました。

今回の例の他にも、例えばグーグルアドセンスのコードをガジェットに貼り付けている場合、それを「指定のページ」のみ表示する、といった事も可能です。
是非、参考にしていただければ嬉しいです。

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント

  1. 有用な情報ありがとうございます!
    個別記事のみへの最新記事一覧ウィジェットの表示、早速拙ブログでも導入してみたところ、予想以上にいい感じになりました。

    しかも今までウチで使っていた新着記事ウィジェットよりも、こちらで紹介されてるウィジェットの方がシンプルで使い勝手も良くて非常に満足しております(^^)

  2. 「トップページのみ表示」で挿入するタグが間違ってるようなのでご報告を。

    こちらで記載されている
    <b:if cond='data:blog.pageType == data:blog.homepageUrl'>
    だとトップにもどこにも表示されず…

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    が正しいタグのようです。

    参照先→
    http://salaryman-life.blogspot.jp/2010/05/googleblogger-html.html

    • kazu より:

      ふじやん。様

      ご指摘ありがとうございます。
      確かに「<b:if cond='data:blog.pageType~」ではどこにも表示されませんね(>_<)
      ただ今、教えていただいた正しいタグに修正しました☆