【超簡単】3分でインスタグラムをサイトに埋め込みする方法!

 
インスタグラムをサイトに埋め込み

この記事を書いている人 - WRITER -
y-hey
ブロガー・アウトドアライフクリエイターとして 多くの人にキャンプ、登山、旅行について興味を持ってもらい ”人生を120%楽しんでもらいたい”と考えている男です。 2児の父ですが単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロを一眼レフカメラと共に登ったり (普段は自称イクメンです)空手もやってる多趣味な男です。 ブログは2005年から書いています。(当サイトは2015年からです) 2017年8月に月間50,000PV突破しました! もし記事を読んで「役に立った」「面白そう」「笑えるわー」 と思われた方は、いいね、ツイート、はてぶ していただけますと更新の励みになります。 よろしくお願いします!
詳しいプロフィールはこちら

こんにちは!インスタグラマーのy-heyです。

おしゃれな画像がいっぱいのSNS、インスタグラム(Instagram)。
読者のみなさんも使っている方も多いのではないでしょうか?

私もフルサイズの一眼レフを登山に行くときも持ち歩く身としては
このような写真関連のSNSは押さえておかないと!

というわけで先日からやっとインスタグラムを始めてみました。
Instagram(インスタグラム)を始めてみました!

 

こんなおしゃれなインスタグラムをブロガーなら
自分のサイトに埋め込んで紹介したいですよね?

今回はインスタグラムをアルバム風にサイトに貼りつけて、
あなたのサイトをフォトジェニック(写真映え)するサイトにしちゃう
簡単でおしゃれな手順を紹介します!

 

InstaWidget(インスタウィジェット)で埋め込みコードを取得

サイトやブログへインスタを貼りつけるには、
InstaWidgetというブログパーツのサービスを利用します。

完全無料で面倒なEメールアドレス等の登録も不要!メチャメチャ便利です。

 

InstaWidgetのサイトにアクセス

まずはInstaWidgetのサイトへアクセスしてください。

InstaWidget

 

「早速作ってみる」をクリック

InstaWidget ホーム画面

 

項目を設定

そして各項目を設定します。

InstaWidget 設定画面1

 

ユーザー名:あなたのユーザー名を入力して下さい

ブログパーツ幅:通常は300でいい感じですが、サイトのデザインに合わせて変更できます。

ユーザーアイコン:表示、非表示を選択

ユーザー紹介文:インスタのプロフィールで設定している紹介文の表示、非表示を選択

フォローボタン:表示、非表示を選択

フォロワー:フォロー数・フォロワー数の表示、非表示を選択

外枠:このブログパーツの枠の表示、非表示を選択

外枠の色、文字の色、背景色:それぞれの部分の色をカラーコード(Web上で色を指定する英数字)で指定します。
基本は初期設定のままで十分使えます。(私も初期設定のままです)

もし変更したい場合は、HTMLカラーコードというサイトから好きな色を選べば
カラーコードが表示されるので、それをコピー&貼りつけすればオッケーです。

HTMLカラーコード

 

写真アルバム:インスタにアップしている写真の表示、非表示を選択

写真間の幅:写真と写真の間の幅を指定できます。通常は初期設定でOK

写真効果:なし、フェードイン、フェードアウト から選択

フェードイン・・・マウスを置いた時に写真が薄くなります。

InstaWidget フェードイン

フェードアウト・・・写真が通常状態で薄くなり、マウスを置いた時に元の写真の濃さになります。

InstaWidget フェードアウト

 

レイアウト:初期設定は横3枚×縦2枚です。お好みで変更できます。

シェアボタン:マウスを写真の上に置いた時、FacebookとTwitterでのシェアボタンの表示、非表示を選択

InstaWidget シェアボタン

 

ちなみにこのシェアボタンを押した時にシェアするリンクは↓の画面のように
「Instagram」へのリンクでは無く、「InstaWidget」へのリンクとなります。

通常は「表示しない」で良いと思います。

InstaWidget リンク先

 

写真の枠:写真の枠線の表示、非表示を選択

新しいウインドウで:クリックした時に新しいウインドウで開く・開かないを選択

 

 

プレビューで確認、埋め込みコードを取得

設定が完了したら、「プレビュー」ボタンをクリック。

すると、画面の右上にプレビューが表示されます。

InstaWidget プレビュー

 

「埋め込みコードを取得」をクリック。

InstaWidget コードを取得1

 

埋め込みコードが表示されるので、全体を選択後
Ctrl+C(Macの場合はcommand+C)でコピーします。

InstaWidget コードを取得2

 

ここまで進めばあとはサイトの好きな箇所に埋め込むだけです!

y-hey

 

埋め込みコードをブログへ貼り付け

さてここからは先程InstaWidgetで取得した埋め込みコードを
サイトへ貼り付けます。

今回はWordPressのサイトでHummingbirdのテンプレートを使っていて、
フッター(サイトの一番下側)に貼りつける場合を紹介します。

 

 

まずWordPressの管理画面から外観→ウィジェットを選択。

WordPress管理画面 ウィジェット1

 

【フッター】(真ん中)の右側にある下三角をクリック

WordPress管理画面 ウィジェット2

 

テキストウィジェット(テキスト形式のパーツ)を選び、

WordPress管理画面 ウィジェット3

 

ドラッグ&ドロップで挿入します。

WordPress管理画面 ウィジェット3.5

 

テキストのタイトルの部分に「Instagram」もしくは「インスタグラム」と入力。

「内容」の部分に先程InstaWidgetで取得した埋め込みコードを
Ctrl + V(Macの場合はcommand + V)で貼り付けます。

WordPress管理画面 ウィジェット4

 

最後は、忘れずに「保存」をクリックしましょう。

WordPress管理画面 ウィジェット5

 

サイトでの表示を確認

そして最後はご自身のサイトを開いてみて
表示がきちんとされているか確認してみて下さい。

インスタグラムをサイトに埋め込み

↑の写真のように、うまく表示されていれば

 

やりぃ!

喜びの少女達

です!

 

スポンサーリンク

まとめ

今回は3分でできるインスタグラムをサイトやブログに埋め込みする方法
お伝えしましたがいかがでしたでしょうか?

ちなみにこの記事を書くのは3時間以上かかりました・・・

y-hey

 

プラグイン不要でこんなに簡単にサイトやブログに
インスタのアルバムを埋めこめれるのだったら
やらない手は無いですね!

 

この記事を読んであなたのインスタライフが豊かになれば幸いです。

最後までお読み頂き本当にありがとうございました。

 

スポンサーリンク
この記事を書いている人 - WRITER -
y-hey
ブロガー・アウトドアライフクリエイターとして 多くの人にキャンプ、登山、旅行について興味を持ってもらい ”人生を120%楽しんでもらいたい”と考えている男です。 2児の父ですが単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロを一眼レフカメラと共に登ったり (普段は自称イクメンです)空手もやってる多趣味な男です。 ブログは2005年から書いています。(当サイトは2015年からです) 2017年8月に月間50,000PV突破しました! もし記事を読んで「役に立った」「面白そう」「笑えるわー」 と思われた方は、いいね、ツイート、はてぶ していただけますと更新の励みになります。 よろしくお願いします!
詳しいプロフィールはこちら
 

Copyright© 登っちゃえば? , 2017 All Rights Reserved.