HTML & CSS - blockquote タグ

基本的な使い方

blockquote タグは、他ページからの引用・転載したテキストであることを表します。引用元のアドレスが存在する場合は cite 属性で URL を指定できます。

<p>福沢諭吉の「学問のすゝめ」の冒頭は、以下のように始まります。</p>
<blockquote cite="https://www.aozora.gr.jp/cards/000296/files/47061_29420.html">
    <p>天は人の上に人を造らず人の下に人を造らず</p>
</blockquote>
blockquote タグの基本的な書き方

福沢諭吉の「学問のすゝめ」の冒頭は、以下のように始まります。

天は人の上に人を造らず人の下に人を造らず

ブラウザ表示

blockquote タグを使うと、通常は字下げされてブラウザに表示されます。

より厳密な書き方

より厳密な書き方をするには figure タグ、figcaption タグ、cite タグを組み合わせて記述します。

figure タグ
その部分だけで意味が成り立つ独立したコンテンツを表します。
figcaption タグ
figure タグのキャプション（注釈）を付けるために使用します。
cite タグ
引用された作品名やタイトルを表します。
<figure>
    <blockquote cite="https://www.aozora.gr.jp/cards/000296/files/47061_29420.html">
        <p>天は人の上に人を造らず人の下に人を造らず</p>
    </blockquote>
    <figcaption>
        引用元: <cite>学問のすゝめ</cite>
    <figcaption>
</figure>
blockquote タグの厳密な書き方

上記の書き方は、全体を figure タグで囲み独立したセクションにしています。その中に、引用文を表す blockquote タグと、脚注を表す figcaption タグ、そして作品名を表す cite タグで構成しています。

使用上の注意

blockquote タグを使うと、通常は字下げされてブラウザに表示されます。ただし、装飾を目的に blockquote タグは使用しないでください。装飾のために字下げを行う場合、 CSS の margin-left プロパティなどを使用してください。

.blockquote {
    margin-left: 2rem;
}
CSS で字下げを行う例

引用・転載と著作権

blockquote タグで引用する場合、著作権で認められる範囲内で引用を行ってください。詳細は、公益社団法人著作権情報センターのページを参照してください。

外部リンク

コピーコンテンツ

著作権の範囲を超えてページの大部分がコピーコンテンツである場合、Google はユーザに付加価値をほとんど提供しない低品質なページであると判断します。もしも、そのような判断がされた場合は、手動による対策を受けて検索結果のランキング順位が大幅に低下します。手動による対策を受けているかどうかは、Google Search Console から確認できます。

コピーコンテンツによる手動対策
コピーコンテンツによる手動対策
外部リンク

外部リンク

外部リンク