2010.08.22blockquote要素単体から引用元を視覚化できるように、引用元へのリンク、及び引用元を示すテキストを生成するためのスクリプトです(jQuery使用)。引用元が書籍でISBNコードが示されている場合は、Amazonのリンク(アソシエイトID付き)へと変換します。@ub_pnrさんがjQueryプラグイン版を公開されました。「jQuery.prettyQuote.js」おすすめです!諸背景と実現したいことUAが処理するにあたっては、blockquoteやq要素のcite属性に引用元のURI(リソースの所在や名前)と、title属性に引用元の説明情報があれば、適切に解釈されることになっていようとは思うのですが、残念ながら主要な視覚環境のUAにおいてcite属性、title属性で示された情報が視覚的に表され、それをハイパーリンク等で利用できるようにはなっていません。q要素で示されている引用元の情報が視覚化され、ハイパーリンクで利用できるようになっている方が便利なはずであろうということで、スクリプトを利用して、今回は利用頻度が多いであろうblockquote要素のみに対象を絞り、引用元へのリンク、及び引用元を示すテキストを生成するためのスクリプトを考えてみたいと思います。今回実現したいことは次のようなスクリプトです。blockquote要素のcite属性に指定された引用元のリソースの所在(URL)、title属性に指定された引用元の説明情報をそれぞれリンク先とリンクタイトルに置き換わるようにする。引用元のリソースの所在が書籍のためにURLでない場合は、URNとしてISBNが与えられていれば、オンラインショッピングサイトのamazon.co.jpへのリンクへ変換するなど、できるだけハイパーリンクを通して情報を得られる機会を工夫する。Buildingさんにて、今回実現したいことのほとんど完成形がすでにあったので、基本となるスクリプトには公開されていたものを利用させて頂きました(@ub_pnrさんにお礼申し上げます)。jQueryのライブラリを利用しています。'&lt;/cite&gt;より&lt;/dt&gt;');}});});変数trakingIDの値に入っているw3g-22の部分は適宜、自分のAmazonアソシエイトIDに変更してください。'';と、値を空(undefined)で利用してください。後ほど、AmazonアソシエイトIDを取得されることがあったら、後日埋められると良いかと思います。次のようなblockquote要素でマークアップしたものがあったとします。DOM要素のラッパーセットのフィルタリング&lt;/li&gt;&lt;/ul&gt;&lt;/blockquote&gt;上記のソースコードがスクリプトを通すことで、引用元を視覚化できるようにHTMLを追加生成します。ここでは、引用元を示すcite要素と組み合わせて、できるだけ引用元のブロックとの対応が関連づけられるようなマークアップを出力するようにしています。DOM要素のラッパーセットのフィルタリング&lt;/li&gt;&lt;/ul&gt;&lt;/blockquote&gt;&lt;/dd&gt;&lt;/dl&gt;引用元が書籍の場合にcite属性に指定するurn:isbn:ISBNコードについて書籍はWWW上における「所在(URL)」という概念で結びつけることができないので、リソースを永続的な名前によって識別するURNとしてISBNコードを使用します。書籍のISBNコードをamazon.co.jpへのリンクへと変換するにあたって、ASINコードがISBN-10のコードとイコールの関係になっているので、amazon.co.jpのASINコードをそのままISBNコードとして入力すれば良いと考えてもらえるとわかりやすいのではないかと思います。urn:isbn:ISBNコードの形式です。フロントエンド高速化アプローチ続HTML5についてのおさらいContactWeb制作に関するご相談、お気軽にお問い合わせください。/WebデザイナーContactSubscribeTwitterFacebookGoogle+。