こんにちは
当サイトの主。鈴木です。
今回の記事はインスタグラムを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」を選択すると、 マウスを画像に合わせた時に「薄く」
以上で簡単ですが終了します。
コメント