新しいはてなブックマークボタンを(X)HTML validにする方法
新しいはてなブックマークボタンが公開されました。次のような3種類のタイプが用意されています。
| スタンダード | バーチカル | シンプル |
 |  |  |
ボタンをクリックすれば、その場でブックマークやコメント投稿ができます。
それはさておき、このボタンを表示するコードをページに貼り付けると、XHTML1.xやHTML4.01のページがvalidにならなくなります。
本エントリーでは、問題点の簡単な解説と、設置したはてなブックマークボタンを(X)HTML validにする方法を紹介します。
また、1ページに複数のブックマークボタンを表示する場合、(X)HTML validにする話とは別に、３項の対処を行うことで表示速度を若干改善することができます。
動作をざっと確認した限りの記事なので、認識誤りがありましたらご指摘ください。
※記事中のソースコードは見やすくするよう、途中で改行しています。
１．問題点
はてなブックマークボタンを表示するために、次のようなコードを生成します。
このコードを埋め込んだ、DOCTYPEがXHTML1.0のページをThe W3C Markup Validation Serviceでチェックすると、次のようなエラーが表示されます。
Another HTML-lint gatewayでも、次のようなエラーになります。
エラーになる理由は、貼り付けたコードのa要素に含まれるdata-hatena-bookmark-layout属性と、script要素のasync属性が、不明な属性として扱われるためです。タイトルを設定すると、data-hatena-bookmark-title属性もエラーの対象となります。
「data-*」という属性は、HTML5のCustom Data Attributeに該当します。また、script要素のasync属性は非同期でスクリプト読み込むための属性のようです。
これらの属性はHTML5ではvalidとなりますが、それ以外のDOCTYPEではエラーとなります。
２．対処方法
対処といえるほどのものではありませんが、HTML5以外のページで、はてなブックマークボタンのコードを埋め込む場合、コードに含まれている「data-hatena-bookmark-*」属性と、script要素のasync属性を削除します。
対処前（赤色部分が削除対象）
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button"
data-hatena-bookmark-layout="vertical"
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
src="http://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8"
async="async">
</script>対処後
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button"
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
src="http://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8">
</script>「data-hatena-bookmark-*」属性を外すと、タイプは自動的にスタンダードになります。これだけはどうしようもないのですが、a要素のhref属性に記事のURLは指定できるので、ブックマークなどの機能は正常に動作しますし、ボタンをクリックしたときにブログ名や記事タイトルもきちんと表示されるようです（動作確認済み）。
下は、HTML5の属性を削除した後の動作例です。クリックした後、ブログ内と記事タイトルがきちんと表示されます。
1ページに複数のはてなブックマークボタンを表示
ブックマークボタンをクリックしたところ
async属性を外すとスクリプトの読み込みが遅れるのでブックマークボタンの表示が若干遅くなるようですが、次項の対処を行えばそれほど気にならなくなると思います（多分）。
３．スクリプトの設定位置
1ページに複数のはてなブックマークボタンがあっても、script要素はページに1つ設定していれば正常に動作するので、２項の対処と関係なく、次のようにscript要素はhead要素に記述しておくと良いでしょう。
<head>
…略…
<script type="text/javascript"
src="http://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8">
</script>
…略…
</head>
<body>
…略…
<a href="http://b.hatena.ne.jp/entry/"
class="hatena-bookmark-button"
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
…略…ブックマークボタンのマークアップとscript要素を1対1で設置すると、上から順番に表示されますが、1つにまとめておけば一気に表示されます。
async属性を付与していればそれだけで表示は速くなりますが、script要素を1つにまとめた方がより早く表示されるようです。
４．WordPress/Movable Typeの設定例
1ページに複数のはてなブックマークボタンを表示する場合、WordPressであればthe_title()を設定します（青色部分）。
<a href="http://b.hatena.ne.jp/entry/<?php the_title(); ?>"
class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
src="http://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8">
</script>Movable Typeの場合はMTEntryPermalinkタグを使用します（青色部分）。
<a href="http://b.hatena.ne.jp/entry/<$mt:EntryPermalink$>"
class="hatena-bookmark-button"
title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
src="http://b.st-hatena.com/js/bookmark_button.js"
charset="utf-8">
</script>公式サイトの生成ページを利用すると、テンプレートタグのアングルブラケットが実体参照されてしまうので、後で設定しましょう。
はてなダイアリーテーマ
はてなダイアリー用のテーマを作成しました。とりあえず2カラム固定レイアウト（右サイドバー）を公開します。完成例は次のようになります。
１．テーマ設定方法
管理画面の「デザイン（またはデザイン編集）」をクリックし、「テーマ」は「指定なし」を選択します。「ヘッダ色」「ヘッダタイプ」はお好きなものを選んでください。
その下にある「ヘッダ／フッタ／スタイルシートの編集」に、下記のテキストエリアの内容を貼り付けてください。ページのフッタのモジュールはサンプルなので、自由に入れ替えてください。
ページのヘッダ
ページのフッタ
スタイルシート
２．フッターを非表示にする場合
このテーマではフッターを表示することができます。フッターが不要な場合は、「ページのフッタ」の一番下にある、
<p class="footer">Copyright © 2009 xxxx. All Rights Reserved.</p>を削除してください。
３．その他
すべての動作・表示を確認できていないので、不具合がありましたらご連絡ください。
はてなブックマークプラス（エントリー詳細情報の解説）
5月26日にリリースされた、「はてなブックマークプラス」に登録してみました。
「はてなブックマークプラス」には、これまでの「はてなブックマーク」の機能に加え、ブックマークの公開・非公開が記事別に選択できるなど、新たな機能が搭載されています。
その追加機能のひとつ、「エントリーページの詳細データ」が結構気に入ったので、「Amazon アソシエイト作成支援ツール一覧」のエントリーを例に紹介したいと思います。
まず、「「Amazon アソシエイト作成支援ツール一覧」のはてなブックマークのページ」を表示すると、ページ右側にグラフが表示されています。
このグラフのリンクをクリックすると、「エントリーページの詳細データ」のページに移動します。ただし、はてなブックマークプラスに登録していないか、登録していてもログインしていないと、次のようなページしか表示されません。
本題に戻って、はてなブックマークプラスに登録かつログインした状態で、「エントリーページの詳細データ」のページに移動すると、次のようなグラフが表示されます。このグラフは縦軸がブックマーク数、横軸が時間で、ブックマーク数推移をグラフで閲覧できるようになっています。例に使っているエントリーが初めてブックマークされたのは2006年3月ですが、すべてのブックマーク数推移を見ることができます。グラフの一番左側が垂直になっているのが、そこにブックマークが集中しているからです。
グラフの線上をマウスでポイントすると、ブックマークしたユーザーが表示されます。
グラフの表示期間は切り替えることができます。下はブックマーク開始から半日分のグラフです。赤い色が「人気エントリー」に入ったタイミングです。
1日分に切り替えると下のようになります。
大きなグラフの下にある細長いグラフは、大きなグラフに表示されている期間を薄いピンク色で示します。下は全期間が表示されていることを示しています。
大きいグラフの表示期間を1年にすると、細長いグラフはこのようになります。
グラフ右上にある「表示期間」の「半日／1日／1週／1月／1年／すべて／初期状態」のリンクをクリックすれば、表示期間を変更できます。
グラフ上でマウスをドラッグすれば、さらに表示期間を自由に選択できます。
ドラッグによる選択後は下のようになり、小さいグラフからおおよその表示期間も分かります。
グラフの下に表示されているアイコンは、ブックマークされたエントリーのリンクを含んだエントリーまたははてなダイアリーです。アイコンをポイントすると、記事タイトルが表示され、さらにクリックすれば該当記事に移動します。
また、アイコンに対応するエントリーとダイアリーがページ右側に表示されます。各一覧の下にある「現在の選択範囲には、更に～があります。」をクリックすればすべてのエントリーや日記が表示されます。
ブックマークされたエントリーのリンクを含んだエントリーは右側に表示されます。アイコンにマウスをポイントすると、該当の記事の背景色が反転します。
ブックマークユーザーも一覧として表示されます。
ということで、人気エントリーとしてブックマークされたときの優越感をよりいっそう高めてくれる、至れり尽くせりの機能が満載です。
あとは人気エントリーを書くだけです（爆）。
はてなブックマークカウンタからブログの新着ブックマークを表示する
2008年11月にはてなブックマークがリニューアルされてから、右サイドバー下に貼り付けてある「はてなブックマークカウンター」のリンクから、このブログの「新着ブックマークのページ」に遷移しなくなり、代わりに「注目エントリー」が表示されるようになりました（「新着ブックマークのページ」が表示されていたと思うのですが、勘違いしていたらすいません）。
これが今までの「はてなブックマークカウンター」です。
上の「はてなブックマークカウンター」をクリックして表示されるページです。
「新着ブックマークのページ」は、このブログの記事へのリアルタイムなブックマーク状況が確認できることや、ブックマークコメントに書かれた記事の誤りの指摘など、参考にさせてもらうことが少なくないので、新着ブックマークを表示するURLを調べ、「新着ブックマークのページ」が表示されるよう変更しました。
これが変更した「はてなブックマークカウンター」です。見た目は同じですがリンク先を変えています。
上の「はてなブックマークカウンター」をクリックして表示されるページです。
既知の技ですが、公式サイトのヘルプには掲載されていないようなので、以下に「新着ブックマークのページ」に遷移する方法を掲載しておきます。「ブログ名」「色」の部分は次のサイトを参考に適宜設定してください。
ヘルプに掲載されている「はてなブックマークカウンター」のタグ（赤色が変更対象）
<a href="http://b.hatena.ne.jp/entrylist?url=ブログのURL">
<img src="http://b.hatena.ne.jp/bc/色/ブログのURL" class="bcounter"
alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数"></a>「新着ブックマークのページ」に遷移するタグ（青色が変更後）
<a href="http://b.hatena.ne.jp/bookmarklist?sort=&url=ブログのURL">
<img src="http://b.hatena.ne.jp/bc/色/ブログのURL" class="bcounter"
alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数"></a>Movable Type で「新着ブックマークのページ」に遷移するタグ（青色が変更箇所）
<a href="http://b.hatena.ne.jp/bookmarklist?sort=&url=<mt:blogURL escape="url" />">
<img src="http://b.hatena.ne.jp/bc/色/<mt:blogURL escape="url" />" class="bcounter"
alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数" /></a>WordPress で「新着ブックマークのページ」に遷移するタグ（青色が変更箇所）
<a href="http://b.hatena.ne.jp/bookmarklist?sort=&url=<?php echo urlencode(get_settings('home')); ?>">
<img src="http://b.hatena.ne.jp/bc/色/<?php echo urlencode(get_settings('home')); ?>" class="bcounter"
alt="この日記のはてなブックマーク数" title="この日記のはてなブックマーク数" /></a>はてなブックマークの被ブックマーク数 10000 突破
当ブログでの、はてなブックマークの被ブックマーク数が 10000 突破してました。
最近はあまりチェックできていないのですが、人気エントリーなどがなくても、日に10件～20件の被ブックマークを頂いてました。ブックマークくださった皆様、ありがとうございます。
ということで、これまでの人気エントリー・ベスト50を並べておきます。
- Movable Type プラグイン一覧 565 users
- Movable Type を始める前に設定しておきたい 10 の項目 507 users
- Internet Explorer 6 と Internet Explorer 7 を共存させる 328 users
- CSSで画像に影をつける（ドロップシャドウ） 318 users
- Movable Type が WordPress に負けた本当の理由 247 users
- Windows XP で外付けデバイスを簡単に取り外す 247 users
- Windows XP のバックアップ機能 225 users
- RSS Feed（フィード）を表示する 200 users
- Movable Type プラグイン一覧（MT4対応） 195 users
- Amazon アソシエイト作成支援ツール一覧 182 users
- Firefox 1.5 と Firefox 2.0 を共存させる 167 users
- Lightbox JS で画像を表示する 122 users
- サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）102 users
- Highslide JS でサムネイル画像を拡大表示する 100 users
- IE7 の CSS ハック 98 users
- Google マップの貼り付け用 HTML を valid にする 86 users
- JavaScript で文字をトリミングする76 users
- ボタン・バナー・アイコン作成・配布サイト一覧 76 users
- XHTML タグ一覧表示ツール 75 users
- Tag Cloud のページを作る 70 users
- MySQL phpMyAdmin によるバックアップ 69 users
- Movable Type 3.3 エントリー・タグ詳説 63 users
- CSS JavaScript によるカラムレイアウト切り替え 62 users
- Movable Type テンプレート 61 users
- Firefox・Netscapeで連続した半角文字を折り返す 57 users
- MTOSリリースと日本語化手順 52 users
- ブログツール比較（Movable Type / Serene Bach / WordPress） 47 users
- Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す 47 users
- Movable Type 3 から Movable Type 4 へのアップグレード方法 46 users
- feed meter「ランキング Top 300」で一番多く使われているブログは何か？ 45 users
- CSS の after 擬似要素で回り込みを解除する 45 users
- YouTube の Embed タグを XHTML valid にする 45 users
- CSSでブログに影をつける（ドロップシャドウ） 45 users
- Movable Type 4 のテンプレート構造 44 users
- HTTP/1.1 の「条件付きGET」を利用して PHP ファイルのサーバ負荷を削減する 44 users
- Web2.0 Logo Creator （URL変更） 44 users
- Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その1：概要） 44 users
- リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」 42 users
- Movable Type のエントリー削除でHTMLファイルも自動的に削除する 42 users
- Firefox2 と Firefox3（ベータ版）の共存 39 users
- 勝間和代さんが選んだ良書・50冊 39 users
- Movable Type 4.1 カスタムフィールドの使用方法 38 users
- Movable Type 3.3 追加タグ一覧 36 users
- .htaccess によるリダイレクト 36 users
- RSS フィードをブログに表示する（サービス利用編） 35 users
- Litebox 1.0 をブログに適用する 35 users
- 小粋空間：カスタマイズについて 35 users
- 標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する 34 users
- アフィリエイト収入の確定申告をする 33 users
- Movable Type 4 にアップグレードするメリット 31 users
はてなブックマークウィジェットの設定とカスタマイズ
はてなブックマークから、ブログに任意のサイトの注目エントリーを貼り付けられるブログパーツ、「はてなブックマークウィジェット」が公開されました。
「はてなブックマークウィジェット」を利用すると、指定したサイトの「人気エントリー（被ブックマーク数順）」と「注目エントリー（新着かつ一定数以上の被ブックマーク順）」を表示することができます（下）。
- 人気エントリー表示例
- 注目エントリー表示例
１．設定方法
はてなブックマークのトップページ右上にある検索フォームに表示したいサイトの URL を入力。ラジオボタンから "URL" を選択して、「検索」をクリック。
「この注目エントリーをブログに貼り付ける」をクリック。
あとは、設定画面にしたがって設定し、一番下の「コード」の内容を貼り付けます。
人気エントリーを表示する場合は、設定画面の「種類」を選択するか、注目エントリーを表示しているページのタイトル右にあるリンクで切り替えてから、「この注目エントリーをブログに貼り付ける」をクリックします。
２．任意の幅に変更する
幅は、設定画面で3種類（150px/200px/250px）が用意されていますが、スクリプト内の
Hatena.BookmarkWidget.width = 150;の赤色部分を書き換えれば、サイズを変更することができます。
３．表示記事数を変更する
記事数は、設定画面で1～10が用意されていますが、スクリプト内の
Hatena.BookmarkWidget.num = 5;の赤色部分を書き換えれば、記事数を変更することができます。
