- １．レイアウト詳細設定方法
- １ー１．グリッドレイアウト
- １ー２．ギャラリーレイアウト
- １ー３．カードレイアウト
- １ー４．リストレイアウト
- １ー５．カルーセルレイアウト
- １ー６．スライダーレイアウト
- １ー７．ロゴグリッドレイアウト
- １ー８．WallGridレイアウト
- １ー９．カードスライダーレイアウト
- １ー１０．BigGridレイアウト
- １ー１１．スライドショーレイアウト
- ２．共通パーツ設定方法
- ２ー１．ヘッダー設定
- ２ー２．フッター設定
- ２ー３．絞り込み設定
- ２ー４．ポップアップ表示タイプ設定
- ２ー５．ポップアップ非表示及び移動先設定
- ２ー６．投稿の初期公開設定
- ２ー７．独自CSS設定
- ３．プロフィール設定方法
- ４．投稿設定方法
- ４ー１．表示／非表示設定
- ４ー２．ピン留め設定
- ５．S-LINKをWEBページに埋め込む方法
- ６．まとめ
１．レイアウト詳細設定方法
１ー１．グリッドレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[グリッド]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
※この処理を行わないと設定処理が完了しません。ご注意ください。
１ー２．ギャラリーレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[ギャリリー]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[初期投稿表示数] ⇒ １ページに表示する投稿数を数字で入力。
●[カラム数] ⇒ １行に表示する投稿数を「２カラム、３カラム、４カラム、5カラム」から選択。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[レスポンシブ表示] ⇒ レスポンシブ対応選択
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
１ー３．カードレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[カード]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[初期投稿表示数] ⇒ １ページに表示する投稿数を数字で入力。
●[カラム数] ⇒ １行に表示する投稿数を「２カラム、３カラム、４カラム、5カラム」から選択。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[レスポンシブ表示] ⇒ レスポンシブ対応選択
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
１ー４．リストレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[リスト]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[初期投稿表示数] ⇒ １ページに表示する投稿数を数字で入力。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
１ー５．カルーセルレイアウト
※現在、レイアウトデザイン変更中で使用不可です。
１ー６．スライダーレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[スライダー]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[初期投稿表示数] ⇒ １ページに表示する投稿数を数字で入力。
●[カラム数] ⇒ １行に表示する投稿数を「３カラム、４カラム、5カラム」から選択。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
１ー７．ロゴグリッドレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[ロゴグリッド]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ロゴ画像] ⇒ 「ファイル選択」をクリックして画像を選択。※選択可能画像サイズは512kまでです。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
１ー８．WallGridレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[WallGrid]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[初期投稿表示数] ⇒ １ページに表示する投稿数を「4(4カラム用)、8(4カラム用)、12(4カラム用)、16(4カラム用)、5(5カラム用)、10(5カラム用)、15(5カラム用)、20(5カラム用)」から選択。
※4カラム用は横幅いっぱいに4つの投稿を表示します。5カラム用は横幅いっぱいに5つの投稿を表示します。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
１ー９．カードスライダーレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[カードスライダー]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[初期投稿表示数] ⇒ １ページに表示する投稿数を数字で入力。
●[カラム数] ⇒ １行に表示する投稿数を「３カラム、４カラム、5カラム、6カラム」から選択。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
１ー１０．BigGridレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[BigGrid]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
※この処理を行わないと設定処理が完了しません。ご注意ください。
１ー１１．スライドショーレイアウト
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[スライドショー]を選択
３．「基本表示」から設定を行います。
●[投稿表示順] ⇒ 投稿の表示順を「最新順、古い順、ランダム表示」から選択。
●[初期投稿表示数] ⇒ １ページに表示する投稿数を数字で入力。
●[画像のPaddingサイズ] ⇒ 画像の周りのスペースを数字(px単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
２．共通パーツ設定方法
２ー１．ヘッダー設定
１．「表示設定詳細」タブをタップ
２．「ヘッダー」から設定を行います。
●[見出し] ⇒ 見出しの内容を入力。 ※未入力で非表示になります。
●[ヘッダーサイズ] ⇒ ヘッダーのフォントサイズを「小、中、大、特大」から選択。
●[テキスト色] ⇒ 見出しのテキスト色を指定。
●[説明文] ⇒ 説明文の内容を入力。
●[テキスト色] ⇒ 説明文のテキスト色を指定。
３．「設定を保存」ボタンをクリック
２ー２．フッター設定
１．「表示設定詳細」タブをタップ
２．「フッター」から設定を行います。
●[フッターの表示・非表示] ⇒ フッター(InstagramまたはFacebookボタン)の表示・非表示を選択
※フッターボタンからお客様のSNS「InstagramまたはFacebook」へ移動できます。
３．「設定を保存」ボタンをクリック
２ー３．絞り込み設定
１．「表示設定詳細」タブをタップ
２．「表示キーワード」から設定を行います。
●[表示キーワード利用] ⇒ 絞り込み機能使用の有無を選択
●[ハッシュタグまたはキーワード] ⇒ 絞り込みする検索キーワードまたはハッシュタグを入力
３．「設定を保存」ボタンをクリック
２ー４．ポップアップ表示タイプ設定
１．「表示設定詳細」タブをタップ
２．「ポップアップ表示タイプ」から設定を行います。
●「白い背景ポップアップ」または「半透明背景ポップアップ」を選択します。
※デフォルトは「白い背景ポップアップ」です。
３．「設定を保存」ボタンをクリック
２ー５．ポップアップ非表示及び移動先設定
１．「表示設定詳細」タブをタップ
２．「ポップアップ」から設定を行います。
●[表示・非表示] ⇒ ポップアップ画面の表示・非表示を選択
●[インスタグラム投稿へ遷移] ⇒ チェックを入れると投稿クリックで自分のインスタグラム投稿へ遷移します。
●[画面遷移先URL指定] ⇒ ポップアップ表示の代わりに画面遷移をします。画面遷移先URLを入力します。
※未入力の場合、画面遷移しません。
３．「設定を保存」ボタンをクリック
２ー６．投稿の初期公開設定
１．「表示設定詳細」タブをタップ
２．「取得投稿の初期公開設定」から設定を行います。
●[公開・非公開] ⇒ 毎日最新投稿を自動的に取得しますが、その投稿をそのまま公開するか、または、非公開にして後でお客様ご自身で公開を選択するかを選択
※デフォルトは「公開」です。
３．「設定を保存」ボタンをクリック
２ー７．独自CSS設定
１．「表示設定詳細」タブをタップ
２．「CSS設定」から設定を行います。
●[CSS利用可否] ⇒ 独自CSSを利用可否を選択
●[CSS内容] ⇒ 独自CSS内容をお客様ご自身で記入してください。全てのデザインを自由に変更できます。
３．「設定を保存」ボタンをクリック
※以下はポップアップのボタンの背景色を黒に変えた例です。
３．プロフィール設定方法
１．「SNSアカウント表示編集」タブをタップ
２．「アカウント表示」から設定を行います。
●[アカウント表示名] ⇒ アカウント表示名を入力。
●[アカウント画像] ⇒ 「ファイル選択」をクリックして画像を選択。※選択可能画像サイズは512kまでです。
３．「変更」ボタンをクリック
４．プロフィール変更後の表示
※プロフィール名とプロフィールロゴが以下のように表示されます。
４．投稿設定方法
４ー１．表示／非表示設定
１．「投稿一覧(表示・非表示)」タブをタップ
２．各投稿の「表示」を"On"または"Off"で投稿の表示／非表示ができます。
●[On] ⇒ 投稿が表示
●[Off] ⇒ 投稿が非表示
４ー２．ピン留め設定
１．「投稿一覧(表示・非表示)」タブをタップ
２．投稿の「ピン留め」チェックボックスをチェックすることで投稿をトップに固定できます。
※ピン留め機能で固定できる投稿は3件までです。3件を超える場合、最も古いピン留め投稿と置き換えられます。
※以下はピン留めした投稿の表示例です。
５．S-LINKをWEBページに埋め込む方法
１．右上の「コード表示」ボタンをクリック
２．「コピー」ボタンクリックでS-LINKコードをコピーする
３．S-LINKを表示する、WEBページの場所を決める。
４．HTMLテキストエディターで該当WEBページのHTMLファイルを開き、S-LINKを表示する場所に２．でコピーしたS-LINKコードを貼り付ける
５．ファイル保存し、ブラウザをリロードするとInstagramやFacebook投稿がお客様のページに表示されます。
６．まとめ
インスタを埋め込みし、WEBサイトに表示することは、サイトをフレッシュな最新状態に保てる、お客様の滞在時間を伸ばせる、SEO(検索エンジン最適化)対策になるなど色んなメリットがあります。
豊富なレイアウトデザインを使ってキレイなインスタ投稿写真をデザイン性高いHTMLページにしてみるのはいかがでしょうか。