ねことくまとへび

　はてなダイアリーには「ISBN記法」というものがありまして、書式に則って書籍のISBNを記述するだけで、amazonから取得したデータを簡単に表示することができます。

isbn:9784861551161:detail

　例えば上のように記述すると、実際には下のように表示されます。

　本のタイトルだけではなく、表紙の画像、著者、出版社などの情報も取得できる、とても便利な機能ですね。

　ただ、その中で「表紙の画像」がちょっと曲者だったりします。普段は便利なこの機能も、黄色い楕円のマークがついたコミックを扱う時には困ってしまうんですよね。まぁ、要するにエロ漫画なんですが、最近の単行本の表紙画像は露骨なものが増えています。おっぱいが露出しているくらいならまだ可愛いもので、汁まみれだったり、黒ベタやら白抜きやらで修正が必要な描写だったり。迂闊にこんな画像を載せようものなら、はてなから追い出されてしまいかねません。

　ISBN記法にはいくつかのパターンがあり、本のタイトルだけを表示する機能も存在します。しかし、当然ながらその場合は「タイトルだけ」となり、著者名や出版社名などを表示することはできません。ちょっと寂しいです。ユーザーの側でなんとかできないものでしょうか。

　真っ先に思いつくのはJavaScriptを利用して画像を入れ替えることですが、はてなダイアリーではユーザーが独自にスクリプトを書くことはできません。困りました。

　……あ、でもCSSは自分で書けるんだよねー。ということは、「画像を置き換える」ことは難しくても、「画像が置き換わったように見せかける」ことはできそうです。というわけで、これからCSSをいじってみることにしましょう。でも、その前に差し替え後の画像を用意しないといけませんね。

　ちょｗｗｗｗｗルキアたん見たいのかよｗｗｗｗｗ

　……失礼しました。

　さて、CSSでやらなければいけないことは大きく分けて二つです。

• 元のエロエロな画像を消す
• その跡地に代替画像を配置する

　前述のとおり、JavaScriptであれば割と簡単に実現が可能ですが、CSSではこの両方を同時に満たすことは難しいです。というわけで、この2つの作業内容を、一見同じように見える別の2つの作業に置き換えてみます。

• 元のエロエロな画像を画面外に吹っ飛ばす
• エロエロな画像の配置されるべき場所の背景画像として代替画像を適用する

　日本語にするとピンと来ないと思いますが、実際にCSSを書いてみると大したことはありません。

.ero .hatena-asin-detail a {
    background: url("http://f.hatena.ne.jp/images/fotolife/s/silence1998/20070213/20070213225038.jpg") no-repeat top right;
    width: 2113px;
    height: 160px;
    margin: 0 10px 0 -2000px;
    float: left;
    border: none;
}

.ero .hatena-asin-detail a.keyword {
    text-decoration: none;
    border-bottom: dotted 1px #d0d0d0;
}

.ero .hatena-asin-detail .hatena-asin-detail-info a {
    background: none;
    width: auto;
    height: auto;
    margin: 0;
    float: none;
}

　「ero」というストレートなクラス名はあまり気にしないでください。

　このCSSでは、エロエロ画像の背景に代替画像を配置し、エロエロ画像を2000ピクセル左に吹っ飛ばしてブラウザの外に追いやって、代替画像があたかもその本の表紙であるかのように見せています。ちなみに「2113px」は2000＋代替画像の横サイズ、「160px」は代替画像の縦サイズです。では、実際に表示させてみましょう。

><div class="ero">isbn:9784861551161:detail</div><

　ちなみに、行頭、行末の不等号は、この行にpタグを挿入させないための記述方法です。詳しくははてな記法のヘルプをご覧ください。

　さて、CSSを変更した上で本文中に上のような記述をすると、実際には下のように表示されます。

　WindowsXPのIE6とFirefoxで意図したとおりに表示されることを確認しています。その他の環境では微妙な結果になるかもしれません。そもそも、ユーザーがスタイルシートをOFFにしていたらアウトですし。

　……というか、本当ははてなの側で対応してもらいたいんですけど。なんとかなりませんかね？