01時42分TweetListPocketHTMLで引用に使われるタグは<blockquote>と<q>があります。前者は改行を含むような比較的長文の引用、後者は短文の引用に使われます。ところが、<blockquote>はともかく<q>はあまり使われていないのが現状のようです。原因としては主に以下のものがあるのではないでしょうか。単純に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を使用可能にしてください。src="jQueryファイルのURI"></script>カスタマイズのコードは全てこのタグの下に書き込む必要があります。IEの<q>タグの前後に引用符をつける<q>タグを使用したときに、IEにも引用部分の前後に引用符(")を表示させます。after疑似要素を使えば済む話なのですが、IEは対応していないのでJavaScript(jQuery)を使用します。動作デモこの部分は引用です。IEにも前後に引用符が表示されるはずです。HTMLソースは以下のようになっています。<q>この部分は引用です。IEにも前後に引用符が表示されるはずです。</q>ソース以下のコードをhead内に書き込んでください。{$(this).before('&quot;');$(this).after('&quot;');});});</script><![endif]-->条件付きコメントを使用してIEにだけスクリプトを実行させます。7で正常に動作することを確認しています。FirefoxやOperaなどの引用符と違うのは実際に表示されているのが「文字」のため、例えばコピーするときなどに引用符が含まれてしまいます。画像などを使えばこの問題は回避できますが、あまり大した問題には思えないので文字のままです。気になる方は&quot;の部分に画像(img)タグを入れるなどしてください。<q>タグの後に引用元へのリンクを作る<q>タグにcite属性でURIが指定されていると、自動で引用部分の末尾にリンクを作成します。囲まれた部分が引用文であることを表します。HTMLソースは以下のようになっています。囲まれた部分が引用文であることを表します。</q>このBlogでは画像を呼び出してリンクに使用していますが、今回のコードでは「*」を使用しています。同じように画像が使いたい方は、「*」部分を画像に置き換えるなどしてください。挙動とソースは以下のページ・サイトを参考にして作成(改造)させていただきました。はてなダイアリーにはこれと同じ機能が標準搭載されている。ソース以下のコードをhead内に書き込んでください。--></script>JavaScriptがOFFの環境だとリンクが作られないため、ページ内のどこかに普通のリンクを最低一つは作っておいた方がいいでしょう。上記のカスタマイズを同時に使用する場合、IEではhead内に書き込むScript(コード)の順序によって、リンクが引用符の中・外のどちらに表示されるのか変わり*3ます。順序が気に入らない場合は任意でコードの順番を入れ替えてください。IE以外ではリンクは必ず引用符の外に表示される。)この記事へのレスポンスURL:タイトル:HTMLタグ:トラックバック(0)コメント(0)DISQUSFC2ブログが不正なXHTMLを直してくれた件についてFC2ブログ用の共有テンプレートが公開されました記事への反応この記事へのコメントコメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。URLこの記事にトラックバックする(FC2ブログユーザー)スパム対策のため、この記事へのリンクのないトラックバックは受信されません。Disqusブログロール空気を読まない中杜カズサブログ名の設定は、まだ。「メルペイ残高」はどう使うのがスマートでお得か?3つのルートから考える「コード決済」は進化か退化か。自分でQRコードをスキャンして初めて実感できた“存在意義”IIJmio(みおふぉん)を解約したのでSIMカードを返却。