インスタグラムをHPに表示させる超簡単な方法
こんにちは
当サイトの主。鈴木です。
今回の記事はインスタグラムをHPやブログに埋め込みたいという方の為に
その方法を書きます。
SnapWidget（スナップウィジェット）
ブログへのインスタの埋め込みが出来るこのサイト、使い方とても簡単です。
やり方はたったの2ステップ！
＜手順＞
①の部分にユーザーネームを入れる
②の「Get Widget」ボタンを押す
これで埋め込みコードの作成は完了です！
あとは出来上がったコードをコピー
HTMLの表示させたいところにコードを貼り付けて完成！
とても簡単ですね！
表示方法は5パターン。それぞれのパターンを簡単にご紹介。
パターン1．Grid
「Widget Type」選択
これから紹介するパターンはこちらですべて選択できます。
何もいじらない状態で、アカウント名を入力してコードを作るとこうなります。
①の「Layout」のボタンで行と列の数を指定できて、
②の「Responsive」のボタンでレスポンシブル
に変更できます。
スマホで表示することも考えると「Responsive」はYesにしといた方がいいですね！デフォルトではNoになってるのでご注意を！
シェアボタンも、デフォルトで表示されるように設定されています。
2．Board
Widget Typeを「Board」に変更すると文字が画像の下に出現
3．Scrolling
その名のごとくスクロールされながら表示されます。
4．Slideshow
スライドショーなのですが微妙です。
5．Map
地図が出ます。写真のとった位置情報ばっちりです。
使いません。
詳細設定
マウスをインスタの画像に合わせた時に、ちょっとエフェクトを入れたい場合は「Hover Effect」を使用してみるといいです。
種類は「none」「Fade in」「Fade out」の3種類！
「none」はマウスを画像に合わせても何も反応しません。
「Fade in」を選択すると、マウスを画像に合わた時に「はっきり」
「Fade out」を選択すると、 マウスを画像に合わせた時に「薄く」
以上で簡単ですが終了します。