今日のブックマーク

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

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

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

  1. 「『オートアンカー』から『Copy URL+』へ」(d:id:Imamura:20061219:copyurl
  2. 「『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])。

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

こんなふうになります→

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

これによって、日記のヘッダ色を変えたのに合わせて「[↑B]」アイコンの色も変えたい、というときなど、スタイルシートを書き換えるだけですべての「[↑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
標準 [↑B] http://d.hatena.ne.jp/images/b_entry_de.gif
グレー [↑B] http://d.hatena.ne.jp/images/b_entry_dg.gif
[↑B] http://d.hatena.ne.jp/images/b_entry_gr.gif
[↑B] http://d.hatena.ne.jp/images/b_entry_pr.gif
[↑B] http://d.hatena.ne.jp/images/b_entry_br.gif
[↑B] http://d.hatena.ne.jp/images/b_entry_rd.gif
セピア [↑B] http://d.hatena.ne.jp/images/b_entry_sp.gif
ピンク [↑B] http://d.hatena.ne.jp/images/b_entry_pk.gif
抹茶 [↑B] http://d.hatena.ne.jp/images/b_entry_te.gif
ライトグレー [↑B] http://d.hatena.ne.jp/images/b_entry_lg.gif
ライトブルー [↑B] http://d.hatena.ne.jp/images/b_entry_lb.gif
[↑B] http://d.hatena.ne.jp/images/b_entry_wh.gif
オレンジ [↑B] http://d.hatena.ne.jp/images/b_entry_or.gif
ライム [↑B] http://d.hatena.ne.jp/images/b_entry_li.gif
[↑B] 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]」のような表示ができるようになりました。

現在の問題点

まだブックマークされていないURLでこの画像を作った場合、「[↑B]」のように右側が空いて表示されてしまいます。「:after」疑似クラスとか使えば解消できそうな気がしますが、これはIE6が非対応なので(+ここまで解説してきて疲れたので)ひとまずこれで終わりとします。

どうぞご利用ください。

追記:その後、http記法が拡張されました

「[URL:bookmark]」などと書くと、そのURLのブックマーク数が表示されるようになりました。