BLOG CATEGORY

Monthly Archives

長フチコンテンツ

サイバーアクセル？何者や

サイバーアクセル？<br />何者や
サイバーアクセル？
何者や

ホームページ制作？だからどうした①

ホームページ制作？<br />だからどうした①
ホームページ制作？
だからどうした①

ホームページ制作？だからどうした②

ホームページ制作？<br />だからどうした②
ホームページ制作？
だからどうした②

SEO対策？怪しい話しか聞かないぞ

SEO対策？<span>怪しい話<br />しか聞かないぞ</span>
SEO対策？怪しい話
しか聞かないぞ

集客アドバイザー？よう分からん

集客アドバイザー？<br />よう分からん
集客アドバイザー？
よう分からん

俺なりのまとめを伝える！

俺なりのまとめを伝える！
俺なりのまとめを伝える！

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » webコラム» アメブロカスタマイズ インスタグラム（Instagram）をサイドバーに表示する方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ インスタグラム（Instagram）をサイドバーに表示する方法

   投稿日: 2014/10/27    投稿者:webコラム

皆さん、こんにちは!

 

今回は世界で幅広く使われている「インスタグラム（Instagram）」をサイドバーに表示する方法を紹介します。

インスタグラムって何？という方へ簡単に説明すると、

写真や動画を撮って友達とシェアしたり、FacebookやTwitterに投稿したりできるアプリのことです。

つまり、「自分が撮った写真などをアメブロのサイドバーに表示できるようにしよう！」ということです。

今回はCSSを編集するのではなく、ブログパーツを他サイトに作ってもらいそれをプラグインとして表示する方法です。

 

①コードを取得する

 

今回はブログのパーツを作ってくれる「snapwidget(http://snapwidget.com/　)」を利用します。

海外のサイトですが、とても簡単なので英語が苦手な方も指示通りにしてみてください！

上記リンクを開いたら　[Get Your Free Widget]　をクリックします。

 

　すると何やら入力する画面が出るので、埋めていきます。

snapwidget[1].jpg

 

上から順に、

Username　　　　：　Instagramのユーザー名　※ハッシュタグで表示したければHashtagへ

Hashtag　 　　　：　ハッシュタグ　※自分の写真を表示したければUsernameへ

Widget Type 　　：　表示方法

Thumbnail Size　：　サムネイル（縮小画像）のサイズ

Layout　　　　　：　左右×上下で表示する写真の数（最大６０）

Photo Border　　：　写真の周りにボーダーをいれるかどうか

Background Color：　背景色

Photo Padding　 ：　写真同士の間の余白

Hover Effect　　：　マウスの乗せたときの効果

Sharing Buttons ：　シェアボタンの有無

 

以上を入力したら[Preview]で出来上がり見本を見て、大丈夫なら[Get Widget]でコードを得ます。

 

コード[2].jpg

 

②コードを入力する

 

　先ほどの工程で得たコードを、フリープラグインに追加していきます。

アメブロのマイページから[管理トップ]→左側メニューの[設定・管理]→画面下部の[プラグインの追加]と開きます。

開いたページのフリープラグインのタグを選択して、先ほどのコードをここへ足して保存します。

 

保存すると「新たにプラグインの追加をした方→サイドバーに配置してください」と出るので、青くなっている[こちら]を選択し、好みの場所へフリープラグインを移動させて完成です。

 

 

 

まとめ

 

上手くできましたでしょうか？

自分の趣味などお気に入りの写真を並べて、同じ趣味の人に見つけてもらえば友達の輪が広がるかもしれませんね♪

 

 

カテゴリ:

TOPへ