ブログを少しカスタマイズ-Instagramをサイドバーに表示-

高校生の頃にHTMLの初歩的なことを学びましたが、

すっかり忘れてしまいました。

できることなら記事を

もっと華やか

カスタマイズしてみたいというのが本音です...

そこで難易度の低そうなカスタマイズを探してみました。

 

こちらのSnapWidgetというサイトで簡単に作ることができるようです。

英語の説明はとりあえず全てすっ飛ばして、Facebookのアカウントで登録してみました。

 Widgetの作成にはもちろんInstagramアカウントの承認が必要です。Pro版でしか作れないものもありますが、とりあえずFreeのものから選択します。

 

 

・作成方法 

画面右上のCREATE A NEW WIDGETと書かれたボタン

f:id:YuTR0N:20170423234818p:plain

を押すといくつかウィジェットのサンプルが表示されます。

その中からFREEとタグ付けされたものを選びます。

f:id:YuTR0N:20170423235409p:plain

使うテーマを決めたらCREATE A NEW WIDGETを押します。

そうするとWidgetの編集画面へと移行します。

f:id:YuTR0N:20170423235744p:plain

ここの設定はご自由にどうぞという感じです。

ただLayoutを多くしすぎるとブログの読み込みに時間がかかるのかな?と思うので3x3が無難かなと思います。

Hover Effectというのは写真の上にカーソルを持ってくと発動するエフェクト(?)です。

設定が終わったらPREVIEW IN NEW WINDOWを押すことで別ページでどんな感じかチェックできます。どでかく表示されましたが実際埋め込んでみたら設定した大きさだったのでわからなければその都度試すのもありだと思います。

チェックしてOKだなと言う場合はGET WIDGETを押してください。

押すと次のように表示されるので、

f:id:YuTR0N:20170424000458p:plain

表示された文字列を全てコピーしてください。

コピーした文字列をはてなブログ

デザイン▶カスタマイズ▶サイドバー▶モジュールを追加▶</>HTML 

を開いてペーストしてください。

これで完了です。

 

お疲れ様でした!!