「音楽×テクノロジー」の話題を中心に、DTM、iPhone・iPad・Mac、最新テック情報、ガジェット・書評レビューなんでも書きます。ガンガンいこうぜ!みんなの訪問を、全力で待ってます。

7.29.2017

ブログで引用するときに使ってるHTMLテンプレート教えるぞって話


ブログで文章 画像を引用で使ってるHTMLテンプレートを教えるぞ

どうも、サウンドオルビスです。

ブログ記事で文章や画像を引用したいんだけど、どうすればいいのかわからない。なんとなくブログサービスの機能に従われるままやってるけど、本当にこれで合ってるのかな〜?ってことありますよね。

今回は、あなたのブログで引用するときに使えるHTMLテンプレートを、教えちゃいます。コピペで使えるように、整えたHTML掲載しておきますので、どうぞお使いください。

文章を引用するときのHTMLテンプレート

夕食の準備をしてる忙しい時にもかかわらず、息子からの LINE スタンプに返信してくれて、ありがとう。ママぁ〜ん(☝︎ ՞ਊ ՞)☝︎

友人と母に「DTMerのためのスタンプバンドル」実際にLINEしてみたって話 より引用

他のサイトの文章を掲載する場合は、上記のように掲載してください。HTML の構造は、以下のようになっています。

 

<blockquote>
 <p>引用する文章</p>

 <p>
  <cite>
  <a href="リンクURL">サイトのタイトル</a>
  </cite> より引用
 </p>
</blockquote>

解説すると、以下のとおりです。

  1. <blockquote></blockquote> で、全体を囲う。
  2. 画像のimg内には、alt属性で引用であることを記載する。
  3. 画像の下部には、「〜より引用」として、引用元を示す
  4. <cite></cite> タグで、ページタイトルを囲う。
  5. 引用元のページタイトルなどには、リンクを貼る。

<cite></cite> タグでタイトルを囲うことを忘れがちなので、気をつけてください。

デザインで引用と分かればいいとの意見もあるんですが、検索クローラーには理解できないので構文はしっかり書いた方がSEO的にもメリットがありますよ。

 

画像を引用するときのHTMLテンプレート

友人と母にDTMerのためのスタンプバンドルを実際にLINEしてみたって話

画像出典:友人と母に「DTMerのためのスタンプバンドル」実際にLINEしてみたって話

他のサイトの画像を掲載する場合は、上記のように掲載してください。HTML の構造は、以下のようになっています。

 

<blockquote>
 <p>画像</p>

 <p>画像出典:
  <cite>
  <a href="リンクURL">サイトタイトル</a>
  </cite>
 </p>
</blockquote>

解説すると、以下のとおりです。

  1. <blockquote></blockquote> で、全体を囲う。
  2. 画像のimg内には、alt属性で引用であることを記載する。
  3. 画像の下部には、「画像出典:」として、引用元を示す
  4. <cite></cite> タグで、ページタイトルを囲う。
  5. 引用元のページタイトルなどには、リンクを貼る。

ここまでやる必然性がなければ、自分で画像を用意するか、著作者に許可をとった方がいいですね。

今回の正しい画像を引用するときのやり方について、「株式会社 イノバース」様の記事を参考にさせていただきました。

参考:ブログ記事で著作権のある画像や写真の正しい引用の書き方

 

条件をしっかり守って正しく引用しよう

[1]引用する資料等は既に公表されているものであること、
[2]「公正な慣行」に合致すること、
[3]報道、批評、研究などのための「正当な範囲内」であること、
[4]引用部分とそれ以外の部分の「主従関係」が明確であること、
[5]カギ括弧などにより「引用部分」が明確になっていること、
[6]引用を行う必然性があること、
[7]出所の明示が必要なこと

文化庁 著作権なるほど質問箱 より引用

たとえ今回のHTMLテンプレートを使用して、ただしく引用の体裁を保ったとしても、文化庁が掲げる 7 つの引用の要件を満たさなければ引用とみなされず「無断転載」となってしまいます。

十分に気をつけて、他のサイトの文章や画像を引用したいですね。

 

それじゃあ、サウンドオルビス(@soundorbis)でした。

soundorbis
このブログを書いてる人
サウンドオルビス フリーBGM アーティスト

よく一緒に読まれている記事

以前の記事  以前の記事
新しい記事  新しい記事