使いにくい「q」タグの使い勝手をよくするカスタマイズ2種 : Web Memo. SE

使いにくい「q」タグの使い勝手をよくするカスタマイズ2種

Web・Blog
HTML・CSS
2008年09月27日 01時42分

HTMLで引用に使われるタグは<blockquote>と<q>があります。前者は改行を含むような比較的長文の引用、後者は短文の引用に使われます。

ところが、<blockquote>はともかく<q>はあまり使われていないのが現状のようです。原因としては主に以下のものがあるのではないでしょうか。^*1 1 : 単純にBlogのエディタで<q>が入れられないだけかもしれませんが。

IEでのスタイル付けが一切ない
引用元へのリンクをどうするか

1.はIEの対応状況の問題です。IEは引用部分を<q>タグで囲っても見栄えがまったく変わらず、その部分が引用なのかデフォルト状態では判断できません。IE以外のFirefox、Operaなどは<q>タグで囲った部分が引用符(")で囲まれるのですが、一番使用されているトップシェアのIEは完全に無視してしまいます。

2.はIEに限らず全てのブラウザで問題になる部分で、「どこから引用したか」が<q>タグのみではまったくわかりません。<q>タグ自体はcite属性で引用元のURI、title属性で引用元のタイトルを含めることができるのですが、ブラウザがそのcite属性を利用して何かをしてくれるわけではないのです。

<blockquote>はデフォルトのスタイルとして内容の改行とインデントがおこなわれるため、外部リンクを含めたり外に置いたりするのはあまり問題になりません。しかし、<q>タグの場合はインライン要素で文章の中に含めるのが普通のため、わざわざリンクを張っていると文章自体が無駄に長くなってしまいます。

今回はすでにこのBlogでも使用している、上記の<q>タグの弱点を克服して使い勝手を上げるカスタマイズを紹介します。

概要

カスタマイズには全てJavaScript(jQuery)を使用します。以下の公式ページの「Download(jQuery)」からjsファイルをダウンロードし、headタグ内にコードを書き込んでjQueryを使用可能にしてください。

jQuery: The Write Less, Do More, JavaScript Library

<script type="text/javascript" src="jQueryファイルのURI"></script>

カスタマイズのコードは全てこのタグの下に書き込む必要があります。

IEの<q>タグの前後に引用符をつける

<q>タグを使用したときに、IEにも引用部分の前後に引用符(")を表示させます。本来ならCSSのbefore & after疑似要素を使えば済む話なのですが、IEは対応していないのでJavaScript(jQuery)を使用します。

動作デモ

この部分は引用です。IEにも前後に引用符が表示されるはずです。

HTMLソースは以下のようになっています。

<q>この部分は引用です。IEにも前後に引用符が表示されるはずです。</q>

ソース

以下のコードをhead内に書き込んでください。

<!--[if IE ]>
<script type="text/javascript">
	$(function(){
	$('q').each(function() {
		$(this).before('&quot;');
		$(this).after('&quot;');
		});
	});
</script>
<![endif]-->

条件付きコメントを使用してIEにだけスクリプトを実行させます。IE6 & 7で正常に動作することを確認しています。

FirefoxやOperaなどの引用符と違うのは実際に表示されているのが「文字」のため、例えばコピーするときなどに引用符が含まれてしまいます。画像などを使えばこの問題は回避できますが、あまり大した問題には思えないので文字のままです。気になる方は"の部分に画像(img)タグを入れるなどしてください。

<q>タグの後に引用元へのリンクを作る

<q>タグにcite属性でURIが指定されていると、自動で引用部分の末尾にリンクを作成します。

動作デモ

<Q>タグはQuotation（引用）の略で、<Q>～</Q>で囲まれた部分が引用文であることを表します。

HTMLソースは以下のようになっています。

<q cite="http://www.htmq.com/html/q.shtml" title="<Q>－HTMLタグリファレンス"><Q>タグはQuotation（引用）の略で、<Q>～</Q>で 囲まれた部分が引用文であることを表します。</q>

このBlogでは画像を呼び出してリンクに使用していますが、今回のコードでは「*」を使用しています。同じように画像が使いたい方は、「*」部分を画像に置き換えるなどしてください。なお、挙動とソースは以下のページ・サイトを参考にして作成(改造)させていただきました。

2 : はてなダイアリーにはこれと同じ機能が標準搭載されている。

ソース

以下のコードをhead内に書き込んでください。

<script type="text/javascript">
<!--
$(function(){
	$('q[@cite^="http://"]').each(function() {
		var q_title = $(this).attr('title');
		var q_cite = $(this).attr('cite');
		$(this).after('<a href="' + q_cite +'" title="' + q_title +'">*</a>');
		});
	});
// -->
</script>

JavaScriptがOFFの環境だとリンクが作られないため、ページ内のどこかに普通のリンクを最低一つは作っておいた方がいいでしょう。