Instagramの設定、設置Instagramの設定、設置

Instagramのアカウントを設定することで、Instagramの写真やキャプションを見せることができます。表示形式は2つの形式から選択することができ、キャプションの表示方法や一覧の表示スタイルなどを設定することができます。
※表示できる写真の枚数は最大50枚になります。(表示時の負荷を考慮した制限)

Instagramアカウントをお持ちでない方は、まずは公式サイトからアカウントを取得してください。
⇒ Instagramアカウントを作成する

Instagramモジュールの初期設定

Instagramモジュールを利用する場合は、Instagramのアカウントを設定し、Instagramモジュールの初期設定を行ないます。初期設定の手順は下記をご確認ください。

⇒ Instagramモジュールの初期設定についてはこちら

Instagramを設定する

コンテンツパーツやレイアウトで配置できるInstagramを設定します。

  • 予めInstagramモジュールの初期設定を行ってください。

1
コントロールパネルの[設定][便利な機能][Instagram]を選択します。

2
“Instagramダイアログ”が表示されます。

認証済みアカウント

認証済みのInstagramアカウント名が表示されます。認証を行っていない場合は、[認証]ボタンが表示されますので、Instagramモジュールの初期設定を行ってください。

⇒ Instagramモジュールの初期設定についてはこちら

認証したInstagramアカウントの解除

認証したInstagramアカウントを解除する場合は、[解除する]リンクをクリックして解除します。
※配置済みのInstagram表示設定はすべて削除されます。

認証済みアカウントの有効期限切れの場合

認証したInstagramアカウントのアクセストークンの有効期限切れの場合は、有効期限切れのメッセージが表示されます。

⇒ アクセストークンの有効期限切れの場合の対応についてはこちら

[追加]ボタンです。新しくInstagramの表示設定を追加します。

⇒ Instagramの表示設定の追加についてはこちら

[編集]ボタンです。登録されたInstagramの表示設定の内容を編集します。

⇒ Instagramの表示設定の編集についてはこちら

[削除]ボタンです。登録されたInstagramの表示設定を削除します。

アクセストークンの有効期限切れの場合

Instagramが認証済みになっている場合でも、Instagramが配置されているページのアクセスが60日以上ない場合は、アクセストークンが有効期限切れとなります。有効期限切れになると、《認証済みアカウント》のInstagramアカウント名の表示の下に下記の有効期限切れメッセージが表示されますので、このメッセージが表示されている場合は、下記の手順でご対応をお願いします。

  • 有効期限切れメッセージ
    「※アクセストークンの有効期限が切れています。一度解除を行い再度認証してください。」
対応手順
  1. “Instagramダイアログ”[解除する]ボタンをクリックします。
  2. 「認証を解除してもよろしいですか?」のメッセージの[OK]ボタンをクリックします。
  3. 《InstagramアプリID》、《Instagram App Secret》の内容に間違いがないか確認し、[認証]ボタンをクリックします。
  4. Instagramへログインし、承認します。
    ※該当のInstagramアカウントへログインして承認を行ってください。
  5. “Instagramダイアログ”の《認証済みアカウント》に認証したInstagramアカウント名が表示されていれば完了です。

Instagramの表示形式を追加する

1
コントロールパネルの[設定][便利な機能][Instagram]を選択します。

2
“Instagramダイアログ”が表示されますので、[追加]ボタンをクリックします。

3
ダイアログに《タイトル》と《表示形式》を設定します。設定した表示形式の必要項目を設定します。各項目の詳細は「一覧表示の表示設定」「カルーセル表示の表示設定」を参照してください。

4
[OK]ボタンをクリックして完了です。

 Hint

右クリックからInstagramの設定

Instagramパーツの上で右クリックして、表示されたショートカットメニューから[Instagram][Instagramの編集]を選択します。

「一覧表示」の表示設定

タイトル Instagramの表示設定のタイトルを入力します。
「タイトルを隠す」にチェックを入れると、タイトルは表示されません。
表示形式 一覧表示を選択します。
キャプション表示

Instagramアカウントの写真のキャプションを表示するかどうかを設定します。また、表示する場合はマウスオーバーで表示するかどうか、テキストの色、マウスオーバー表示の場合の背景色を設定します。

  • マウスオーバーはスマートフォンでの閲覧の際は表示されません。
一覧表示設定

表示する横の枚数、縦の枚数を設定します。また、余白を表示するかどうか、フレームを表示するかどうか、表示する場合のフレームの色、枠線を表示するかどうか、表示する場合の枠線の色を設定します。

  • 表示できる写真の枚数は最大50枚になります。
ステータス

このInstagramのパーツを一般に公開するかどうかを設定できます。

  • 「公開」 ・・・ サイト公開によって一般に公開されます。
  • 「非公開」・・・ 編集サイトのみ表示され、一般サイトには公開(表示)されません。
  • 「編集中」 ・・・ サイト公開をしても、編集した内容が一般サイトには反映されません。
表示例 - 一覧表示

「カルーセル表示」の表示設定

タイトル Instagramの表示設定のタイトルを入力します。
「タイトルを隠す」にチェックを入れると、タイトルは表示されません。
表示形式 カルーセル表示を選択します。
キャプション表示

Instagramアカウントの写真のキャプションを表示するかどうかを設定します。また、表示する場合はマウスオーバーで表示するかどうか、テキストの色、マウスオーバー表示の場合の背景色を設定します。

  • マウスオーバーはスマートフォンでの閲覧の際は表示されません。
カルーセル表示設定

表示する横の枚数、自動スライドをするかどうか、自動スライドする場合はスライド停止時間、スライド移動時間を設定します。

  • 表示できる写真の枚数は最大50枚になります。
ステータス

このInstagramのパーツを一般に公開するかどうかを設定できます。

  • 「公開」 ・・・ サイト公開によって一般に公開されます。
  • 「非公開」・・・ 編集サイトのみ表示され、一般サイトには公開(表示)されません。
  • 「編集中」 ・・・ サイト公開をしても、編集した内容が一般サイトには反映されません。
表示例 - カルーセル表示

Instagramをページに設置する

ページ内に作成したInstagramを配置する場合は、コンテンツパーツの追加(カテゴリー=「SNS」)、またはレイアウトで該当するInstagramを配置してください。

⇒ コンテンツパーツについてはこちら
⇒ レイアウトについてはこちら

Instagramの表示設定を編集する

1
編集したいInstagramパーツの上で右クリックをして、表示されたショートカットメニューから[Instagram][Instagramの編集]を選択します。

2
“Instagramダイアログ”が表示されますので、各項目を設定します。各項目の詳しい内容は「Instagramの表示形式を追加する」を参照してください。

サイト内検索