FeedBurnerのフィードカウントを簡単にデザイン変更
FeedBurnerのフィードカウントをブログなどでよく見かけます。しかし、FeedBurnerを知らないユーザにとっては何のカウントを表示しているか分かりません。もう少し分かりやすいように、RSSフィードのマークをデザインしたフィードカウントを簡単に作成する方法を紹介します。
用意するものは、オリジナルデザインのフィードカウントGIF (PNG)。CSSでイメージの背景画像（background-image:）として既存のフィードカウントへのイメージパスを指定することでカウント部分だけを浸透化GIFの透明部分で見えるようにします。
スタイルシートへの記述
<style type="text/css">
a.fd_orange {
overflow:hidden;
display:block;
width:92px;
background:#ffffff url(イメージパス) no-repeat 26px 1px;
}
</style>
url(イメージパス) は実際のフィードカウントへのイメージパスを記述します。
HTMLの記述
<a href="http://feeds.feedburner.jp/youmos" class="fd_orange">
<img src="./img/orange2.gif" />
</a>
Internet Explorer、Mozilla Firefox、Safari、Opera で問題なく表示されます。Safariで表示させることを前提にした場合、背景に指定するFeedBurner画像はアニメーションなしを選んでください。
CSSを使った方法ですが、簡単に実装できるので是非試してみてください。PHPなどプログラム作成ができる方はFeedBurnerアウェアネスAPI (AwAPI）を利用してオリジナルカウンタを作成することもできます。APIを利用した方法に関しては、後日紹介します。
- FeedBurner - RSSフィード配信http://www.feedburner.jp/
- FeedBurner - アウェアネスAPI (AwAPI）http://www.feedburner.jp/fb/a/developers/awapi
- 関連記事 リスト
FeedBurnerのフィードカウントを簡単にデザイン変更
FeedBurnerのフィードカウントをブログなどでよく見かけます。しかし、Fe...続きを読む
RSSをPing送信するサービス
Ping送信することで、新規ユーザーや更新情報をチェックしているユーザーに通知...続きを読む
ユーザーコメントを管理する専用サービス
Webページにユーザーからのコメントを表示・管理するのに便利なサービスが、In...続きを読む
便利なブックマークボタンを作成するサービス
ソーシャルブックマークは会社や外出先でブックマークしたお気に入りを、自宅など別...続きを読む
ブログのPing送信を一括するフリーサービス
ブログの最新情報を配信する機能として定着しているPing送信機能。Push型コ...続きを読む
GreyBoxを利用したブックマークのリンク方法
ブログでソーシャルブックマークなどのリンクアイコンをよく見かけます。ブックマーク...続きを読む
