酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

はてなの書籍紹介って直接htmlで書くことも出来るんじゃないかな−?と思ったので実験。

いつも買ってきた本を紹介する時には、G-Toolで書籍情報を吐き出したものを使っているけど、どうもどのブログサービスでも対応出来るようかにイマイチ見栄えがよくないので、はてな標準のCSSを使ったものに取り替えたいなぁ……とふと思ったので実験。

<div class="hatena-asin-detail">
    <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048682520/sakunekonikki-22/">
        <img src="http://ecx.images-amazon.com/images/I/51rYUebFkML._SL160_.jpg" class="hatena-asin-detail-image" 
            alt="Microsoftのクラウドコンピューティング Windows Azure入門" 
            title="Microsoftのクラウドコンピューティング Windows Azure入門"></a>
    <div class="hatena-asin-detail-info">
        <p class="hatena-asin-detail-title"><a href="http://d.hatena.ne.jp/asin/4048682520">
            Microsoftのクラウドコンピューティング Windows Azure入門</a>
        </p>
        <ul>
            <li><span class="hatena-asin-detail-label">作者:</span> 
                <a href="http://d.hatena.ne.jp/keyword/%ba%bd%b6%e2%bf%ae%b0%ec%cf%ba" class="keyword">砂金信一郎</a>, 
                <a href="http://d.hatena.ne.jp/keyword/%b1%f3%c6%a3%c2%e7%bc%f9" class="keyword">遠藤大樹</a>, 
                <a href="http://d.hatena.ne.jp/keyword/%bc%f2%b0%e6%c3%a3%cc%c0" class="keyword">酒井達明</a>, 
                <a href="http://d.hatena.ne.jp/keyword/%c6%a3%c5%c4%be%bc%bf%cd" class="keyword">藤田昭人</a></li>
            <li><span class="hatena-asin-detail-label">出版社/メーカー:</span> 
                <a href="http://d.hatena.ne.jp/keyword/%a5%a2%a5%b9%a5%ad%a1%bc%a1%a6%a5%e1%a5%c7%a5%a3%a5%a2%a5%ef%a1%bc%a5%af%a5%b9" 
                    class="keyword">アスキー・メディアワークス</a></li>
            <li><span class="hatena-asin-detail-label">発売日:</span> 2009/11/27</li>
            <li><span class="hatena-asin-detail-label">メディア:</span> 大型本</li>
            <li><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048682520/sakunekonikki-22/" target="_blank">
                Amazon.co.jpで詳細を見る</a></li>
        </ul>
    </div>
    <div class="hatena-asin-detail-foot"></div>
</div>

日記書くときに、テキスト内にhtmlを書かないといけないのは、あまり美しくはないけどこれだとよりはてダに最適化した書籍情報になりますね。

お、バッチリです!

追記(2014/3/26)

さすがに、はてなブログでははてなダイアリのCSSは使えないので、前述のコードでは正しく表示されないようです。