【Tips】 トップページにのみガジェットを表示する方法

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

• 2009/11/22|
• 0 コメント
• 
  
• 
  

LIVE DEMO

Blogger ヘルプ フォーラムで「トップページにだけ(ガジェットを)表示したい。」(2009/11/01)という質問を見かけたので、その方法をまとめてみました。Bloggerでトップページにのみガジェットを表示したい場合は、次の [方法1] または [方法2] を利用します。

• [方法1] <b:widget>タグ内のコンテンツを条件式を含むコードで囲む
• [方法2] <b:section>タグを条件式を含むコードで囲む

[方法1] <b:widget>タグ内のコンテンツを条件式を含むコードで囲む

例)

<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] を利用します。

[方法2] <b:section>タグを条件式を含むコードで囲む

<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．最後に [レイアウト] → [ページ要素] をクリックし、ガジェットを追加・移動してページ要素を [保存] する。

最後に

トップページ以外のページに、例えばメインページ、投稿ページ、ラベルページ、アーカイブページ、指定したURIページにのみガジェットを表示したい場合は、赤色の部分のコードを「Bloggerで指定したページにのみコンテンツを表示するコード」に書き換えてください。