SNSの投稿を自サイトに埋め込み引用する方法

    icon-clock-o読了時間:約11分8秒

著名人や企業のInstagramのポスト(投稿)、
あるいはTwitterのツイートを自分のブログ記事などに引用させてもらいたい時。
インスタでもTwitterでも、簡単な操作をするだけで、
投稿を引用して自サイトに埋め込むことができます。

 目次 

著作権や肖像権の侵害について

Instagramの投稿を引用して埋め込む
  ∟横幅サイズを調整したい時は
  ∟max-widthを50%にした場合の例

Twitterの投稿を引用して埋め込む
  ∟ツイート埋め込み例

投稿を横並びに埋め込む
  ∟tableの枠線を消したい場合


著作権や肖像権の侵害について

他人が作成・撮影した画像を直接保存した画像や、
スクリーンショット撮影した画像を勝手に使用することは
著作権侵害、肖像権侵害、パブリシティ権侵害などの犯罪です。

特に最近はスマホを使ってスクショを手軽に撮影できるようになったので
有名人のSNS投稿、誰かのペットの写真、アニメ動画のスクショといった画像を
そのまま自分のSNSやブログに無断転載する人も多いのですが、
肖像権を持つ被写体や著作権を持つ個人・団体が許可を出していない状態で
他人が画像や動画を使用することは法律で禁じられています。

そうした盗用を行っている人達がなぜ捕まらないかというと、
・盗用者が多すぎて全員を捕まえたり訴えたりすることがほぼ不可能
・芸能人や企業であればファンや消費者に対してあまり厳しく出られない
これが主な理由です。

つまりグレーゾーンで見逃されている状態なので、
肖像権を持つ本人、および商用権利を持つ所属事務所や企業がその気になれば
画像を無断転載した人をいつでも訴えることが出来ますし、
『 10年以下の懲役又は1,000万円以下の罰金 』 の刑罰が課されることもあります。

SNSやブログにおいて、こうした画像盗用を行っている人は
基本的にそのキャラクターや芸能人のファンで、応援のつもりで、
あるいはファン同士の交流のために画像をアップすることが多いと思います。
しかしそれは
あなたの好きな人が、あなたの犯行を見逃してくれている
状態だということを忘れないでください。
そんな状態で 「 ファンです、応援しています 」 と、
胸を張って言えるかどうかを考えてみてください。

SNSや映像作品のスクショを撮影したとしたら自分が眺めて楽しむだけに留め、
SNSの投稿に対して反応したい時は公式のリポスト機能やリツイート機能を使い、
投稿を自分のサイトに引用したい時は、以下で説明する方法できちんと引用してください
SNSの運営企業が公式で用意している埋め込み方法で自サイトに引用するのであれば、
元の投稿者や投稿された先が埋め込まれた先でもきちんと確認できるため、
芸能事務所や権利会社も画像の盗用にはあたらないと認めてくれている場合がほとんどです。

※ただし、InstagramやTwitterのプロフィール欄などに
『 投稿内容の無断転載は禁止です 』 と記載しているユーザーの場合や、
企業が 『 キャラクターの画像が含まれるSNS投稿内容の無許可転載は禁止 』 というような
規定を公表している場合には、埋め込み機能を使っての無断引用を
許可していないということになります。
引用させてもらいたいアカウントさんのプロフィール等を
きちんと確認してから埋め込み引用してくださいね。


Instagramの投稿を引用して埋め込む

自サイトに埋め込みたいポストを開く
⇒右下の【 icon-ellipsis-vertical 】をクリック(スマホの場合はタップ)
⇒【 埋め込み 】をクリック。
Instagramの投稿をコード引用で埋め込む1
コード欄をクリックしてから右クリック
⇒【 すべてを選択 】⇒【 コピー 】
⇒自サイト内のポストを埋め込みたい箇所に、コピーしたコードを貼り付ければOKです。
Instagramの投稿をコード引用で埋め込む2
※【 キャプションを追加 】のチェックを外すと、
 ポスト内のテキスト(文章)は省いて、写真や動画のみを埋め込むことができます。
※【 埋め込みコードをコピー 】では上手くコピーできないことがあるため
 右クリック操作でコピーしたほうが確実です。

横幅サイズを調整したい時は

コード内のピクセル数を変更すれば、埋め込みサイズを変えることができます。
コードの最初の方、style指定の 『 max-width:658px; 』 と書かれている部分を
『 max-width:300px; 』、『 max-width:50%; 』 といったように
お好みのサイズに変更してください。

max-widthを50%にした場合の例

max-width、つまり最大横幅を50パーセントにしたことで
表示領域の50%の幅になるように自動調整して表示されます。
当ブログでいえば、メインの部分(この文章が書かれている、背景が白い部分)の
横幅を100%として、その半分の幅で表示されるということですね。

この!こんにゃろ!にゃんだ!こいつ! …僕たちちょっと太ったかにゃ。 体が重いにゃ。気のせいかにゃ… 昔はこんな奴すぐ捕まえれたのににゃ。ふぅ。疲れたにゃ。 #ドスンドスン #ねこ #ネコ #猫部 #ねこ部 #にゃんすたぐらむ #cat #cats #catstagram #catsofinstagram #scottishfold #スコティッシュ #スコティッシュホールド #メインクーン #mainecoon #ラガマフィン #Ragamuffin #猫のいる生活 #幸せ #しあわせ #大家族 #多頭飼い #family #仲良し #スロー猫動画 #スローねこ動画 #furbo #mau #かまいたち #かまいたち山内

かまいたち山内と、猫たちさん(@kamaitachi.neko.6.neko)がシェアした投稿 –


ちなみにこちらはお笑いコンビ“かまいたち”の山内さんが飼っている猫さんのアカウントです。
スコティッシュフォールド2匹、メインクーン4匹の計6匹の可愛い画像が見られます。
もふもふがいっぱい(ΦωΦ)♡


Twitterの投稿を引用して埋め込む

自サイトに埋め込みたいツイートを開く
⇒右上の【 icon-chevron-down】をクリック(スマホの場合はタップ)
⇒【 ツイートをサイトに埋め込む 】をクリック。
Twitterの投稿を引用して埋め込む
コード欄をクリックしてから右クリック
⇒【 すべてを選択 】⇒【 コピー 】
⇒自サイト内のツイートを埋め込みたい箇所に、コピーしたコードを貼り付ければOKです。
Twitterの投稿を引用して埋め込む
※【 メディアを含める 】の部分のチェックを外すと、
 ツイートに含まれる写真や動画を省いて、テキストのみ引用表示することができます。

ツイート埋め込み例


よしこさんが飼っているパグのめーちゃん🐶
めーちゃんをモデルにした4コマ漫画 『 めー語 』 が最高に可愛く面白いです。
もちろんリアルのめーちゃんも表情豊かで可愛い。
弊社の看板犬もパグなので親近感。
Twitterでパグ飼いの皆さんの投稿を見ていると、
同じパグでも表情も体格も色々なんだなと感じます。


投稿を横並びに埋め込む

横並びに2つの投稿を並べたい場合は、基本的にtableタグを使います。

ただし、サイト・ブログに適用しているCSSのスタイルによっては
埋め込んだSNSに指定されているスタイルとぶつかってしまったり、
借りているテーマのCSSを邪魔してしまったりして、
サイトの他の部分のレイアウトが崩れる可能性があるので注意が必要です。
HTMLタグやCSSにまだ不慣れな方は慎重に編集してくださいね。

Instagramからの投稿埋め込みを横並びさせるとこうなります。
こちらはカラパイアという情報サイトの管理人・パルモさんの飼い猫さん達です。
素敵な毛並み。可愛い。

フュージョンしとくか #もも #けも #cats #フュージョン #猫 #合体

パルモさん(@omurap)がシェアした投稿 –

Twitterのツイートを並べるとこんな感じ。
こちらは弊社のツイートです。パグはいいぞ。


tableの枠線を消したい場合

通常、tableタグで表を作ると、黒の実線で枠線が表示されます。
上記の例のように枠線を非表示にしたい場合は
HTMLのtableタグに class指定をし、CSSでclassのスタイルを記述します。

こちらは記述の一例。
『 table-sns 』 の部分はお好みのclass名に変更して大丈夫です。
お使いのCSSファイルの内容や、この記述を追加した位置によっては、
これでも枠線が消えないことがあるので記述を工夫してみてくださいね。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket