私は他のサイトの記事から引用するときには、blockquoteタグの中に必ずcite属性を付加しています。といっても常用しているブラウザOperaのプラグインツールOpera_Exを使っているので、引用文としてコピーすると勝手に入れてくれるだけなんですが…。例えば、blockquoteタグは、こんな具合になります。

<blockquote cite="http://hogehoge.com/xxx.html">

ただ、こう書かれてあっても、ブラウザは単なる引用文ブロックとして認識するだけで表示される内容は何も変わりません。変えようと思えば、CSS2で規定されている属性セレクタに対するスタイル指定をすればいいはずですが、残念ながらIEでは認識されません。それで常々もったいない気がしていました。そこで、下記の記事を拝見しました。

クロスブラウザ blockquote(brogue)

同記事には導入するJavaScriptの動作が逐一説明されているので、ここでは重複を避けますが、最後の引用元表示部分だけを自分向けにアレンジしてみました。

このスクリプトは、blockquoteタグ内に、cite属性に加えて、title属性が記入されている場合に限って動作することにしています。上述のblockquoteタグに例えると、以下のように書きます。

<blockquote cite="http://hogehoge.com/xxx.html" title="どこかの記事タイトル">

すると、title属性の文字列を、cite属性で規定されたURLへのリンク文字列として、引用ブロックの末尾に付加します。下記のようなリンク文字列です。

<a href="http://hogehoge.com/xxx.html" class="topic">どこかの記事タイトル</a>

さらに、上のリンク文字列に対しては、"topic"というclassを割り当てています。これはこのBlog中で独立したリンク文字列に対して付与したクラスであって、先頭に赤い四角形を付加するとともに、下線付きとなるように、スタイル指定してあります。必須というわけではありません。

尚、IEでは下記のようなCSSバグがあることが知られており、setAttributeでclassを指定する場合は気を付けなければいけません。初出ではこのことを失念しており、IEで正しくスタイル指定されてはいませんでした(汗)。

[参考リンク]
setAttribute('class',*)でclass属性の属性値を変更できない(IE5.5)（Internet Explorer (Windows) CSSバグリスト）

livedoor Blogで使うには、このスクリプトを例えば"blockquote.js"などと名づけて、アップロードした後、例によって「Blogの説明」でスクリプトファイルにリンクさせれば、所定の動作をします。動作例は下記のようになります。ちゃんと赤い四角形から始まるリンク文字列が見えているでしょうか。

livedoor Blogトップページから、70万件の記事にアクセスできる旧livedoor Blog検索エンジンをいきなり撤去して、β版のエンジンをテストもなしに設置するのは経過措置としてふさわしいのでしょうか？

ただ、問題があるとすれば、JavaScriptをオフにしている閲覧者には引用元が見えません…(汗)。ウチの場合ですと、閲覧者がJavaScriptをオフにしている割合は2.5%で、無視できるかどうか微妙なところです。３コラムレイアウトやコラム開閉・トガキューなどは動作しなくても大したことはないのですが、引用元が表示できないのは著作権上も問題です。

と云うわけで、即採用といかないのがなんとも歯がゆいところです。従来どおり、リンク文字列とblockquoteとを連記するのが最善のようです。

blockquoteの修飾手法として、穏当なところでは、下記の記事が参考になります。結局、書く側の手間はどの手段も変わらないことはいうまでもありません。

Fieldsetのような見た目の引用の伝説（地獄変00）

ところで、このスクリプトで使われている手法は、HTMLに直接手を加えられないlivedoorBlogのようなホスティングBlogの見栄えを向上する上で有力な手法が示唆されています。

先のスクリプトを土台として、例えば、カテゴリーに応じた画像を、記事タイトルの横に表示させるというようなこともできます。興味のある方は挑戦してみてはいかがでしょうか。

「Tips of Blog」カテゴリの最新記事