Blogger:特定のガジェットをトップページにのみ表示する方法

イントロダクション

Google のブログサービス「Blogger」にて、特定のガジェットをブログの全ページではなく、特定のページでのみ表示したいことってありますよね。

今回は、特定のガジェットをトップページでのみ表示する方法について記載します。

Blogger:特定のガジェットをトップページにのみ表示する方法

考え方

特定のガジェットをトップページでのみ表示するには、Blogger のテンプレートの HTML を編集して、以下のタグを追加する必要があります。

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

～この部分が、トップページでのみ表示されます。～

</b:if>

この <b:if> というタグは、Blogger のテンプレートの HTML でのみ使用することが出来る、表示条件を記載するときに使用するタグです。

b:if タグの cond 属性に、そのタグの内側に記載された部分を表示する条件を記載します。


詳しくは、以下のページをご覧ください。

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト
http://upa-pc.blogspot.com/2014/06/blogger-html-edit-ref.html
Dr.ウーパのコンピュータ備忘録

なお、Blogger のテンプレートの HTML の編集には危険性が伴います。
必ず、以下のページをご確認ください。

Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること
http://upa-pc.blogspot.com/2015/03/blogger-template-edit-attention.html
Dr.ウーパのコンピュータ備忘録

例：HTML12 という id 属性を持つ、HTML/JavaScript ガジェットをトップページのみに表示する場合

元々の Blogger のテンプレートの HTML に対して、赤字・太字の部分のコードを追加します。

<b:widget id='HTML12' locked='false' title='' type='HTML'>
 <b:includable id='main'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>

    ～元々のHTMLコード：省略～

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


これで、HTML12 という id 属性を持つ、HTML/JavaScript ガジェットはトップページのみに表示されるようになりました。

注意点

なお、b:if タグを、b:includable タグの外側や、b:widgetタグの外側に書こうとすると、エラーとなるため記載することが出来ないので注意が必要です。


b:if タグを、b:includable タグの外側に書いた場合のエラー
テンプレート プレビューを読み込めませんでした: The widget with id "HTML12" cannot contain element: "b:if". A widget can only contain b:includable elements.

b:if タグを、b:b:widget タグの外側に書いた場合のエラー
テンプレート プレビューを読み込めませんでした: The widget with id HTML12 is not within a section (actual parent element is: b:if.) Every widget should be in a section.

まとめ

このように、Blogger では、テンプレートの HTML を編集することで、任意のページにのみガジェットを表示できるようになります。

他にも、投稿ページのみにガジェットを表示することや、その逆の場合のみガジェットを表示するといったことが可能です。


そのような b:if の条件式については、次のページが参考になります。

GoogleブログBlogger： 特定ページのみにhtmlソースコードを記述する方法 @ コンピュータ系サラリーマンブログ: GoogleブログBlogger： 特定ページのみにhtmlソースコードを記述する方法
http://salaryman-life.blogspot.jp/2010/05/googleblogger-html.html

このブログ内の、他の”Blogger”についての情報を見る