【5分で完了】Instagramお気に入り写真をブログに貼り付ける方法

2017年11月20日

こんにちは!お城の街・姫路のホームページ屋さん うえのです。

 

Instagramのタイムラインをブログ連携する方法を紹介しました。

 

記事にもお気に入りの写真だけを貼り付けたい。

 

お気に入り写真だけを貼り付けるのは、タイムラインを埋め込み連携するよりもカンタンです。

 

さっそく、紹介していきますね。

 

 

Instagramの写真をブログに貼り付ける方法

 

 

貼り付ける方法のステップ

1)PC版のInstagramを開く。

2)好きな写真を選ぶ。

3)写真の埋め込みコードをコピー。

 

 

1)PC版のInstagramを開く。

 

PC版のInstagramを使っている人は、1)は飛ばしてください。

 

① Instagramのログイン画面から、このままFacebookでログインをオススメします!

 

 

※ InstagramとFacebookが相互連携させておくとで後々楽チンなんです。

 

PCでこのリンクをクリック する

 

 

Instagram

 

 

② Facebookでログインをクリック!

 

 

Instagram

 

 

 

③ PC版Instagramの画面になりました。右上の人間マークをクリック!

 

 

Instagram

 

 

 

2)好きな写真を選ぶ。

 

① 自分のInstagramページが出るので、好きな写真をここで選びます。

 

白い花の写真を例に説明をしていきます。


赤わくの写真をクリックする!

 

Instagram

 

 

② 画面右下の・・・をクリック!

 

 

Instagram

 

 

 

③ 埋め込みをクリック!

 

Instagram

 

 

 

3)写真の埋め込みコードをコピぺ

 

① 「埋め込みコードをコピー」をクリック!

 

 

Instagram

 

 

 

キャプション付きはこんなに感じ。

 

ポーチは自作のハンドメイド。

uenohidekiさん(@hikaru.dayon)がシェアした投稿 –

 

 

キャプションなしはこんなに感じ。

 

uenohidekiさん(@hikaru.dayon)がシェアした投稿 –

 

 

キャプションについて

キャプションとは、いいねやコメントの数、コメント内容など写真以外の情報。

上の投稿は、キャプションをつけています。

写真だけを貼り付けたい場合は、「キャプションを追加」のチェックを外してからコピー。

 

 

② ブログやウェブページの好きな場所に貼り付ける。

 

【ワードプレスの場合】テキストモード

【アメブロの場合】HTML表示

 

 

それぞれ変更して、コードを貼り付けてください。

ここ以外に貼るとコード文字がそのまま出てきます。

 

 

コピーしたままのコードを貼り付けると、Instagramの投稿は画面いっぱい。

 

 

スマホになれば小さく表示されるんですが、少し大きすぎますよね。。。

スマホでもPCでも見やすいとされるのが 300px って大きさ!

貼り付けたコードの数字を書き換えてみましょう。

 

 

 

⬇ max-width:658px(最大658pxの大きさ)がデフォルト設定 ⬇

 

 

ポーチは自作のハンドメイド。

uenohidekiさん(@hikaru.dayon)がシェアした投稿 –

 

 

コピーしたままのコードをちょい変更する

 

 

Instagram

 

 

大丈夫です!コード見て、パニックにならないで

 

たくさん訳わからん文字と数字があるけど、赤のマーカーのところだけ見つけてください。

あとは無視でいいです!

 

 

マーカー部分の半角数字を658から300に変えて、保存したらいいだけ。

 



300pxにすると、こんなに小さくなりますよ(^^♪

(スマホ表示では大きな写真も勝手に縮小。PCから見ると一目瞭然。)

 

hikaru3.comさん(@hideki.dayo)がシェアした投稿 –

 

 

 

Instagramの写真をブログに貼り付けるまとめ

 

いかがでしたか?Instagramのあなたのお気に入りの写真だけを、ブログに貼りつける方法を紹介しました。

 

タイムラインを埋め込み連携するよりもカンタンでしたね。

 

少しコードの数字を変えてもらいましたが、慣れると自分の好みの大きさにも変更出来ます。

 

さっそく、挑戦して素敵なページを作ってくださいね。

 

うえのでした★