引用タグの使い方と装飾方法

公開日：2017.06.16
更新日：2024.04.05
Tom
SEO
CSS HTML SEO
0

この記事は約4分0秒で読めます

他人が作った文章や画像などを自分のページに引用する時は、それがはっきりと引用だとわかる形でマークアップしておく必要があります。

この時に使うのが引用タグで、<blockquote>がよく知られていますが<q>タグなんてものもあります。

<q>と<blockquote>の役割の違いとは
引用時に出典元を明記する方法
著作権上の引用の定義とは

<q>と<blockquote>の役割の違いとは

<q>タグは改行が不要なほど短い文章を引用する時に使用します。補足説明を作る時に対象の用語名につける、とか。
ブラウザによって差がありますが基本的に<q>タグをつけたものはデフォルトでダブルクオーテーションやカギカッコがつけられるようです。

<blockquote>タグは最も一般的と思われる引用タグで、段落やフレーズを丸ごと引用する場合などに使用します。

引用時に出典元を明記する方法

<cite>タグを使って出典元のURLを併記することができます。このタグを使うと標準で文字（特にアルファベット）が斜体（イタリック）になります。

使用例

<blockquote>
これは引用文です。
<cite>出典：トムとロイド<a href="https://tomandroid.com/" target="_blank">(tomandroid.com)</a></cite>
</blockquote>

表示: これは引用文です。
出典：トムとロイド(tomandroid.com)

装飾方法（N1テーマの場合）

blockquote {
    margin: 0 0 24px 0;
    padding: 27px 30px 1px;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px 0px rgba(0,0,0,0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
}
blockquote cite {
    border-top: 1px dotted #aaa;
    display: block;
    padding: 20px 0 0 0;
    font-style: italic;
    text-align: right;
    font-size: 90%;
}

このCSSはHYBRID THEME N1の<blockquote>及びその子要素として記述された<cite>タグに適用されるものです。

このようにWordPressのテーマによっては<blockquote>にデフォルトでCSSが適用されていることがあるので確認が必要です。

ダッシュボードからstyle.cssを見るよりも簡単に調べるには、投稿の下書きに<blockquote>を使用してプレビューし、Chromeのデベロッパーツールでタグを見ます。

著作権上の引用の定義とは

自分も含めて"誰かが作ったもの"には著作権が発生します。

著作権について詳しくは述べませんが、簡単にイメージするなら盗作を防止するための権利です。

他人が作ったものを勝手に使用すると著作権に違反するとはよく言われますよね。

しかしインターネットが発明されてから既に半世紀が経過した現在、他の作品に一切影響を受けていない「完全オリジナル」の著作物など世の中に存在しないという意見もあります。

じゃどうするか？何かを作るたびに、それぞれの情報の著者を調べてイチイチ許可取ってたら進まないですよね。

そこで引用を使います。この定義は著作権法32条に記されています。

1.公表された著作物は、引用して利用することができる。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。
2.国若しくは地方公共団体の機関、独立行政法人又は地方独立行政法人が一般に周知させることを目的として作成し、その著作の名義の下に公表する広報資料、調査統計資料、報告書その他これらに類する著作物は、説明の材料として新聞紙、雑誌その他の刊行物に転載することができる。ただし、これを禁止する旨の表示がある場合は、この限りでない。
著作権法第32条 - Wikibooks

もうちょっと噛み砕いて、できるだけ適切に、引用相手に迷惑をかけないように引用を行うための方法は次のようになります。

どうしても引用しないと話が進まない、引用を行う「必然性」があること
自分のオリジナルの文章が「主」、引用部分は「従」である
引用部分は、ハッキリと他の部分と区別されている
引用部分を勝手に改変していない
引用させてもらった出典元が明記されている

ちなみにこの5箇条も引用です。出典元はこちら：正しい「引用」のルールと著作権について | ビジネスwebデザインアカデミー

いくらルールに則ればOKとはいえ、引用だけで出来たものを「自分の記事」と呼ぶことはできません。必ず主従関係、具体的には、引用部分よりも自分の文章のほうがボリュームが多くなる必要があります。

また、引用を行う際は「ここからここまでの文章は引用です」と誰が見てもわかる形にしておくのがベストです。このために<blockquote>タグを使用します。

なお引用を行う際は、必ず引用元と同じ形式にしておく必要があります。CSSなどの装飾部分まで合わせる必要はないと思いますが、勝手に追記したりして情報やその意図を改変してはいけません。もう少し大袈裟にいうと、引用部分に変換ミス等を見つけても極力そのまま掲載し、注釈をつける等で対応することもあるかと思います。

そして肝心なこととして、引用させてもらった場合「オリジナル」がどこにあるかは明記しましょう。先程、<blockquote>の中に入れた<cite>タグで示したようなやつもそうですし、よく画像などの近くやホームページの最下段に置かれている © マーク（コピーライト）も似た意味を持ちます。