BLOCKQUOTE: 引用・転載を表すタグ

一部の方には「釈迦に説法」ですが、WordPress の記事の編集画面で Blockquote (引用) の使い方の話です。

Blockquote-1

笑ころ試作のページに投稿の引用タグの記事が載っていたので補足のつもりで書いています。

「HTML/XHTML & スタイルブック」に載っていないので、いつもの Web検索で探してみました。
HTMLタグリファレンスを見ると次のように載っていました。

<BLOCKQUOTE>~</BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。
<BLOCKQUOTE>タグは、比較的長めの文章を引用・転載する際に使用します。 改行を必要としない程度の短い文章を引用・抜粋する際には、<Q>タグを使用してください。

Internet Explorer等の一般的なブラウザでは、<BLOCKQUOTE>~</BLOCKQUOTE>で囲まれた部分は 上下に1行分のスペースが挿入され、左右もインデント(字下げ)され、上下左右にスペースが空きます。

 

ただし、インデントさせることを目的に<BLOCKQUOTE>タグを使用するのは誤りです。 インデントが目的の場合にはできるだけスタイルシートを使用してください。 スタイルシートでは、<div style=”margin: 10px”>~</div>などと記述します。

ブログの場合には、Webサイトの記事の引用をすることがよくあるので、編集ボタンとして用意されているのかもしれませんね。
他には、こんな記事もありました。

<blockquote>タグを使って枠線を表示する方法が、いろいろなブログで紹介されています。

しかし、<blockquote>タグは本来「引用」のためのタグです。

引用以外の目的で<blockquote>タグを使用すると、
HTMLタグを見てブログを読んでいるGoogleのクローラーや視覚障害者用の読み上げソフトなどをダマすことになってしまいます。

 

via:  研Q5.文章を枠で囲む方法(HTML<div>タグのstyle属性で色、太さ、線種など自由自在に)

最後にもう一つ

鳩丸ご意見番 – なぜ BLOCKQUOTE でインデントしてはいけないのか

いろいろ勉強になりました。(勉強中?)

【追記】 Blockquote のスタイルが変更されているようなので、比較のために2つのテーマで同じ記事を書いてみました。

BLOCKQUOTE: 引用・転載を表すタグ” への2件のコメント

  1. blockquoteを引用以外で使うと、音声で聞いている方などには混乱の種になるわけですね。なるほど勉強になりました。ありがとうございます。
    他にもそのように使いたいと思われる人がいるということ、嬉しくなっちゃいました。私も、ここだけをマークしたいときに、なんていいタグでしょうと、使い始めたんです。初めは文字の色を変える程度で。

    htmlを作れるのならdiv id=box とかにして作ることができるけど、無理ですもんね。PHPで作ればOKなのかしら。blockquoteをboxに変えればよさそうだけど。でも皆さんに使ってもらうことができなしし。

    違うわ、インラインで命令すれば、できるかもしれない。無理かな・・・・ 表を入れればいいのだけど、難解になるし。何か良い方法はないかしら?? 笑ころネットのサークル紹介で使いたいのです。

  2. 早速 blockquote のスタイルが変わっていますね。ありがとうございます。
    囲み記事のようなものを作りたいということですが、「wordpress 囲み記事」 で検索してみるといろいろありますね。
    条件としては、初心者が使えるように、できればビジュアルエディタだけで編集できると良いので、少しハードルは上がりますがショートコードで対応することを考えてみませんか。Youtube の動画の埋め込みで使った [キーワード] ・・・・ [/キーワード] という書き方です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です