ブログのテーマはまだ決まっていませんが何か

ブログのタイトル通り、まだタイトルが決まってません。興味のあることをひたすら書いていくブログ。#海外 #狩猟 #語学 #民泊 #子育て #スローライフ #都会と田舎 #グルメ

【はてなブログのこと】メッチャ簡単!Instagramの写真をはてなブログのサイドバーに表示する方法

f:id:Inter412:20170816180734j:plain

 

こんにちは!@KaZuOkA0412です!

 

最近は、連日雨ですね...洗濯物乾かない(悲)

 

雨も続いてるので今日は家でブログでも書きましょうか。

 

今回は、Instagramの写真をはてなブログのサイドバーに表示する方法を紹介したいと思います!

 

ちなみに、こんな⬇︎感じになります。

f:id:Inter412:20170816190542p:plain

 

SnapWidgetを使ってはてなブログのサイドバーにInstagramを表示する方法

 

ブログのサイドバーに自分のInstagramを表示できたらちょっとオシャレになるな

と思い、ググってみたところ「SnapWidget」というサイトを利用すれば簡単に

表示できるようになることがわかりました!

 

ちなみに、FacebookTwitterなどの写真もウェブサイトやブログのサイドバーに表示することも可能ですが、今回はInstagramの写真を表示する方法を紹介します。

 

英語サイトなので、詳しく説明していきたいと思います。 

 

1, SnapWidgetのホーム画面に行く

snapwidget.com

 

2, ホーム画面のGET STARTED TODAYをクリックする

f:id:Inter412:20170816191958p:plain

 

3, FacebookTwitterのアカウントでログイン

f:id:Inter412:20170816192845p:plain

※SnapWidget専用のアカウントを作成してもOKだが、FacebookTwitterでログインした方が楽です 

4, 種類を選んで「Creat a New Widget」をクリックする

f:id:Inter412:20170816212504p:plain

 

5, SnapWidgetの設定画面でカスタマイズする

f:id:Inter412:20170816213540p:plain 

 

自分のInstagramのユーザーネームを入力

 

ディスクリプション

→自分の画像ではなくて特定ハッシュタグが付けられている画像を表示させたい時にこのボックスにハッシュタグを記入する。なので、今回は未記入。

 

表示画像の縦横サイズを指定

→自分のサイトのサイドバーのサイズに合わせて指定します。自分は125pxで設定しています。

 

行数、列数の指定

→初期値の③×③にしてあります。

 

枠線の有無

→初期値の「無し( = NO)」にしてあります。

 

背景の色の指定

→初期値のままにしてあります。(白)

 

写真と写真の隙間の指定

→初期値のままにしてあります。(5px)

 

⑧ マウスオーバー時の挙動

→何もしないとフェードインとフェードアウトが選択可能ですが、自分は「何もしない」を選択

 

 シェアボタンの表示

→マウスオーバー時にTwitterFacebookのシェアボタンが表示されます。初期値のまま。(有り)

 

レスポンシブの可否

→これを「YES」を選択すると、自分のサイトのサイドバーサイズに自動的に最適化してウィジェットを作成してくれるのですが、写真の表示が正方形に固定されないので、

「NO」にしています。

 

6, 画面下の「Get Widget」をクリックして、コード(HTML)をコピーする

f:id:Inter412:20170816215946p:plain

 

7, はてなブログの管理画面 → デザイン → カスタマイズ → サイドバー → モジュールを追加をクリックし、コード(HTML)を貼り付ける

f:id:Inter412:20170816221101p:plain

 

タイトルは自由に決めてください。(Instagramの写真上に表示されます)

 

最後に、先ほどSnapWidgetで作成したコード(HTML)を貼り付けます。

 

これで、ブログのサイドバーにInstagramの写真が表示されるようになります!

 

まとめ

 

1, SnapWidgetのホーム画面に行く

2, ホーム画面のGET STARTED TODAYをクリックする

3, FacebookTwitterのアカウントでログイン

4, 種類を選んで「Creat a New Widget」をクリックする

5, SnapWidgetの設定画面でカスタマイズする

6, 画面下の「Get Widget」をクリックして、コード(HTML)をコピーする

7, はてなブログの管理画面 → デザイン → カスタマイズ → サイドバー → モジュールを追加をクリックする

8, SnapWidgetで作成したコード(HTML)を貼り付ける

 

全行程8ステップでできます!10分もあればできます!メッチャ簡単!

 

それではまたっ!

 

 

参考記事

www.mukaikaze.net

 

 

世界一やさしい ブログの教科書 1年生

世界一やさしい ブログの教科書 1年生