ネットと副業

副業が本業の収入を大きく超えたので会社やめました

Instagram アメブロ

【Instagram】インスタグラムをアメブロのサイドバーに表示させる方法

投稿日:

f:id:nekonkeo:20140920113117j:plain

自分のインスタグラムの投稿一覧を、アメブロのサイドバーに表示させて、ブログ見れてくれる人にもインスタ見てほしいですよね。

そんなあなたの欲求を満たしてくれる、アメブロにインスタグラムを表示させるために設定方法です。

自分のインスタグラムの一覧をとりにいく

まずインスタグラムの投稿一覧をゲットするためにSnapwidgetを使います。


サイトにアクセスしてトップページの「Get Your Free Widget」のボタンをクリックするか、下にスクロールするとこんな入力画面がでます。

f:id:nekonkeo:20150412204009j:plain

アメブロに入れ込んだ際にどういう見た目や機能をつけるかなどを決められる画面です。ちょっとしたエフェクト機能も変更できますが、今回はとりあえずアメブロにインスタグラムの一覧が貼れればOKってことで。以下の様に設定します。
(アメブロのデフォルトの3カラムデザインの右に入れる想定です。)

f:id:nekonkeo:20150412204632j:plain

1.Username 
自分のインスタグラムのアカウント名を入れます。

2.Thumbnail Size
145px
インスタグラムに投稿した写真1枚のサイズをどのくらのサイズにするかの設定です。

3.Layout
2×2 
表示する写真を、横・縦に何枚ずつ表示させるかです。アメブロのサイドバーが狭いので、2枚ずつにします。

4.Photo Padding
5px
写真と写真の間の余白になります。

アメブロの右サイドバーのサイズが横300pxなので、写真1枚145px+余白5px+写真1枚145px+余白5px=300pxという計算でございます。

入力できたら、「Get Widget」をクリック。

すると「おまえのウェブサイトに、これをコピペしやがれ」的なメッセージが表示されますので、表示された、HTMLタグをコピーします。

f:id:nekonkeo:20150412204706j:plain

アメブロのセッティング

とにもかくにも、アメブロにログインします。

ログインできたら、「設定・管理」ページに入ります。

f:id:nekonkeo:20150412204858j:plain

「設定・管理」ページの画面下の方にある、「プラグインの追加」をクリック。

f:id:nekonkeo:20150412204937j:plain

タブがあるので、「フリープラグイン」を選びます。
テキストを入力できるスペースがあるので、さきほどSnapWidgetでコピーしたタグをここにペーストします。
ペーストできたら、スペース下の「保存」をクリックして保存します。

f:id:nekonkeo:20150412205053j:plain

 

 

「設定を保存しました」の画面が出ます。ちょっと分かりにくいですが、「新たに〜」の文章の最後、「こちら」がリンクになっているのでクリック。

f:id:nekonkeo:20150412205214j:plain

「サイドバーの配置設定」画面がでるので、「使用しない機能」欄にある「フリープラグイン」をドラッグして、インスタグラムの画像一覧を入れたい箇所に入れ込みます。できたら「保存」をお忘れなく。

f:id:nekonkeo:20150412205345j:plain

ブログを確認してみましょう。

f:id:nekonkeo:20150412205443j:plain

できました!!

アメブロのデザインテンプレートによって、サイドバーのサイズが違うので、Snapwidgetの設定で写真の枚数やサイズ・余白を調整して、ブログの見た目を調整してください。

これでインスタに「いいね」が増えること間違いなし!!

 

 

 

-Instagram, アメブロ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

《Instagram》iPhoneでインスタの自分の投稿をアメブロにはりつけたい。アメブロアプリ使用

「いい写真撮れたな〜。やっぱ自分、才能あるな〜」 Instagramには、そんな気にさせる魔力があります(ー_ー) せっかくいい写真撮れても、フォロワー数が少ないと見てくれる人も少ないですから悲しいも …

no image

〈アメブロ〉記事の最後に毎回同じ文を入れる方法〜初心者も安心〜

  お店のブログ担当をしてると、記事を書いてから、毎回毎回一番下にお店宣伝用のホームページリンクをはったり、メッセージを載せたりすると思います。 でも、毎回同じ内容を入力するのメンドウくさいですよね。 …

no image

アメブロでGoogleアナリティクスがテンプレートによって動かない!!

デザインテンプレートによると思われます。 「アメブロにGoogleアナリティクスを設定してほしい」依頼が多いです、はい。 アメブロにGoogleアナリティクスを設定する方法はこちら & …

no image

《iPhone》アメブロをFacebookに投稿すると画像が出ない問題の解決策

意外にこっちの方が楽チンです。 昨今、よくある、『経営者のためのブログ活用セミナー!』とか『集客が3倍増える!ブログマーケティング講座』とか。そんな内容でセミナーにできちゃうんだ〜、へ〜ってちょっと羨 …

no image

〈アメブロ〉アクセス解析をGoogleアナリティクスにする方法

  アメブロにはもともとアクセス解析機能がついてます。 2〜3本記事を更新するだけで、PV数やアメブロ内のランキングが上がっていくのでブログやってて楽しくなっちゃいますね。 ブログやるモチベーションを …