10-05-2019 更新履歴
ウィジェットって聞いたことありますか？
スマホ…それもAndroidユーザーだと使っている人が多いかもしれない。
アプリを開かなくても、開いた状態で貼りつけてあるような便利な機能！
それが、ブログでもできちゃうんですね。
ブログ開始と同時にInstagramのIDは取得していたのですが、手が回らず投稿したのはつい5日ほど前です。
そこで、前からやってみたかった『PC版のサイドバーにInstagramを埋め込む』を実行しました！
前回のサイドバー設定から、もうひと手間かけるだけの手軽さです。
外部サービスを利用する
このサービスを使うと思った以上に簡単で、最短3分で設置できます。
そのサイトがこちら『Get Free Instagram Widget for Website | InstaWidget』
サイトのユーザー登録などの面倒な作業は一切ありません。
画面上にでてくる、項目を埋めていけばブログパーツが出来るというサービスです。
一行で言うと、外部サービスで作ったコードをはてなブログに貼るだけ！
作成方法
サイトにある『早速作ってみる』をクリックしてスタート！
入力するとプレビューで完成形を見られるので、その画像を確認しながら調整していくのが良いと思います。
※カッコ内は私の設定です（2018年11月現在）
ユーザー名：インスタグラムのID（laid_back_picnic）
ハッシュダグ：ハッシュタグつきの画像だけを表示したいときに使用（未設定）
ブログパーツ幅：分からなければ、最初の設定のまま作ってみて（300px）
ユーザーアイコン：（非表示）
ユーザー紹介文：（非表示）
フォローボタン：（表示）
フォロワー：（非表示）
外枠：（表示）
続いて、色の設定。
外枠の色：（#400000）
文字の色：（#400000）
背景：（#ffffe0）※ここまでのカラーコードは最初の設定のまま進めても構いません。私はブログのテーマカラーに合わせています。
※その後、カラーを変更しました。（2019年5月 追記）
写真アルバム：インスタグラムに投稿されている写真の表示/非表示（表示）
写真の幅：好みで調整してください（5px）
写真効果：フェードイン/アウトの設定（なし）
レイアウト：横×縦で何枚表示するかを設定（3×2）
シェアボタン：画像の上に表示されるので、非表示の方がすっきり（非表示）
写真の枠：（非表示）
新しいウィンドウで：開く/開かない（開く）
プレビューをクリックして出来上がりを確認する。
ここまでで納得いかなければ、何度でも修正できるので…実際、私も何パターンか試しました。
では次に進みます。
アイコンや紹介文を非表示にして、余分なものを表示しないデザインにしました。
出来たら、埋め込みコードを取得をクリックでコードのコピーが完了です。
はてなブログ側での設定
ダッシュボード≫デザイン≫カスタマイズ≫サイドバー≫モジュール追加≫HTML
タイトルは自分のIDでも、Instagramでもお好きに設定してください。
そして、その下に先ほどコピーしたコードを貼りつけます。
適用したら完了！
あとがき
どうですか？思った以上に簡単ですよね。
こんな便利なサービスがあるなんて、ブログを書いてなければ知ることもなかった。
私はＰＣ版とスマホ版で、少しでも違いがある事に気づいた時『手間かけて作ってるんだな』って感じるんです。
もしスマホからしか見ていない方は、他の方のブログをたまにＰＣ版に切り替えてみると面白いかもしれませんよ。
更新履歴
10-05-2019 【画像】のtitle設定を変更
