るしるし

元バンドマンが音楽活動再開して余生を生きてます

SNS

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

更新日:

 

こんにちは。るしる(@646blog)です。

 

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

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

 

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

 

記事にInstagramを表示させる。

 

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

 

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

 

1

 

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

 

2

 

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

 

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

オッパイ炒めとは?

Lucirさん(@lucir_arock)が投稿した写真 -

 

表示の変更

サイズ

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

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

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

 

Lucirさん(@lucir_arock)が投稿した写真 -

 

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

 

中央に寄せる

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

先程サイズ変更した max-width: 658px の前にある margin: 1px; 

 

1px  →  0 auto

 

に変更します。

 

 

300px 中央で表示する場合は

 

margin: 0 auto; max-width: 300px;

 

と、なります。

 

 

まとめ

 

ブログでのinstagram表示は初めて行ったのですが、簡単にできました!

 

見るだけでも楽しいinstagram。

 

私もまったり更新しておりますので、

興味のある方はこちらからどうぞ!

 

Instagram

 

Intstagramをサイドバーなどに表示させる、ブログパーツの作り方はコチラ
 
 
Instagramのブログパーツをサイトに設置する方法。
 

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

Twitter で

    関連記事    

-SNS
-

Copyright© るしるし , 2017 AllRights Reserved Powered by AFFINGER4.