新しくサイトをオープンしました!

「好きに書いていいノート」をコンセプトに

自分だけの最高なノートを作ろう!

人生を楽しく綴り、未来を設計して行くんだよ!

 

SNS

ブログにInstagramをサイズ変更して表示させる方法。

投稿日:2016-05-06 更新日:

 

ma-you(マユ)@aromusica です。

 

ブログでInstagramを表示させる方法をまとめました。

アメブロやSNSはInstagramを投稿する際、同時にシェアできるのですが、

 

パソコンでInstagramを自分のブログやホームページに載せてみました。

 

記事にInstagramを表示させる。

Instagramをパソコンでログインし、記事に表示させたい写真をクリックします。

 

表示された画面の右下にある「。。。」をクリックすると「埋め込み」という文字が出てきます。

 

1

 

埋め込みをクリックするとコードが表示されるのでコピーします。

 

2

 

「キャプションに追加」はInstagramを投稿した際に書いたテキストを表示させる、させない を選びます。

 

コピーしたコードをテキスト入力で記事に貼りつけるとこんな感じになります。

 

表示の変更

サイズ

ちょっと大きい気がするので、表示のサイズを変えることにしました。

 

ma-you(マユ)さん(@suki2note_life)がシェアした投稿 -

 

先程instagramでコピーしたコードの中にある max-width: 540px

ここの数値を変更します。

 

max-width: 300px

300pxでこの大きさになります。ちなみにキャプション無しの表示です。

 

中央に寄せる

サイズを変更したらバランスが悪い感じがしたので、表示を中央にしてみました。

先程サイズ変更した max-width: 540pxの前にある 

margin: 1px;1px  →  autoに変更します。

 

2018/08 追記

「margin」を修正しても中央表示されなくなったので、以下のコードでコピーしたコードを挟みます。

<div align="center">

コピーしたコード貼り付け

</div>

 

 

ma-you(マユ)さん(@suki2note_life)がシェアした投稿 -

 

この場合コピーしたコードの「margin」は変更せずそのままでOKです。

 

まとめ

埋め込みコードの取得自体は簡単にできるのですが、そのまま載せると大きすぎるので、

お好みのサイズで調整した方が見やすいと思います。

 

instagramのブログパーツもオシャレに表示できるのでオススメです。

関連記事

>>>Instagramのブログパーツをサイトに設置する方法。

 

 

この記事が気に入ったら
いいね ! しよう

Twitter で

関連記事



  • この記事を書いた人
  • 最新記事
マユ

マユ

元バンドマンが10年のブランクを経て音楽活動をネットで再開し、DTMで楽曲制作したり、音楽ブログ運営してます。

-SNS
-

Copyright© るしるし , 2018 All Rights Reserved Powered by AFFINGER5.