Instagram

こんにちは、WebマーケッターのYoshimiです。Web解析や分析が好きです!

YoutubeやTwitterの貼り方は良く紹介されていますよね。instagram(インスタグラム)の貼り方を調べちますと「自動投稿」「API連携」などあるのですが、今回はヒトのインスタグラムの写真をWordPressで表示するときに使えるプラグイン【oEmbed Instagram】のご紹介です。

【oEmbed Instagram】の使い方

使い方は至って簡単
URLを貼付けて終わります。
noins0111CSSもなにも設定していない場合は、こんなに大きく表示されてしまいます。
(上記はサンプルのため画像)

ですので、CSSで調整してみます。

サイズを変更するとき

htmlソースを確認すると、上記画像は

<div class="oembed-instagram">
 <iframe src="//instagram.com/p/1mi67HtUki/embed" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
</div>

となっております。

htmlソースoembed-instagramがありますので、これに対してCSSを設定していきます。

.oembed-instagram{
	width:320px !important;
}

と記述してみました。

すると

From @pegleg_jack: "💭This is your bed she said. Be nice to the kitty she said…" #catsofinstagram

A photo posted by Cats of Instagram (@cats_of_instagram) on


と調整ができました。下に表示される部分が表示されていないです。(ノД`)・゜・。

PC閲覧時、スマホでもこのサイズでも320pxです。画面サイズごとに変更したい場合@mediaでレスポンシブル対応のCSSを設定しましょう。

その他・まとめ

いかがでしょうか?
まとめサイトの構築とかでインスタグラムの写真を利用したり、Twitterの投稿利用したりと、引用(出典?)を上手に利用することでブログの質や信憑性が高まっていくと思いますよ♪

oEmbed Instagram

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です