インスタグラムをHPに表示させる超簡単な方法

こんにちは

当サイトの主。鈴木です。

今回の記事はインスタグラムをHPやブログに埋め込みたいという方の為に

その方法を書きます。

ブログへのインスタの埋め込みが出来るこのサイト、使い方とても簡単です。

やり方はたったの2ステップ！

＜手順＞

①の部分にユーザーネームを入れる

②の「Get Widget」ボタンを押す

これで埋め込みコードの作成は完了です！

あとは出来上がったコードをコピー

HTMLの表示させたいところにコードを貼り付けて完成！

とても簡単ですね！

表示方法は5パターン。それぞれのパターンを簡単にご紹介。

「Widget Type」選択

これから紹介するパターンはこちらですべて選択できます。

何もいじらない状態で、アカウント名を入力してコードを作るとこうなります。

①の「Layout」のボタンで行と列の数を指定できて、

②の「Responsive」のボタンでレスポンシブル

に変更できます。

スマホで表示することも考えると「Responsive」はYesにしといた方がいいですね！デフォルトではNoになってるのでご注意を！

シェアボタンも、デフォルトで表示されるように設定されています。

Widget Typeを「Board」に変更すると文字が画像の下に出現

その名のごとくスクロールされながら表示されます。

スライドショーなのですが微妙です。

地図が出ます。写真のとった位置情報ばっちりです。

使いません。

マウスをインスタの画像に合わせた時に、ちょっとエフェクトを入れたい場合は「Hover Effect」を使用してみるといいです。

種類は「none」「Fade in」「Fade out」の3種類！

「none」はマウスを画像に合わせても何も反応しません。

「Fade in」を選択すると、マウスを画像に合わた時に「はっきり」

「Fade out」を選択すると、マウスを画像に合わせた時に「薄く」

以上で簡単ですが終了します。