引用にスタイルを適用する

引用のルールと根拠
今まで、引用に関して深い注意は払っていなかったのですが、もっと注意して引用すべきだと感じました。
そこで引用に関して、どのようなルールや根拠があるのか調べてみました。

1番の根拠となるのは、著作権法です。
著作権法の引用の要件を満たしていない場合は、違法な無断転載とみなされます。

著作権法の第32条に、引用に関する規定があり、その範囲内なら権利者に無許可で引用を行うことができ著作権法の違反にならないそうです。

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


また、同法の第48条には、引用の出所の明記に関する規定があります。

同法 第48条(出所の明示)
1 次の各号に掲げる場合には、当該各号に規定する著作物の出所を、その複製又は利用の態様に応じ合理的と認められる方法及び程度により、明示しなければならない。
 一 ~三 〔略〕
2 前項の出所の明示に当たつては、これに伴い著作者名が明らかになる場合及び当該著作物が無名のものである場合を除き、当該著作物につき表示されている著作者名を示さなければならない。
3 〔略〕


また、引用する際の注意点として、文化庁ホームページに「著作物が自由に使える場合」が掲載されています。
全文は長いので、特にポイントとなる部分の「(注5)引用における注意事項」だけを引用します。

他人の著作物を自分の著作物の中に取り込む場合,すなわち引用を行う場合,一般的には,以下の事項に注意しなければなりません。
(1)他人の著作物を引用する必然性があること。
(2)かぎ括弧をつけるなど,自分の著作物と引用部分とが区別されていること。
(3)自分の著作物と引用する著作物との主従関係が明確であること(自分の著作物が主体)。
(4)出所の明示がなされていること。(第48条)
(参照:最判昭和55年3月28日 「パロディー事件」)

引用元:文化庁「著作物が自由に使える場合」
(注5)引用における注意事項 

こういった、ルールや根拠があるのですね。
著作権法や文化庁の注意事項の説明はここではしませんが、引用する場合には注意が必要ですね。

※以上の3つの引用文の作成は、ウェブリブログで私が使用しているテンプレートで、引用のタグ<blockquote></blockquote>を使って表示しました。
※この中で、引用元の部分は<cite></cite>タグを使用しました。自動的に右寄せになります。
また引用元にリンクを貼っています。


引用タグの使用に関して
そこで、ブログで引用する場合は引用である旨をハッキリ明記して、引用タグを使用することが重要だと思ったのです。

ウェブリブログの引用タグを使ってみて気づいたのですが、このタグは文化庁の注意事項の内容を受けて、忠実に表現されていると思います。

このウェブリブログの基本的な引用スタイルのポイントは、3つあると思います。
■引用の3つのポイント
1 (2)を受けて、引用を示す引用符の「”」が文頭についている
2 (2)・(3)を受けて、引用文が本文より右にインデントされている
3 (3)を受けて、引用が本文に比べ少し控えめのスタイル
もう1点加えるなら、4 (4)を受けて、引用元を右寄せで表示している
ということだと思います。
※(2)(3)(4)は文化庁の引用文の項目番号です。


少しスタイルを変えたい場合
ウェブリブログ標準の引用で十分だとは思いますが、もし少しスタイルを変えたい場合の話です。
例えば、
・色彩が、テンプレートデザインに合わない。
・引用符をもっと引用符らしくしたい。
・モノクロにしたい。
・別のスタイルにしたい。
・もう少し凝ったスタイルがいい。
といったときには、CSSを使って引用スタイルを変えることができます。

以下に事例をいくつか紹介します。
以下の引用文のスタイルは、「サルワカ」の引用を紹介するページで使われていたスタイルを使いました。

※一部スタイルを変えたものがあります。
※引用文は、ラテン語文を使いましたが、表示だけのためであり特別な意味はありません。

※以下に紹介する事例では、FontAwesomeの引用符を表示しているものが多いです。

FontAwesomeの引用符を使うとのような表示が出来ます。
表示角度を変えると、色を変えると、サイズを変えるとのようになります。さらにアニメーションを加えるとのようになります。
ぜひFontAwesomeを使ってみてください。

※FontAwesomeのデータは、JPEGやPNGなどのビットマップの画像データとは異なり、イラストレーターで扱うベクターデータと同じで「SVG」と表記されていることが多いです。

FontAwesomeの引用符を使用しないで、全角文字により引用符を表示しているものもありますが、この場合は、閲覧環境により表示が変わります。
表示が変わっても気にしなければ、問題はありません。
FontAwesomeを使用しなくても、色々な引用スタイルを設定できます。

※FontAwesomeの各種のアイコンのようなフォントはFontAwesomeの「Stsart for Free」から無料版を使えます。(初回だけ登録作業があります。)
ダウンロードして使うのではなく、リンクして使用する形になりますので、PCの容量は気になりません。

以下の事例のCSSでは、引用タグ<blockquote>とその中のpタグに対して、スタイル指定をしています。
HTMLの引用文の書き方は、CSSのスタイルを使うために、「class=""」にクラス名を記述することでスタイルを適用します。
クラス名を空欄にすると、標準で用意されているスタイルになります。

基本的なスタイル
<blockquote class="">
<p class="">(引用文)</p>
</blockquote>
※class=""の「""」の中には、CSSで設定したクラス名が入ります。
クラス名はCSSの記述の中で「.」(半角ピリオド)に続く名前がクラス名です。

引用元を表示するスタイル
<blockquote class="">
<p class="">(引用文)</p>
<cite>(引用元)</cite>
</blockquote>

引用元にリンクを貼るスタイル
<blockquote class="">
<p class="">(引用文)</p>
<cite>(引用元)<a(引用元url)></a></cite>
</blockquote>


事例の目次
ここでは、17項目28種類の引用スタイルを紹介します。
それぞれの項目にジャンプします。

目次・各項目にジャンプします
1 上側に引用符が付くシンプルな引用(2種)
2 左側に引用符が付くシンプルな引用(2種)
3 少しスマートに枠で囲む(2種)

4 背景を付ける(2種)
5 引用符をボックス上に(2種)
6 引用符を白抜き(2種)

7 引用符の背景の角を削る(2種)
8 ホックスの角に丸い引用マーク(2種)
9 メリハリのある引用スタイル(2種)

10 メリハリと背景を薄くした引用(2種)
11 引用符を左上に爽やかに配置(1種)
12 引用符を丸で囲ったスタイル(1種)

13 引用符を吊り下げたスタイル(1種)
14 引用符リボンで少し華やか(1種)
15 引用符紙を横から折り込む(1種)

16 引用符紙を上から折り込む(1種)
17 引用符を背景にかわいい配色(2種)


※今回は、項目が多いのでソースの表示はしませんが、コメント欄から要望(28種類ありますので、項目番号と上・下で特定をお願いします。)があればそれについては対応したいと思います。
quote-1375855_1280.png
Mary PahlkeによるPixabayからの画像


1 上側に引用符が付くシンプルな引用
<FontAwesameを使う>
FontAwesameの引用符を使うことで、引用符らしいデザインになる

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

引用元:サルワカ

<FontAwesameを使わない>
FontAwesameの引用符を使っていないので、普通の引用符のデザインになる
引用符に色を付け、背景を明るく

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


2 左側に引用符が付くシンプルな引用
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>
モノクロバージョン

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


3 少しスマートに枠で囲む
2のスタイルを、左側の縦線を取り罫線枠を付け少し左寄りに
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


4 背景を付ける
4のスタイルに、背景を付けたもの
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>
罫線枠を付けたもの

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


5 引用符をボックス上に
引用符をボックスの上に出し、全体を右寄りに
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


6 引用符を白抜き
1のスタイルに、引用符を白抜き、背景色を少し付けたもの
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


7 引用符の背景の角を削る
地味だが、背景の左上の角を三角形に削ったもの
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


8 ボックスの角に丸い引用マーク
白地に罫線枠、引用符は2か所に
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使う>
モノクロバージョン

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


9 メリハリのある引用スタイル
左の縦線を太くし、その中に引用符を入れたもの
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


10 メリハリと背景を薄くした引用
13の枠を無くし、背景色を付けたもの
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>
モノクロバージョン

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


11 引用符を左上に爽やかに配置
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


12 引用符を丸で囲ったスタイル
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


13 引用符を吊り下げたスタイル
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


14 引用符リボンで少し華やか
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


15 引用符紙を横から折り込む
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


16 引用符紙を上から折り込む
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る


17 引用符を背景にかわいい配色
<FontAwesameを使う>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ

<FontAwesameを使わない>

(引用文)At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

引用元:サルワカ
目次に戻る

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 34

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • tor

    こんばんは。
    ありがとうございます。
    私のためにまとめていただいたと
    勝手に解釈しています。
    私はウエブリブログからFC2へ移動したのですが
    ウエブリブログの方が初心者には優しいような気がします。
    FC2は自由度はあるのですが
    なかなか使いこなせてないのが実情です。
    私の方はしばらくこのままで行かざるをえないのですが
    少しずつ前進したいと思います。
    2019年10月13日 18:04
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    実はピンポン!そうなんです。
    torさんに引用のことで色々、好き勝手なことを言ったので、参考になればいいなと思いながらまとめました。
    FontAwesameは余興のようなものなので、今は使わなくていいと思います。将来の話に取っておいてください。
    torさんのコメントの最後の言葉「少しずつ前進」の気持ちさえあれば、大丈夫だと思います。
    FontAwesameを使わないスタイルでもし使ってみたいものがあれば、どれか指定していただければ、そのソースを示したいと思います。torさんのページでそのまま使えると思います。
    そして、そのCSSのソースは、ブログの本文のどこにでも、コピペするだけで効果を発揮するはずです。実際にこの記事のあちこちにCSSの記述が書かれていて「HTML→CSS→HTML→CSS・・・」の繰り返しで、20回ぐらいのサンドイッチ状態になっています。
    2019年10月13日 22:46
  • フラバーバ

    いろいろな 細かいことは よくわからないですが
    引用における注意事項 をシッカリ守って 行かなければ
    と強く思いました。
    2019年10月15日 14:19
  • わけい

    フラバーバさんへ
    コメントどうもありがとうございます。
    引用の表示って重要なことだったんですね。
    自分の文と、他人が書いた引用した文とをハッキリと分かるように区別して表示するということが、大切だということが私自身も分かりました。
    2019年10月16日 11:14