【はてなブログのこと】メッチャ簡単！Instagramの写真をはてなブログのサイドバーに表示する方法
こんにちは！@KaZuOkA0412です！
最近は、連日雨ですね...洗濯物乾かない（悲）
雨も続いてるので今日は家でブログでも書きましょうか。
今回は、Instagramの写真をはてなブログのサイドバーに表示する方法を紹介したいと思います！
ちなみに、こんな⬇︎感じになります。
SnapWidgetを使ってはてなブログのサイドバーにInstagramを表示する方法
ブログのサイドバーに自分のInstagramを表示できたらちょっとオシャレになるな
と思い、ググってみたところ「SnapWidget」というサイトを利用すれば簡単に
表示できるようになることがわかりました！
ちなみに、FacebookやTwitterなどの写真もウェブサイトやブログのサイドバーに表示することも可能ですが、今回はInstagramの写真を表示する方法を紹介します。
英語サイトなので、詳しく説明していきたいと思います。
1, SnapWidgetのホーム画面に行く
2, ホーム画面の「GET STARTED TODAY」をクリックする
3, FacebookかTwitterのアカウントでログイン
※SnapWidget専用のアカウントを作成してもOKだが、FacebookかTwitterでログインした方が楽です
4, 種類を選んで「Creat a New Widget」をクリックする
5, SnapWidgetの設定画面でカスタマイズする
① 自分のInstagramのユーザーネームを入力
② ディスクリプション
→自分の画像ではなくて特定ハッシュタグが付けられている画像を表示させたい時にこのボックスにハッシュタグを記入する。なので、今回は未記入。
③ 表示画像の縦横サイズを指定
→自分のサイトのサイドバーのサイズに合わせて指定します。自分は125pxで設定しています。
④ 行数、列数の指定
→初期値の③×③にしてあります。
⑤ 枠線の有無
→初期値の「無し( = NO)」にしてあります。
⑥ 背景の色の指定
→初期値のままにしてあります。（白）
⑦ 写真と写真の隙間の指定
→初期値のままにしてあります。（5px）
⑧ マウスオーバー時の挙動
→何もしないとフェードインとフェードアウトが選択可能ですが、自分は「何もしない」を選択
⑨ シェアボタンの表示
→マウスオーバー時にTwitter、Facebookのシェアボタンが表示されます。初期値のまま。（有り）
⑩ レスポンシブの可否
→これを「YES」を選択すると、自分のサイトのサイドバーサイズに自動的に最適化してウィジェットを作成してくれるのですが、写真の表示が正方形に固定されないので、
「NO」にしています。
6, 画面下の「Get Widget」をクリックして、コード(HTML)をコピーする
7, はてなブログの管理画面 → デザイン → カスタマイズ → サイドバー → モジュールを追加をクリックし、コード(HTML)を貼り付ける
タイトルは自由に決めてください。(Instagramの写真上に表示されます)
最後に、先ほどSnapWidgetで作成したコード(HTML)を貼り付けます。
これで、ブログのサイドバーにInstagramの写真が表示されるようになります！
まとめ
1, SnapWidgetのホーム画面に行く
2, ホーム画面の「GET STARTED TODAY」をクリックする
3, FacebookかTwitterのアカウントでログイン
4, 種類を選んで「Creat a New Widget」をクリックする
5, SnapWidgetの設定画面でカスタマイズする
6, 画面下の「Get Widget」をクリックして、コード(HTML)をコピーする
7, はてなブログの管理画面 → デザイン → カスタマイズ → サイドバー → モジュールを追加をクリックする
8, SnapWidgetで作成したコード(HTML)を貼り付ける
全行程8ステップでできます！10分もあればできます！メッチャ簡単！
それではまたっ！
参考記事
