記事の詳細

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

そこで今回はラクに設置したい、しかも皆さんがよく使いそうなもので..と考えました!
よく使うものといえばスマホ!スマホといえば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分でした!

 

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

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

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

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

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

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

AD

光回線受付センター
ページ上部へ戻る