キーワード検索

テクニカルサポートからの重要なお知らせ

スマートフォン編集モードを使用する

スマートフォンなどのモバイルデバイスはパソコンより画面が小さく、縦長で使われることが多いため、パソコン向けのWebページそのままでは見にくくなってしまいます。ユーザーが閲覧しやすいスペシャルサイトを作るためには、スマートフォンに合わせたレイアウト調整やデザインが必要です。
LiVE2のスライドテンプレートは、あらかじめパソコン、スマートフォン、タブレットそれぞれに合わせたサイトデータを持っており、各デバイスに合わせた表示が可能です。
8-01-01-01.jpg
ページエディタ左上のデバイス切り替えボタンで切り替えて確認することができます。
8-01-01-03.jpg

3デバイス同期機能


スライドの内容を書き換えた場合は、それぞれのスライドに合わせた編集が必要となります。その際に役立つのが「3デバイス同期機能」です。スライドタイトル・本文やアルバム写真、メニュー、ロゴなどのコンテンツに当たる部分を3デバイスで同期させ、内容が共通になるようにします。
3デバイス同期機能のオン/オフは、スライドエディタなどの設定画面右下にある同期アイコンをクリックして切り替えできます。
8-01-01-02b.jpg

一方、背景画像やレイアウトなどのスタイルに当たる部分は同期されません。同期の対象は下表のとおりです。

同期の対象同期の対象外
スライドエディタ〈編集〉タブで設定するもの(スライドタイトル・本文など)〈設定〉〈詳細〉〈背景〉タブで設定するもの
ウィジェット設定画面〈編集〉タブの上半分で設定するもの(バルーンウィジェットの画像など)〈編集〉タブの表示位置・重なり順、〈設定〉タブで設定するもの
ウィジェット自体の有無常に同期される。デバイスごとにウィジェットの有無などを変更することはできない。
メニュー設定画面〈編集〉タブで設定するもの(メニューの項目・リンク)〈設定〉〈詳細〉タブで設定するもの
ロゴ設定画面すべて同期できる。
ページ背景とアクション、ページエフェクト、ページ詳細設定常に同期される。
ページヘッダー、ページフッター常に同期される。表示/非表示はデバイスごとに設定可能
サイト共通フッター常に同期される。表示/非表示はデバイスごとに設定可能

スマートフォン向けにスタイルを調整する


実際にスマートフォン向けにスタイルを調整してみましょう。パソコンモードでスライドタイトルと本文、コンテンツ領域背景などを変更します。
8-01-01-02.jpg
この状態でスマートフォンモードに切り替えると、デフォルトでスライド設定の3モード同期機能がオンになっているため、〈編集〉タブで設定するタイトルと本文、文字色などが反映されています。しかし、〈設定〉タブや〈詳細〉タブで設定するコンテンツ領域の背景やボーダーは反映されていません。そのために文字が読みにくくなっています。
8-01-01-04.jpg
スライドエディタを開いて、スマートフォン向けにコンテンツ領域の背景などを設定します。
8-01-01-05.jpg
スマートフォン向けでもコンテンツ領域に濃いグレーを設定したので、文字が読みやすくなり、デザインにも統一感が出ました。
8-01-01-06.jpg

Copyright (c) digitalstage inc. All Rights Reserved.