instagramの写真をアメブロなどのブログに表示する方法

instagramの写真をアメブロなどのブログに表示する方法

アメブロなどのブログにInstagramの写真を簡単に表示する方法をご紹介します!

SnapWidgetを使って表示する

無料で使える「SnapWidget」というツールを使って表示します。

以下のリンクからアクセスしてください。

SnapWidget
https://snapwidget.com

「GET YOUR FREE WIDGET」ボタンを押してスタートです。

初めて作成する時は、「SnapWidget」のアカウント登録が必要になります。

アカウント名、メールアドレス、パスワードを入力して新規登録してください。

(または、Facebookアカウントでも登録できます)

登録が完了するといろんなスタイルのウィジェットが表示されます。

人気のウィジェットスタイルが表示されてます。

「BROWSE ALL WIDGETS」ボタンを押すと、もっと沢山のスタイルが表示されます。

今回はグリッドスタイルとスライドショースタイルの説明をします。

グリッドスタイルの場合

グリッドスタイルのところにある「CREATE YOUR FREE WIDGET」を押します。

各種設定をしていきます。

Username

instagramのアカウント名を入れます。
入力する際にinstagramへのログイン画面が開くので、instagramのログインIDとパスでログインしてください。

Description

今回のウィジェットの説明文を設定できます。
写真と一緒に表示されるわけではないようで、
管理画面のダッシュボードに表示されます。
複数のウィジェットを設定した時に管理しやすくなります。

Thumbnail Size

ブログに合わせて写真の大きさを設定することができます。
デフォルトは125pxです。

Layout (Columns X Rows)

写真の数を設定できます。
横の枚数×縦の枚数で設定します。

Photo Border

Yesにすると写真に枠線が入ります。

Background Color

背景色に色をつけることができます。
#から始まるカラーコードで指定します。

Photo Padding

写真の間の隙間を設定できます。

Hover Effect

写真にマウスを乗せた時の動きを設定できます。

 None… 変化なし
 Fade In… 最初が少し薄くなっていて、マウスを乗せると濃くなります。
 Fade Out… マウスを乗せると薄くなります。
 Zoom in… マウスを乗せるとだんだん拡大します。
 Likes&Comments… マウスを乗せるといいねとコメント数を表示します。
 Sharing Buttons… マウスを乗せた時にシェアボタンを表示することができます。

Responsive

レスポンシブ対応になります。スマホ対応のブログなどではYesにしてください。

アメブロの新テンプレート(プロフィール写真が丸いタイプ)のサイドバーのサイズは300pxです。

アメブロに貼る場合は、写真のサイズや写真の隙間を調整して300pxになるようにします。

 

設定が完了したら設定画面右下にある「GET WIDGET」ボタンを押して、表示されたコードをコピーしてください。
コピーしたコードを配置したいブログの場所にペーストします。

アメブロの場合は、「フリープラグイン」にペーストします。
「フリープラグイン」はアメブロ管理画面の「設定・管理」の中にあります。

 

 

スライドショースタイルの場合

スライドショースタイルのところにある「CREATE YOUR FREE WIDGET」を押します。

各種設定をしていきます。

Username

instagramのアカウント名を入れます。
入力する際にinstagramへのログイン画面が開くので、instagramのログインIDとパスでログインしてください。

Description

今回のウィジェットの説明文を設定できます。
写真と一緒に表示されるわけではないようで、
管理画面のダッシュボードに表示されます。
複数のウィジェットを設定した時に管理しやすくなります。

Thumbnail Size

ブログに合わせて写真の大きさを設定することができます。
デフォルトは125pxです。

アメブロに貼る場合は300pxがいいですね。

Photo Border

Yesにすると写真に枠線が入ります。

Background Color

背景色に色をつけることができます。
#から始まるカラーコードで指定します。

Hover Effect

写真にマウスを乗せた時の動きを設定できます。

 None… 変化なし
 Fade In… 最初が少し薄くなっていて、マウスを乗せると濃くなります。
 Fade Out… マウスを乗せると薄くなります。
 Zoom in… マウスを乗せるとだんだん拡大します。
 Likes&Comments… マウスを乗せるといいねとコメント数を表示します。
 Sharing Buttons… マウスを乗せた時にシェアボタンを表示することができます。

Responsive

レスポンシブ対応になります。スマホ対応のブログなどではYesにしてください。

 

設定が完了したら設定画面右下にある「GET WIDGET」ボタンを押して、表示されたコードをコピーしてください。
コピーしたコードを配置したいブログの場所にペーストします。

アメブロの場合は、「フリープラグイン」にペーストします。
「フリープラグイン」はアメブロ管理画面の「設定・管理」の中にあります。

 

まとめ

「SnapWidget」を使って簡単にInstagramに設定できる方法をご紹介しました。

WordPressに貼る場合はプラグインを使ったり、テーマに用意されていたりと様々ですが、アメブロに貼る場合はこの「SnapWidget」を使って表示してみてくださいね。

 

 

 

お役立ちカテゴリの最新記事