【S-LINK】デザイン詳細設定方法！見栄えが良くなる
S-LINKサービスの特徴の1つはです。
現時点で、８パータンのレイアウトデザインがありますが、これからもレイアウトデザインを追加する予定です。
レイアウトを変えるだけでお客様のWebページができますので、たまにはレイアウトを変えてみてはいかがでしょうか。
S-LINKをもっとキレイに表示するため、そして、豊富なレイアウトデザインを活用するため、
詳細設定方法について説明します。
目次
- １．レイアウト詳細設定方法
- １ー１．グリッドレイアウト
- １ー２．ギャラリーレイアウト
- １ー３．カードレイアウト
- １ー４．リストレイアウト
- １ー５．カルーセルレイアウト
- １ー６．スライダーレイアウト
- １ー７．ロゴグリッドレイアウト
- １ー８．WallGridレイアウト
- １ー９．カードスライダーレイアウト
- ２．共通パーツ設定方法
- ２ー１．ヘッダー設定
- ２ー２．フッター設定
- ２ー３．絞り込み設定
- ３．プロフィール設定方法
- ４．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単位)で入力。※デフォルトは未入力です。
●[背景色] ⇒ 入力欄をクリックして背景色を指定。※未指定の場合、ホワイトになります。
●[ページング表示・非表示] ⇒ ページ移動ボタンの表示・非表示を選択
４．「設定を保存」ボタンをクリック
２．共通パーツ設定方法
２ー１．ヘッダー設定
１．「表示設定詳細」タブをタップ
２．「ヘッダー」から設定を行います。
●[見出し] ⇒ 見出しの内容を入力。 ※未入力で非表示になります。
●[ヘッダーサイズ] ⇒ ヘッダーのフォントサイズを「小、中、大、特大」から選択。
●[テキスト色] ⇒ 見出しのテキスト色を指定。
●[説明文] ⇒ 説明文の内容を入力。
●[テキスト色] ⇒ 説明文のテキスト色を指定。
３．「設定を保存」ボタンをクリック
２ー２．フッター設定
１．「表示設定詳細」タブをタップ
２．「フッター」から設定を行います。
●[フッターの表示・非表示] ⇒ フッター(InstagramまたはFacebookボタン)の表示・非表示を選択
※フッターボタンからお客様のSNS「InstagramまたはFacebook」へ移動できます。
３．「設定を保存」ボタンをクリック
２ー３．絞り込み設定
１．「表示設定詳細」タブをタップ
２．「表示キーワード」から設定を行います。
●[表示キーワード利用] ⇒ 絞り込み機能使用の有無を選択
●[ハッシュタグまたはキーワード] ⇒ 絞り込みする検索キーワードまたはハッシュタグを入力
３．「設定を保存」ボタンをクリック
３．プロフィール設定方法
１．「SNSアカウント表示編集」タブをタップ
２．「アカウント表示」から設定を行います。
●[アカウント表示名] ⇒ アカウント表示名を入力。
●[アカウント画像] ⇒ 「ファイル選択」をクリックして画像を選択。※選択可能画像サイズは512kまでです。
３．「変更」ボタンをクリック
４．プロフィール変更後の表示
※プロフィール名とプロフィールロゴが以下のように表示されます。
４．S-LINKをWEBページに埋め込む方法
１．右上の「コード表示」ボタンをクリック
２．「コピー」ボタンクリックでS-LINKコードをコピーする
３．S-LINKを表示する、WEBページの場所を決める。
４．HTMLテキストエディターで該当WEBページのHTMLファイルを開き、S-LINKを表示する場所に２．でコピーしたS-LINKコードを貼り付ける
５．ファイル保存し、ブラウザをリロードするとInstagramやFacebook投稿がお客様のページに表示されます。
５．まとめ
インスタを埋め込みし、WEBサイトに表示することは、サイトをフレッシュな最新状態に保てる、お客様の滞在時間を伸ばせる、SEO(検索エンジン最適化)対策になるなど色んなメリットがあります。
豊富なレイアウトデザインを使ってキレイなインスタ投稿写真をデザイン性高いHTMLページにしてみるのはいかがでしょうか。