ブログでInstagramを表示させる方法をまとめました。
アメブロやSNSはInstagramを投稿する際、同時にシェアできるのですが、
パソコンでInstagramを自分のブログやホームページに載せてみました。
記事にInstagramを表示させる。
Instagramをパソコンでログインし、記事に表示させたい写真をクリックします。
表示された画面の右下にある「。。。」をクリックすると「埋め込み」という文字が出てきます。
埋め込みをクリックするとコードが表示されるのでコピーします。
「キャプションに追加」はInstagramを投稿した際に書いたテキストを
表示させる、させない を選びます。
コピーしたコードをテキスト入力で記事に貼りつけるとこんな感じになります。
表示の変更
サイズ
ちょっと大きい気がするので、表示のサイズを変えることにしました。
この投稿をInstagramで見る
先程instagramでコピーしたコードの中にある max-width: 540px
ここの数値を変更します。
max-width: 300px
300pxでこの大きさになります。ちなみにキャプション無しの表示です。
中央に寄せる
サイズを変更したらバランスが悪い感じがしたので、表示を中央にしてみました。
先程サイズ変更した max-width: 540pxの前にある
margin: 1px;を1px → autoに変更します。
2018/08 追記
「margin」を修正しても中央表示されなくなったので、以下のコードでコピーしたコードを挟みます。
<div align="center">
コピーしたコード貼り付け
</div>
この場合コピーしたコードの「margin」は変更せずそのままでOKです。
まとめ
埋め込みコードの取得自体は簡単にできるのですが、そのまま載せると大きすぎるので、
お好みのサイズで調整した方が見やすいと思います。
instagramのブログパーツもオシャレに表示できるのでオススメです。
関連記事
>>>Instagramのブログパーツをサイトに設置する方法。
