【コピペでOK】Instagramの埋め込みのサイズ調整方法【WordPress】

こんにちは! しばみーです。

ブログにInstagramの投稿を入れたい、ということが増えたんですが、そのまま埋め込むとバカでかくなってしまいますよね?

サイズを調整する方法を自分のメモ用に記事に残しておきます。

 

Instagramの投稿から素敵な画像を見つけるコツも最後に書きましたよー。

Instagramの画像を埋め込みたい

埋め込みの作業自体は知っているという方は次へお進みくださいね。

 

Instagramの投稿の中から、ブログに入れたい投稿が見つかりました。

ブログに貼りたい投稿が見つかったら画像をクリック。すると、下記のように拡大画面になります。

Instagramの投稿の画面キャプチャ

今回はこの投稿の埋め込み用コードを探したいと思います。

 

下の画面をご覧ください。

「・・・」と地味なボタンがありますが、これが埋め込み用コードを吐き出すためのボタンです。

このボタンをクリック。

Instagramの投稿画面から埋め込みに進むためのボタンを示す画像

すると下の様な画面が出てきます。

投稿するか埋め込むか、キャンセルかを選ぶ画像

「Embed」をクリックしましょう(発音記号:ɪmbéd、埋め込むって意味そのまま)。

はい、埋め込み用コードが出てきました。

埋め込み用コードを出す画面キャプチャ

青いボタンをクリックすればコードをすべてコピーできるので、そのままWordPressに貼りましょう(HTMLが効く画面、WordPressなら「テキスト」タブに貼ってくださいね!)

 

デフォルトで「Include caption」にチェックが入っています。キャプションを付けるか付けないかなので、お好きにどうぞ!

ちなみにキャプションとは下記の赤で囲った部分のことです。

Instagramの投稿のキャプションを示す画像

Instagramの投稿のサイズを調整する

埋め込み用のコードは超長文なんです。

例えば上記のInstagramの投稿の埋め込み用コードは下記の通りです。

<blockquote class=”instagram-media” data-instgrm-captioned data-instgrm-permalink=”https://www.instagram.com/p/BbteCBLloFD/” data-instgrm-version=”8″ style=” background:#FFF; border:0; border-radius:3px; 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);”>

・・・以下延々と続く

上記コードの中に「max-width:658px」という一文があるのがわかりますでしょうか?

ちょっと大きくしてます(本当は太字ではないし大きくもないです)。

 

ここをちょちょいといじるとサイズが調整されますよ!

元のサイズ(埋め込みコードそのまま)

まずはサイズをいじらない、埋め込みコードそのままの大きさがこちら。

これ、PCで見るといいんですけど、スマホやタブレットだと大きいんですよね。

元のサイズは、横幅が最大658pxという設定になっています。

横幅300pxまで

この最大658pxを、最大300pxに修正します。

埋め込みコードの中の「max-width:658px」を、「max-width:300px」に書き換えます。

もちろんコピペで大丈夫ですよ!

 

するとこんな感じになります。


うん、悪くないんじゃないでしょうか。

横幅元のサイズの30%まで

ピクセルの数字を自分で書いてもいいですし、画面サイズの何%かの大きさにするっていう指定もできます。

埋め込みコードの中の「max-width:658px」を、「max-width:30%」に書き換えます。

こちらもコピペでOK。

 

するとこれくらいの大きさ。

いい感じですね!

下記のサイトはスマホでの操作方法を書かれていましたよ。ご参考に。

参考

instagramの埋め込みタグでサイトやブログに写真を表示させる方法インスタグラム使い方

Instagramで自分の欲しい画像を探す方法

最近、素敵な画像が欲しいときにInstagramやtwitterから探すことが増えました。

もともと無料画像サイトはあまり使いたくなかったこともあるんですが、誰かのブログと画像がかぶったりしないためにも投稿から探すといい感じです。

 

特に、英訳してみるといい画像がたくさん出てきますよ! おすすめ。

例:ビアサーバーの写真が欲しい場合

「#」を頭につけて、自分の知りたい単語を検索します。

英語で2語以上になる場合は「#beerserver」とくっつけますよ。

さっそく探してみましょう。

Instagramで「#ビアサーバー」と検索:1,119 posts

日本語で探したら1119件見つかりました。自分の家っぽい画像が多いですね。

Instagramで#ビアサーバーと検索した画面キャプチャ。

Instagramで「#beerserver」と検索:1,283 posts

英語で探してみたら1283件。件数は同じくらいですが、ブログに載せやすい画像が多い気がします(お姉さんは使えないけど)。

Instagramで#beerserverと検索した画面キャプチャ

Instagramの投稿で画像を検索、よろしければ一度試してみてくださいね!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください