極！TypePad: RSSファイルのリンク部分に画像を入れたい

「RSSファイルのリンクが"このサイトと連携する(XML)"って表記だけじゃわかり難くなくなくな〜い？」という目立ちたがり屋のあなた、そんなあなたにはこちらの絵画がお勧めです！

この方法を行うと、このページの右下の"RSS このサイトと連携"のようになります。

上級者テンプレートのsidebarというテンプレート内に、RSSファイルへのリンクを生成する以下のような部分があると思います。

<div class="link-note">
<a href="<$MTBlogURL$>index.rdf"><$MTTrans phrase="Syndicate this site (XML)"$></a>
</div>

まず、この部分を以下のように変更します。
<div class="link-note">
<a id="rssimage" href="<$MTBlogURL$>index.rdf">このサイトと連携</a>
</div>

ここで、このサイトと連携の部分を<$MTTrans phrase="Syndicate this site (XML)"$>のままにしておいてもかまいません。その場合は、"このサイトと連携する(XML)"と表示されます。（単純にスタイルシートのIDを付けた状態ですね。）

次にStylesheetファイルに以下のようなコードを追加します。

#rssimage {
display: block;
background: url(http://hayase.typepad.jp/typepad/rss.gif) no-repeat 0% 50%;
padding-left: 45px;
height: 20px;
}

もちろん画像のURLはあらかじめファイル・マネージャ等でアップしておいて指定します。
padding-left: 45px;　は文字列の左側に画像を挿入するので重ならないように画像の幅以上に指定しています。
height: 20px;　は画像の高さ以上を指定しています。

以上のような方法となりますが、もうちょっとクールな見せ方もできると思います(^_^;)

極！TypePad