こんにちは。 ジロウです。
今回はブログに埋め込んだInstagram画像がパソコンで表示される際の、サイズ（大きさ）を調整する方法について、ご紹介します。
それほどの需要はないと思うけれど・・・
「ブログに埋め込んだときのInstagram画像の表示が大きすぎる！」
なんて思う方もおられるかと思います。
スマホで表示される場合には自動調整されるから気にならないんですが、パソコンで表示すると、ちょっと気になることがありますよね。
これって、ブログ閲覧者の7割以上がスマホからのアクセスだし、気にする必要もないとは思うんです。
でも、なんとなく “すわり” が悪い・・・なんて感じる僕のような方もおられるはず。
そこで、Instagramを埋め込む際に、その大きさを指定する方法をご紹介します。
インスタグラムをブログに埋め込む方法おさらい
まずは、インスタグラムをブログに埋め込む方法のおさらいです。
大人気のアーティスト、アリアナ・グランデさんのインスタ画像を例に説明しましょう。
別にファンってわけじゃないけど・・・。
皆さん、目的のインスタグラム画像を見つけたら、次のいずれかの方法でブログに埋め込んでいることと思います。
① ブラウザのURLをブログにコピペする
② 右下の「・・・」をクリックし、埋め込みコードを取得してブログにコピペする
今回は、②の方法で、取得した埋め込みコードに手を加えることで、表示サイズを好みのサイズに変更していきます。
インスタグラムの埋め込みサイズを調整する方法
ブログに埋め込んでパソコン表示すると、メインカラムにドデンと大きく表示されるInstagram画像・・・。
これは、その横幅を指定してやることで、全体的なバランスを保ちつつ縮小表示することが可能なんです。
方法は、ものすごく簡単です♪
取得した埋め込みコードを、そのままブログに貼り付けると次のように大きく表示されますよね。
でも、同時にTwitterを埋め込む場合など、見た目を考えて、できればサイズを合わせたい・・・なんて場合もあるかもしれません。
その際には、WordPressのエディターに貼り付けた上記のコードの、次の部分を修正してやります。
例えば、Twitterの埋め込みサイズに合わせたいとすれば、デフォルトで
「max-width:658px」
となっているものを、
「max-width:498px」
と書き換えてやります。
すると、パソコン画面での表示は次のようになります。
これを、同じく埋め込んだアリアナ・グランデさんのTwitterと比較すると・・・
Self-belief & self-expression. Proud to partner with @Reebok who shares the same beliefs that I hope to instill in my babes ?? #ArianaxReebok pic.twitter.com/ll7fm49hN3
— Ariana Grande (@ArianaGrande) 2017年9月13日
だいたい同じサイズに修正することができました♪
ちなみに、Twitterを埋め込む場合のサイズ変更は、ちょっと難しいみたいなんです。
なので、Instagram画像をTwitterに合わせるのが、見た目にも整っていてよろしいかと思われます。
もっと小さく表示したい！ というなら、先ほどの数値を小さくすればOKです。
こうして考えてみると、パソコン用語って覚えてしまえばいろいろ楽しいものなのかもしれないですね。
かなり真剣に取り組まなければならないだろうけど・・・。
ま、今回の件は用途は少ないかもしれませんが、知識として覚えておいても損はないと思いますよ。
コメントを残す