ブログ運営

JINでブログのサイドバーにインスタを表示させたい

ブログのサイドバーに、インスタグラムのプロフィールを表示させる方法をお伝えします!

専用サイトに行く

ブログに埋め込む用のコードが簡単に取得できるサイトがあります。無料で使用できます。
▶インスタウィジェットのサイトにいく(https://instawidget.net)

早速作ってみる>>のボタンからサイトに入ります。

必要事項を入力する

ユーザー名  :インスタアカウントの、@の後の部分を入力します
#ハッシュタグ:お好みのハッシュタグの情報を表示させることもできます。
自分のプロフィールを表示させるなら未入力でOKです。

ここから下は、入力してあるものそのままでよさそうです
ブログパーツ幅:とりあえず入力されている300のままで、あわなかったら調整
ユーザーアイコン :表示
ユーザー紹介文 :表示
フォローボタン :表示
フォロワー    :表示
外枠       :表示
外枠の色     :表示

こちらの色は、ブログの色と合わせてもいいと思います。
文字の色 :外観→カスタマイズ→色の設定 からコードを探せます。
背景の色 :上に同じです

コードをコピペしても、うまく反映されない場合は、カラーコードのサイトに入力してみてください。
最後の一文字(0)が抜けていることがわかるかもしれません。
カラーコード変換のサイト例(https://www.peko-step.com/tool/tfcolor.html)

ここからは、また入力されているままでもよさそうです。
写真アルバム  :表示
写真間の幅   :5PX
写真効果    :なし
レイアウト   :3X2
シェアボタン  :表示
写真の枠    :表示

最後の項目は、設定を変えたらいいと思います。
新しいウィンドウで :開く

プレビューをクリックし、コードを取得

設定が終わったら、プレビューボタンをクリックします。
右側に、イメージが表示されます。
理想の感じになったら、「埋め込みコードを取得」をクリックして、表示されているコードをコピーしておきます。

ブログを設定する

テーマがJINの場合の手順は次の通りです。

  1. 外観→ウィジェット でウィジェットの設定画面に入ります。
  2. 「カスタムHTML」のボタンを 「サイドバー」のところに持っていきます。
  3. 「▼」を開いて、タイトルを入力します。
    「Instagram」 「Instagramをチェック」 など、よさそうな言葉を入力してみてください。
  4. 「内容」のところに、先ほどコピーしたコードを貼り付けます。

おわりっ!

とっても簡単に設定できるので、ぜひ試してみてください♪

ABOUT ME
ひろみ
英語育児・暮らし・結婚・子育てについて発信しています。 英語声掛け動画はYouTubeで、DWE(ディズニー英語)の日常はインスタで投稿しています♪
ディズニー英語システム  資料請求

ディズニー英語システム
無料お試しセットをもらおう!

教材のイメージをつかむのにピッタリ
お試しCD,DVDはこちらから

この記事を読んだあなたへおすすめ