記事の詳細

こんにちは!小林です!
前回までプラグインの解説をしてきました。
入力して..出力して..と手順も多く大変だったと思います。

そこで今回はラクに設置したい、しかも皆さんがよく使いそうなもので..と考えました!
よく使うものといえばスマホ!スマホといえばSNS!SNSといえばInstagram!ということで、
「InstaWidget」についてご紹介していきますね。

はじめに

「InstaWidget」は、Google Mapのようにコードを貼り付けるだけで、Instagramの情報を自身のサイトに載せることができます。
こちらのサイトでは、ユーザー登録も、ログインも不要。必要な設定をすると、自動で必要なコードを生成してくれます!

タイトル通り3分でやってみる!

https://instawidget.net/にアクセス

②「無料インスタグラムブログパーツ作成」か「早速作ってみる」をクリック

③自分のInstagramのアカウントを入力。私は弊社で運営しているパソコン教室用のアカウントを使用。


④初期設定の見た目はこのようになります。以下ブログパーツと呼びますね。

カスタマイズしよう!

⑤各設定を解説していきます。ユーザー名を除き17項目からお好みの設定ができます!

◆ハッシュタグ:自分の好きなハッシュタグでブログパーツを作成可
◆ブログパーツ幅:全体の幅(px指定のみ可)
◆ユーザーアイコン:丸枠の画像部分、名称
◆ユーザー紹介文:相模原市中央区にある…からはじまる小文字部分
◆フォローボタン:紹介文下部のボタン
◆フォロワー:フォローボタン下部の情報
◆外枠:ブログパーツを囲う枠
◆外枠の色:ブログパーツを囲う枠の色
◆文字の色:ブログパーツ内の文字全て
http://www.netyasun.com/home/color.html
(「カラーコード」と検索すると参考サイトが色々でてきます)
◆背景色:ブログパーツの背景色
◆写真アルバム:並んでいる写真部分
◆写真間の幅:並んでいる写真間の余白
◆写真効果:並んでいる写真にカーソルを合わせたときの効果
◆レイアウト:写真の表示レイアウト
◆シェアボタン:写真にカーソルを合わせたとき右下に出るボタン
◆写真枠:写真の枠..そのままですね!
◆新しいウィンドウで:リンクをクリックしたときに別ウィンドウで開くか

⑥設定後、プレビューを押して、設定した内容を画面右側で確認します。
修正後も必ずプレビューを押して次の手順に移ってくださいね!


⑦よければ画面右下の「埋め込みコードを取得」をクリック


⑧ダイアログが出るので、コードをコピー


⑨自身のブログに移動し、表示させたい部分にペースト
⑩完成!私は幅を600pxに変更しました!
@sagamiharapcinc

いかがでしたか?今回はプラグイン以外で、簡単にブログパーツを導入できる方法でした。
細かい設定をしなければ3分以内でできますので、ぜひ一度お試しください!ちなみに私は..1分でした!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る