Blogging Laid Back Picnic

ブログで稼ぐのに、どんな準備・設定をすれば良いの?

インスタをはてなブログに埋め込む!

ウィジェットって聞いたことありますか?

スマホ…それもAndroidユーザーだと使っている人が多いかもしれない。

アプリを開かなくても、開いた状態で貼りつけてあるような便利な機能!

それが、ブログでもできちゃうんですね。

 

ブログ開始と同時にInstagramのIDは取得していたのですが、手が回らず投稿したのはつい5日ほど前です。

そこで、前からやってみたかった『PC版のサイドバーにInstagramを埋め込む』を実行しました!

前回のサイドバー設定から、もうひと手間かけるだけの手軽さです。

(前回の記事はこちら)

blog.lbpicnic.tokyo

 

 

 

外部サービスを利用する

このサービスを使うと思った以上に簡単で、最短3分で設置できます。 

そのサイトがこちら『Get Free Instagram Widget for Website | InstaWidget

このサイトにユーザー登録などの面倒な作業は一切ありません。

画面上にでてくる、項目を埋めていけばブログパーツが出来るというサービスです。

一行で言うと、外部サービスで作ったコードをはてなブログに貼るだけ!

 

作成方法

サイトにある『早速作ってみる』をクリックしてスタート!

入力するとプレビューで完成形を見られるので、その画像を確認しながら調整していくのが良いと思います。

インスタグラムIDなどの設定

ユーザー名:インスタグラムのID(laid_back_picnic

ハッシュダグ:ハッシュタグつきの画像だけを表示したいときに使用(未設定

ブログパーツ幅:分からなければ、最初の設定のまま作ってみて(300px

ユーザーアイコン:非表示

ユーザー紹介文:非表示

フォローボタン:表示

フォロワー:非表示

外枠:表示

※カッコ内は私の設定です

 

デザインに関する設定

外枠の色:#400000

文字の色:#400000

背景:#ffffe0※ここまでのカラーコードは最初の設定のまま進めても構いません。私はブログのテーマカラーに合わせています。

写真アルバム:インスタグラムに投稿されている写真の表示/非表示(表示

写真の幅:好みで調整してください(5px

写真効果:フェードイン/アウトの設定(なし

レイアウト:横×縦で何枚表示するかを設定(3×2

シェアボタン:画像の上に表示されるので、非表示の方がすっきり(非表示

写真の枠:非表示

新しいウィンドウで:開く/開かない(開く

 

プレビューをクリックして出来上がりを確認する。

ここまでで納得いかなければ、何度でも修正できるので…実際、私も何パターンか試しました。

では次に進みます。

 

プレビュー表示

アイコンや紹介文を非表示にして、余分なものを表示しないデザインにしました。

出来たら、埋め込みコードを取得をクリックでコードのコピーが完了です。

 

 

はてなブログ側での設定

ダッシュボード≫デザイン≫カスタマイズ≫サイドバー≫モジュール追加≫HTML

ほぼ、前回までと同じでしょ?

タイトルは自分のIDでも、Instagramでもお好きに設定してください。

そして、その下に先ほどコピーしたコードを貼りつけます。

適用したら完了

はてなブログの設定画面

 

 

あとがき

どうですか?思った以上に簡単ですよね。

こんな便利なサービスがあるなんて、ブログを書いてなければ知ることもなかったでしょう。

私はPC版とスマホ版で、少しでも差がある方が違いに気づいた時に『おっ!手間かけて作ってるんだな』って感じるんです。

もしスマホからしか見ていない方は、たまにPC版に切り替えてみると面白いかもしれませんよ。