初心者でも超簡単!インスタグラムをブログに埋め込む方法

こんにちは
FUJIWARA NO OWARI(@romio19911005)です。 

人のブログを見ていてインスタが丸ごと貼られている記事に遭遇したことはありませんか?

いままさにインスタを丸ごと貼る事に憧れていて、マネしたいと思い調べてみました。

フジガミ様
でたよミーハー男
ふじぴ
ミーハーというより記事の完成度が高く見える気がするんだ

インスタグラムの個別投稿をサイトに表示させる方法

インスタの個別投稿をサイトに表示させる方法を紹介します。

完成イメージはこちら↓↓ 

ふじぴ
さっそく埋め込み方を解説していきまshowtime!
フジガミ様
兄さんそれはキツイって・・・

インスタグラムで埋め込みコードを取得する

インスタの個別投稿をサイトへ貼りつけるには、Instagramのサイトをパソコンで開きます。

ふじぴ
普段携帯でしかみないからパソコンで見るのはなんか新鮮!!

パソコンで自分のインスタに入れたら、記事に貼りたい画像をクリックしてください。

クリックするとこんな感じの画面になると思います。

次に個別投稿画面の右下の「…」のボタンをクリックしてください。

真ん中の「埋め込み」をクリック!!

すると下の画面に切り替わるので「埋め込みコードコピー」をクリック

「埋め込みコードがコピーされました」というメッセージに変わればOK!

フジガミ様
これを記事の好きな所に貼り付ければいいのだな!

埋め込みコードのサイトやブログへの貼り付け方法

ここからはインスタで取得した個別投稿の埋め込みコードをサイトへ貼り付けます。

今回はワードプレスで個別記事に埋め込む場合を紹介します。

まずはワードプレスの管理画面から「投稿」→「新規追加」を選択します。

そうするといつも記事を書く画面が開かれると思います。

そこから「テキスト」を選択し、ビジュアルモードからテキストモード(HTML編集)へ変更してください。

ここまで来たら後は楽勝です!!

先程Instagramで取得した埋め込みコードを
Ctrl + V(Macの場合はcommand + V)で貼り付けます。

ふじぴ
前職で唯一身についたスキルがまさにこれでした→Ctrl + V
フジガミ様
でた!Ctrl + CからCtrl + Vのコンボ!!

こんな感じでコピペすれば完成です!!
超簡単ですよね!!

埋め込みした写真のサイズを変えたい場合

ふじぴ
埋め込みはできたけど写真でかすぎ!!

たぶんほとんどの人がそう感じると思います。

そんな時の解決策もご紹介しておきます!!

先程埋め込んだコードを見てみて下さい。
このコードの2行目あたりに 「max-width: 658px」 と書かれています。

これは「横幅を最大658ピクセルで指定してね♪」という意味ですので
この数字を変更すればオッケーです。

今回は試しに、この「max-width」の数字を「400」に変更してみました。

そうすると見事に小さくなりました!

 

 

ふじぴ
これでインスタの画像も変幻自在に操れるね!

まとめ

インスタをブログに埋め込む方法を紹介してみましたがいかがだったでしょうか。

思っていたより簡単だったと思います。

初心者でも絶対できます!!

流行りのインスタをブログに埋め込んで一流ブロガー目指しちゃいましょう!!

 

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください