ブログにインスタ画像を埋め込み引用したらレイアウト崩れ!SANGOや賢威でも!

今回は、Wordpressでブログを運用しているブロガーさんに!ブログにInstagramの画像を引用して埋め込んだら記事本文と重なってレイアウトが崩れてしまった!という時の解決方法をご紹介します。

ひとみん

Aloha!ひとみんです。僕はWordpressのテーマは「賢威」と「SANGO」を使っていますが、レイアウト崩れはどのテーマでも起こります!どうやらテーマの問題ではないんですね・・・。

ブログにインスタの投稿を引用するのは視覚的にブログにアクセントをつけることができるので非常に有効ですよね。

ツイッターなんかも同じようにブログに投稿されている人も多いと思います。

今回は、インスタグラムの埋め込み引用時に起こるレイアウト崩れの対処法と、いまさら聞けない著作権についてまとめてご紹介します。

インスタ引用時のレイアウト崩れの解決方法

ぶっちゃけ解決方法についてはしっかりサルワカさんのカスタマイズガイドを見ろ!って話なんですよね。

参考

記事にツイートやInstagram、YouTube動画を埋め込むサルワカ

この問題の原因はWordPressの新バージョンのバグ、もしくはinstagramの埋め込みコードに含まれているスタイルのせいと思われます。

なので、下記のCSSをstyle.cssに追記すれば解決されます。

インスタ用レイアウト崩れ修正CSS
.instagram-media {
    position: static!important;
}

ひとみん

説明書を見ないで進めるって悪い癖は昔から治らない・・・皆さんは注意しましょうね♪(たぶん僕はなおらないし手遅れ)

実際にこの今回のレイアウト崩れは以下の記事作成時におきました。

ForYourNewLifeは主に異世界・転生作品を中心にアニメや漫画、小説を紹介します。

メイクの口コミや評判って最近の女子はインスタからレビューを見てる!って人が多いそうですね。

なので引用したのですが・・・こんなんなりました!!

なんじゃこりゃ!!記事が見えん!!!・・・ってことで「助けてサルワカさ~ん!!」てなもんですよ(_)

で無事解決♪サイズもちょっと変更して今の状態になりました(^_^)

ただ、サイズについてはまだ納得がいってませんので、これからもちょこちょこ調整していこうと思っています。

AMPやモバイルページなど、利用状況に応じてサイズも変えていかないとって感じですね。

スポンサードリンク

ブログにインスタを引用することのメリット

ブログの記事にインスタの投稿を引用することは、最初に言った通り視覚的にもアクセントをつけられるので非常にメリットがあります。

ひとみん

やっぱり画像があったほうが見栄えもよくなりますし、ブログは見た目も大事ですからね(*^_^*)

視覚面以外の主なメリットとしては、

・一般人の生の意見やレビューが見れるので、情報の信頼性が向上する
・SEO的に記事にボリュームが出せ、ページ内の滞在時間を増やすことが可能

などがあげられると思います。ただ、これがメインになってしまうとただの引用なので意味はありません。

あくまでも自分の意見の補足として利用することが望ましいでしょう。

このあたりはまだ僕も実験中なので今後もデータを取っていこうと思います。

スポンサードリンク

スポンサードリンク

ところで他人の投稿って引用してもいいの?著作権は?

さて、インスタやツイッターの投稿を利用する上で気になるのが著作権の問題でしょう。

まずはこちらのインスタグラムの著作権についての記事を見ていただきたい。

参考

まとめサイト迷惑料、インスタグラムは対象外 被害者「なぜ?」withnews

ここでの内容を見る限り、

・ツイッターの引用はOK
・インスタグラム、フェイスブックの引用については引用の要件を満たせば問題ない(引用の要件を満たさない場合は許諾が必要)

と言えるでしょう。

使用方法についての注意ですが、ここでも書かれていますがコンテンツの権利は利用者が有します。そのため埋め込みリンク以外での引用(直リンクや画像を複製しての引用)はNGです。

また、使用するからにはインスタ投稿者の意図と異なる使い方をしないことは絶対に守らなければなりません。

ひとみん

使わせてもらうなら、両者にとってWINWINな関係を構築する努力をしましょう。

一応ツイッターとインスタグラムの利用規約をご紹介します。

ユーザーは、本サービス上にまたは本サービスを介してコンテンツを送信、投稿または表示することによって、当社があらゆる媒体または配信方法(既知のまたは今後開発される方法)を使ってかかるコンテンツを使用、コピー、複製、処理、改変、修正、公表、送信、表示および配信するための、世界的かつ非独占的ライセンス(サブライセンスを許諾する権利と共に)を当社に対し無償で許諾することになります。このライセンスによって、ユーザーは、当社や他の利用者に対し、ご自身のツイートを世界中で閲覧可能とすることを承認することになります。ユーザーは、このライセンスには、Twitterが、コンテンツ利用に関する当社の条件に従うことを前提に、本サービスを提供、宣伝および向上させるための権利ならびに本サービスに対しまたは本サービスを介して送信されたコンテンツを他の媒体やサービスで配給、放送、配信、プロモーションまたは公表することを目的として、その他の企業、組織または個人に提供する権利が含まれていることに同意するものとします。

twitter / サービス利用規約

このように、ツイッター側で定めているリツイートや埋め込み機能を利用することについての許諾を明文化しています。

しかし、インスタグラムの場合は若干異なります。利用規約を読んでも、

Instagramは、利用者が本サービスに、またはこれを通じて投稿するいかなるユーザーコンテンツについても、その所有権を主張しません。ただし利用者は、利用者が本サービスに、またはこれを通じて投稿するユーザーコンテンツを、Instagramがhttp://instagram.com/legal/privacy/に掲載されている本サービスのプライバシーポリシー(引用者:中略)に従って利用する、非独占的かつ無料、譲渡可能かつ再許諾権付きの世界的使用許諾を付与するものとします。利用者は、前述のプライバシーポリシーに記載されている方法で利用者のユーザーコンテンツおよび活動内容(利用者の写真を含みます)の共有範囲を選択することができます。

利用規約 | Instagramヘルプセンター

というように、しっかりとした明文がありません。ただ、インスタの機能として埋め込み機能を搭載している以上は、投稿に対して埋め込みを利用することは問題ないと考えられます。

また、公開範囲の設定やコンテンツの削除などのコントロールも利用者側が握っていますので、問題であれば非表示にすることも可能です。

ひとみん

もちろん引用要件にかかわらず、事前に相手に「使ってもいいですか?」と許諾を得ることが一番なんですけどね。僕もできてません。すいません。

それでもクレームが来たら?

説明したとおり、ツイッターやインスタグラムの投稿について埋め込み機能を使った引用については問題ないと思われます。

ひとみん

もちろん法律の専門家ではないので法律家の先生によってはダメ!って人もいますし今後変わる可能性もあります。

それでもクレームが来ることってありますよね?

たとえばツイッターでもあるユーザーさんの「無許可RTやめてください」という発言が一時話題になりましたよね?

中にはこうした規約等を理解していない方もいますので、クレームがくるという可能性は”0″ではありません。

もし「勝手に使わないで!」というクレームが来た場合は埋め込み引用を解除し、規約について説明すればよいでしょう。

規約的に問題がないとしても、やはり相手を不快にさせたことについては真摯に対応する必要がありますから、しっかりと納得していただけるようにしましょう。

法律関係者の見解としては以下の記事が参考になると思います。

参考

Instagramにアップした写真の著作権はどうなってしまうのか五常法律会計事務所

是非一読してみてください。

スポンサードリンク

【小技】インスタグラムの埋め込み引用時の画像サイズの変更方法

最後にちょっとだけ小技を紹介します。

インスタの画像を引用した時ってそのままコードを記事内に入れると表示が結構大きくないですか?これはインスタ画像のデフォルト表示サイズがが658px(ピクセル)に設定されているからです。

このままだとちょっと大きいですし、スマホなどのモバイルでの閲覧が主流な現在、あまりメリットがないですよね?

そんな時はこの画像表示サイズを変更することでサイズを小さくして表示させることが可能です。

やり方は簡単。まず下記のインスタグラムの埋め込みコードからmax-width:658px;を探しましょう。

~~~box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”>~~~

この“658px”となっている数値を変更します。サイズはそのブログや見せ方によりますのでコレ!というのはありませんが、例えば「300」や「450」などに変更すると、実際の表示も小さくなります。

【デフォルトの場合(658px)】

【サイズを変更した場合(300px)】

インスタ画像でかすぎ!って人は試してみてくださいね。

スポンサードリンク

スポンサードリンク

インスタもメリットを知って正しく利用しましょう♪

いかがでしたか?

今回は、インスタグラムの画像を埋め込み引用した時のレイアウト崩れについての対応と著作権の問題、そして小技を紹介しました。

少しでも参考になった!と言ってもらえたらありがたいですね(^_^)

個人ではインスタは利用しているのですが、ほとんど子育て日記で・・・もうちょっといろいろアップしたいですね。

インスタ映えってよく聞きますけど、なかなか意識して撮影できないし、ちょっとその辺はあきらめ気味です。

でも、インスタの投稿をブログに引用するのはメリットも多いと思いますので、これからも正しく利用していきたいと思います。

これからもいろんなSNSやサービスなども登場してくると思いますので、しっかりとチェックしていきたいと思います。

最後までありがとうございました!Mahalo!

コメントを残す

メールアドレスが公開されることはありません。