Bloggerでガジェットをトップ・ページにだけ表示する記述

Blogger の Gadget は…

全てのセクションに追加できて…

デザインの自由度も高く…

とても…お便利です…

追加したガジェットは…

default では「all」…

つまり…全てのページで表示されます…

でも…ゲストへのご挨拶やら…

お奨め記事へのリンクやらが…

毎ページ毎ページ出てきたら…

アクセス・アップへの必死さが伝わってきて…

…なので…そういったコンテンツを…

トップ・ページにだけ表示するための記述です…

下記リンクから「 Sepia Memories on YouTube のレイアウト構造」を…

見比べていただくと判りやすいと思いますが…

赤い点線で囲まれた各セクションのうち…

main-wrapper だけトップ・ページと投稿ページで…

表示項目が変わっているでしょ…

トップ・ページは記事非表示で Text1 を表示…

投稿ページではその逆…てな感じになります…

前置が長くなりました…いきますッ

1. 「デザイン」から main-wrapper に
   「テキスト・ガジェット」を任意のタイトルで追加…
2. 追加されたら「HTMLの編集」「ウィジェットのテンプレートを展開」
3. 「Ctrl + F」で Text1 を検索
4. 下記 Text1 の記述通りに赤文字の２列を追加
5. 「テンプレートを保存」して完了

Text1 の記述　(クリックで HTML が開閉)

<!-- Text1の記述 -->
<b:widget id='Text1' locked='false' title='付与したタイトル' type='Text'>
<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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

…と…「if」の条件式で囲うって事です…

詳しく知りたい方は…

Blogger ヘルプ レイアウト用ウィジット タグ  


さらに 当サイトでは…

見出し (h2) に画像を使って…

投稿ページの見出し (h2) と文字色も変えているので…

CSS に以下も記述しています…

Text1 の CSS　(クリックで CSS が開閉)

/* Text
----------------------------------------------- */
.main .Text h2 { 
background:url(アップロードした画像 URL) no-repeat;
border:0;
margin:0 0 0 2px;
padding:0;
line-height:30px;
color:#FF0000;
text-align:center;
letter-spacing:1px;
font-size:14px;
font-weight:bold;
}
.main .widget-content {
margin:15px 0 0 10px;
color:#99AADD;
font-weight:bold;
}

 現在は CSS に画像 URL を書かないで HTML に書いています…

 Bloggerで見出しに文字を表記させずに文字入り画像を使う記述…HTML編


現在は「img」タグを使わない記述にしています…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


尚、テキスト・ガジェットは…

投稿としてはカウントされませんが…

通常の投稿のテキスト・エディタと同じような機能のガジェットです…

記事を書くには…

ログイン状態でガジェットの右下に表示される…

アイテム・コントロールか…

カスタマイズ状態で…

ガジェットに表示されている「編集」から書きます…

2010.02.12 追記

例によって…書き忘れです…
当サイトのタブに見えないタブは…
「指定ページ」にだけ表示する記述にしています…
上記ヘルプやこの記事を読んでも…
その記述は解りづらいと思ったので…
書いておきます…

<b:if cond='data:blog.url == &quot;ページURL&quot;'>

…の、ように書くと個別のページにのみ…
ガジェットを表示させる事ができます…

Tips Header Sidebar Main Footer Current-Label : Universal