Blogger ヘルプ フォーラムで「
トップページにだけ(ガジェットを)表示したい。」(2009/11/01)という質問を見かけたので、その方法をまとめてみました。
Bloggerでトップページにのみガジェットを表示したい場合は、次の [方法1] または [方法2] を利用します。
例)
<b:widget id='～' locked='～' title='～' type='～'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>･･･上の2つのラインの直後に追加
<!-- 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:if>･･･下の 2 つのラインの直前に追加
</b:includable>
</b:widget>導入手順
1．
Blogger にログイン後、[デザイン] → [HTMLの編集] → [ウィジェットのテンプレートを展開] をクリック。
2．[テンプレートを編集] 画面で、トップページにのみ表示したいガジェットを見つける。
ガジェットに付けたタイトルで検索すれば早く見つけられると思います。
title='ガジェットに付けたタイトル'
3．見つけたら、条件式を含むコードを追加して [テンプレートを保存] する。
緑色のコードを基準に赤色のコードを追加してください。
例) [HTML/JavaScript] ガジェットの場合
<b:widget id='HTML1' locked='false' title='ガジェットに付けたタイトル' 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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>※ [方法1] の問題点 : [方法1] ではトップページ以外のページではガジェットの上下に余白ができます。それを回避するために [方法2] を利用します。
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='*****' id='*****' .....>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
</b:if>導入手順
1．
Blogger にログイン後、 [デザイン] → [HTMLの編集] をクリック。
[ウィジェットのテンプレートを展開] まではしなくてよいです。
2．[テンプレートを編集] 画面で、トップページにのみ表示したいガジェットを見つける。
ガジェットに付けたタイトルで検索すれば早く見つけられると思います。
title='ガジェットに付けたタイトル'
3．見つけたら、そのガジェットの下にある</b:section>の直後に<b:section class='*****' id='*****2'/>を追加する。
例えば、サイドバーの場合は、<b:section class='sidebar' id='sidebar' preferred='yes'>.....</b:section> の直後に <b:section class='sidebar'id='sidebar2' preferred='yes'/> などにして追加します。ポイントはid名を*****2にすることです。
例)
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
※ <b:section class='*****' id='*****2' ...../>は [ガジェットを追加] リンクです。
4．次に<b:section>タグを条件式を含むコードで囲み、[テンプレートを保存] する。
例) 下にある [ガジェットを追加] リンク(<b:section>タグ)をトップページにのみ表示したい場合
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</b:if>例) 上にある [ガジェットを追加] リンク(<b:section>タグ)をトップページにのみ表示したい場合
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
<b:widget id='～' locked='～' title='～' type='～'/>
</b:section>
</b:if>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>5．最後に [レイアウト] → [ページ要素] をクリックし、ガジェットを追加・移動してページ要素を [保存] する。
最後に
![サイドバーにsectionタグ([ガジェットを追加] リンク)を追加した画像](http://1.bp.blogspot.com/_TNNQpsSXiP8/SwjPGK7e3_I/AAAAAAAAC3A/gHrQF2HGIOc/s1600/section.png)
![[ページ要素]でガジェットを追加・移動した画像](http://2.bp.blogspot.com/_TNNQpsSXiP8/SwjPArxFTZI/AAAAAAAAC24/9kdW6uzKsSs/s1600/add-a-page-element.png)
