ブックマーク数を示す画像にCSSでひと工夫

【元記事：ブックマーク数を示す画像にCSSでひと工夫：d:id:manpukuya:20070306:copyurl

】

この記事は一応、以下の記事の続きです。でも、「ブックマーク数を示す画像のタグ」という一般的な話にもなってます。

「『オートアンカー』から『Copy URL+』へ」（d:id:Imamura:20061219:copyurl）
「『Copy URL+』で、ブクマ数を表示するタグを一発生成」（d:id:Imamura:20070303:copyurl）

これまでのあらすじ

基本: 「http://b.hatena.ne.jp/entry/image/」以下に任意のURLを付け加えると、そのURLのはてなブックマーク数を画像として取得できる。
展開: ブックマーク数の画像をただ表示するのではなく、ブックマークページへのリンクにしてあげればもっと便利に。リンク先のURLは「http://b.hatena.ne.jp/entry/任意のURL」という形式。
作成: 上記は「<a href="http://b.hatena.ne.jp/entry/任意のURL"><img src="http://b.hatena.ne.jp/entry/image/任意のURL" alt="［↑B］"></a>」というタグを書いて実現できる。このタグを、Firefoxのアドオン「Copy URL+」で一発作成できるようにする。「Copy URL+」の基本的な使い方は1つめの記事（d:id:Imamura:20061219:copyurl）に、上記のタグを作れるようにする方法は2つめの記事（d:id:Imamura:20070303:copyurl）に。

この記事ですること：ブックマーク数の画像に、CSSでブックマークアイコンもつける

今まで紹介したのは、単にブックマーク数を表示するタグでした（こんな感じ→）。

この記事では、画像の左に「［↑B］」アイコンを表示するようにし、「［x Users］」の画像がはてなブックマークのブックマーク数を表していることをわかりやすく示します。

こんなふうになります→

ポイントは、「［↑B］」アイコンの画像をそのつど<img>タグで呼び出すのではなく、スタイルシートを使って一括指定していることです。

これによって、日記のヘッダ色を変えたのに合わせて「［↑B］」アイコンの色も変えたい、というときなど、スタイルシートを書き換えるだけですべての「」アイコンの色を変更できます。

ブックマーク数を表示するタグの変更

前回紹介したタグは、以下の通りです。

<a href="http://b.hatena.ne.jp/entry/任意のURL"><img src="http://b.hatena.ne.jp/entry/image/任意のURL" alt="［↑B］"></a>

これに、「class="users"」を追加します。（強調部分）

<a href="http://b.hatena.ne.jp/entry/任意のURL"><img src="http://b.hatena.ne.jp/entry/image/任意のURL" alt="［↑B］" class="users"></a>

さらに、スタイルシートに以下の記述を追加します。

/*■ブックマーク数の背景にブックマークアイコンを表示*/
img.users
{padding-left:18px;height:13px;
background:url("http://d.hatena.ne.jp/images/b_entry_sp.gif")
left center no-repeat;
margin:0 0.5em 0 0.3em;}

「/* 〜 */」の範囲はコメントですので、この通りに入力する必要はありません。

「padding-left:」の数字を大きくすると、「［↑B］」アイコンと「［x Users］」部分の間隔が広がります。

「margin:」の値は、「0.5em」のように「0.3em」の部分を大きくすると「［↑B］」の左右の空きが広くなります。

また、「http://d.hatena.ne.jp/images/b_entry_sp.gif」の部分は、日記のヘッダの色に合わせるなど、好きな色のアイコンを指定できます。

「［↑B］」アイコンの色を変えたくなったら、スタイルシートの「http://d.hatena.ne.jp/images/b_entry_sp.gif」を別のアイコンのURLに差し替えればOKです。

各色の「［↑B］」アイコンのURLは以下の通りです。

色名	画像	URL
標準		http://d.hatena.ne.jp/images/b_entry_de.gif
グレー		http://d.hatena.ne.jp/images/b_entry_dg.gif
緑		http://d.hatena.ne.jp/images/b_entry_gr.gif
紫		http://d.hatena.ne.jp/images/b_entry_pr.gif
茶		http://d.hatena.ne.jp/images/b_entry_br.gif
赤		http://d.hatena.ne.jp/images/b_entry_rd.gif
セピア		http://d.hatena.ne.jp/images/b_entry_sp.gif
ピンク		http://d.hatena.ne.jp/images/b_entry_pk.gif
抹茶		http://d.hatena.ne.jp/images/b_entry_te.gif
ライトグレー		http://d.hatena.ne.jp/images/b_entry_lg.gif
ライトブルー		http://d.hatena.ne.jp/images/b_entry_lb.gif
白		http://d.hatena.ne.jp/images/b_entry_wh.gif
オレンジ		http://d.hatena.ne.jp/images/b_entry_or.gif
ライム		http://d.hatena.ne.jp/images/b_entry_li.gif
黒		http://d.hatena.ne.jp/images/b_entry_bl.gif

「Copy URL+」での変更点

「Copy URL+」の設定ファイル「user.js」の変更点は、上の「タグの変更」と同じです。

「『Copy URL+』で、ブクマ数を表示するタグを一発生成」（d:id:Imamura:20070303:copyurl）で修正した「user.js」の4行目と6行目に「class="users"」を追加します。

（以下は、上記記事で作った「user.js」のうち、修正する部分の抜粋です）

user_pref('copyurlplus.menus.2.label','リンク＋Users作成');
user_pref('copyurlplus.menus.2.copy','「<a href="%URL%">%TITLE%</a>」<a href="http://b.hatena.ne.jp/entry/%URL%"><img src="http://b.hatena.ne.jp/entry/image/%URL%" alt="［↑B］"></a>');
user_pref('copyurlplus.menus.3.label','Users画像タグ作成');
user_pref('copyurlplus.menus.3.copy','<a href="http://b.hatena.ne.jp/entry/%URL%"><img src="http://b.hatena.ne.jp/entry/image/%URL%" alt="［↑B］"></a>

4行目と6行目に、「class="users"」を追加します。（強調部分）

user_pref('copyurlplus.menus.2.label','リンク＋Users作成');
user_pref('copyurlplus.menus.2.copy','「<a href="%URL%">%TITLE%</a>」<a href="http://b.hatena.ne.jp/entry/%URL%"><img src="http://b.hatena.ne.jp/entry/image/%URL%" alt="［↑B］" class="users"></a>');
user_pref('copyurlplus.menus.3.label','Users画像タグ作成');
user_pref('copyurlplus.menus.3.copy','<a href="http://b.hatena.ne.jp/entry/%URL%"><img src="http://b.hatena.ne.jp/entry/image/%URL%" alt="［↑B］" class="users"></a>

これで、Copy URL+の「リンク＋Users作成」および「Users画像タグ作成」で、「［↑B］」のような表示ができるようになりました。