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

HP作成方法, ホームページ作成教室

こんにちは

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

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

その方法を書きます。

 

SnapWidget(スナップウィジェット)

snapwidget.com

 

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

やり方はたったの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」を選択すると、 マウスを画像に合わせた時に「薄く」

 

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