【S-LINK】新レイアウトデザイン「ウォールグリッド(WallGrid)」について
S-LINKサービスで新レイアウトのサービスを開始しました。
、お客様のキレイなInstagramとFacebook写真を使ってさせます。表示設定次第で様々なところに使えます。
「ウォールグリッド(WallGrid)」の特徴、設定方法、デザイン例などについて解説します。
目次
- １．「ウォールグリッド(WallGrid)」レイアウトの３つの特徴
- １ー１．自由なデザイン
- １ー２．レスポンシブ対応でキレイな表示
- １ー３．画像投稿だけを自動表示
- ２．レイアウト設定方法
- ３．InstagramやFacebook投稿をWEBページ埋め込み方法
- ４．レイアウトデザイン例
- ５．まとめ
１．「ウォールグリッド(WallGrid)」レイアウトの３つの特徴
本レイアウトは画像をすき間なしに1行に5枚並べて
1行から4行まで指定し、表示できるのでキレイな背景みたいに使うことが出来ます。
１ー１．自由なデザイン
WEBページの横幅全体に使うこともできるし、指定した領域中で使うこともできますので
自由なデザインが可能になります。1行から4行まで、つまり5枚画像から20枚画像を表示できます。
画像によって色んな雰囲気を出すことができるので、カフェメニュー、商品カタログなど様々なところで使えます。
１ー２．レスポンシブ対応でキレイな表示
全幅表示の場合、各デバイス（PC、タブレッド、スマホ）毎のレスポンシブ対応で
どのデバイスでも画像がキレイに表示されます。そのため、サイトに訪れたお客様の色んなデバイスに最適な画像で表示させ、商品、食べ物などの魅力を伝えることができます。
１ー３．画像投稿だけを自動表示
デザイン性高いレイアウトを表示する場合、動画は適してないです。
そのため、動画を除いた画像だけを自動表示します。新しい投稿により画像も変わるので飽きない、いつも新鮮なWEBページにできます。
２．レイアウト設定方法
１．「表示設定詳細」タブをタップ
２．「レイアウト選択」から[WallGrid]を選択
３．「基本表示」から[初期投稿表示数:5, 10, 15, 20]を選択、
[ページング表示・非表示：ページ移動ボタンの表示・非表示]を選択
４．「設定を保存」ボタンをクリック
※この処理を行わないと設定処理が完了しません。ご注意ください。
３．InstagramやFacebook投稿をWEBページ埋め込み方法
１．右上の「コード表示」ボタンをクリック
２．「コピー」ボタンクリックでSリンクコードをコピーする
３．Sリンクを表示する、WEBページの場所を決める。
４．HTMLテキストエディターで該当WEBページのHTMLファイルを開き、Sリンクを表示する場所に２．でコピーしたSリンクコードを貼り付ける
５．ファイル保存し、ブラウザをリロードするとInstagramやFacebook投稿がお客様のページに表示されます。
４．レイアウトデザイン例
各デバイス毎[PC、タブレッド、スマホ]の表示例です。
＜PC表示＞
＜タブレッド表示＞
＜スマホ表示＞
５．まとめ
インスタを埋め込みし、WEBサイトに表示することは、サイトをフレッシュな最新状態に保てる、お客様の滞在時間を伸ばせる、SEO(検索エンジン最適化)対策になるなど色んなメリットがあります。
新レイアウトデザイン「ウォールグリッド(WallGrid)」を使ってキレイなインスタ投稿写真をデザイン性高いHTMLページにしてみるのはいかがでしょうか。