caramel*vanilla > 引用のHTMLの記述について考えてみた

ワタシの引用

blogを書いているとWebサイトの一部を引用する機会が非常に多いです。
逆に見ている立場でも引用を用いた記事をよく見かけます。
引用をする事によって記事にふくらみが出せたり、信憑性がUPしたり、言いたい事を端的に示せる場合も多々あります。
(ワタシはあまり文章書くのが得意ではないので…)

その引用についてはあまり深く考えずに「<blockquote></blockquote>」で囲んでその中に引用元へのリンクを張るという形にしていました。
ちょっと前にOKAMURAさんに「<blockquote>にはcite属性でURLを入れた方がいい」とのありがたいアドバイスを頂いてからはそのように変更しました。
つまりこういうこと↓

変更前

変更後

ソースはちょっと長くなってしまいますがこれで人間からもブラウザからも引用部分と引用元が明確になるというわけです。
これがBESTとは思いませんが少なくても前よりはよくなったかな?と思っていました。

XHTML時代の引用

今日たまたま大変興味深い記事をみつけました。

XHTMLでの引用方法

現在のブラウザに対しても有効で、かつ、XHTML時代になっても時代遅れにならない引用のコードを手間をかけずに作成する方法を提案します。

これも所謂引用なわけですが上記の変更後のソースの表示サンプルでもあります。

こちらの記事はとっても参考になる内容なのですべてのブロガー必読と言えるかも。

引用についてのルール4ヶ条をきちんと守らぬまま引用しているパターンって多い気がします。
引用部分を明確にして引用元を明示するって引用元に敬意を払う意味でも見ている方に誤解を与えない為にも疎かにしてはいけませんよね。

引用についてのルールの他にも引用のソースについての検証や手軽に引用する為のTipsも紹介されています。

引用元のURLとタイトルをblockquoteの中に入れるべきか否かという議論は以前読んだ事がありちょっと考えてしまったのですが今までは見た目優先で中に含めてしまっていました。

- 参考 -
『blockquote要素の中に出典を示すcite要素を包含すべきか』に関する議論リンク集

XHTMLでの引用方法

cite 要素を blockquote 要素の中に入れるべきか外に入れるべきかに関しては、論争があるようですが、cite 要素は、《引用に関する情報》であって、《引用される情報》ではない以上、blockquote 要素の中に入れるべきではありません。

確かにそうかも…

そこでこれらの点を踏まえてさらに見直して今後は引用を以下のように変更しようと思います。

見直し後

過去のソースを全部変えていくのはちょっと気が引けるのでこれからって事で :P
引用元へのリンクにciteというクラスを割り当ててみたので後でCSSも見直そうと思います。

簡単に引用するための方法

上にあげたソースをいちいち手入力するのはちょっと…というかかなり面倒。
三日坊主になりかねません。
ここは得意のFirefoxの拡張Copy URL+を使って右クリックから一発で生成するようにuser.jsを書き換えてみました。
Copy URL +の設定方法については以下が詳しいです。

Copy URL + - Mozilla Firefox まとめサイト

user.jsの書き換え例です。
以下ご参考までに :-)
*●には通し番号が入ります。

Copy URL+って現在時刻もコピーしてくれるんで便利。

%LOCAL_TIME% - the time in your local format (depending on browser and OS settings)
ローカル時間(ブラウザとOS設定に基づく)

[ mozdev.org - copyurlplus: customize ]

うーーん…
やっぱり引用元のリンクを外に出すとちょっとわかりにくいかも…
はやいとこCSSでなんとかせねば!!