SITE PUBLISではスマートフォンの機種ごとに、画像を画面に収まるように自動的にリサイズ処理を行います。
スマートフォンの画像リサイズ処理を行うには、次の設定がされている必要があります。
設定1．ページの出力先設定が「スマートフォン独自の設定をする」に設定されている
設定2．ページデザイン設定が「スマートフォン独自のデザイン設定をする」となっている
設定1. ページの出力先が「スマートフォン独自の設定をする」に設定されている
1 ページコントロールエリアの「ぺージの出力先設定」をクリックし、ページ出力先設定画面を開きます
2 「スマートフォンに表示」にチェックして、「スマートフォン独自の設定をする」を選択します
設定2. ページデザイン設定が「スマートフォン独自のデザインを設定する」となっている
1 ページコントロールエリアの「デザイン設定」ボタンから、ページデザイン設定画面を開きます
2 上部のスマートフォンアイコンを選択してから、「このページ独自の設定をする」を選択します
設定3. ページデザイン設定の「基本設定＞ページのプロパティ」の「ページ幅」が「100%」になっている
1 ページコントロールエリアの「デザイン設定」ボタンをクリックし、ページデザイン設定画面を開きます
2 ページ幅を100%に設定します
設定4. ページデザイン設定の「モバイル設定＞スマートフォンviewport設定」の自動設定が有効になっている
1 ページコントロールエリアの「デザイン設定」ボタンをクリックし、ページデザイン設定画面を開きます
2 「モバイル設定」タブを開きます
3 以下のいずれかの設定を行います
「自動設定」にチェックをいれます
または、「自動設定」と同じ設定となるように次の設定を行います。
- 「表示幅」を「端末画面幅に合わせる」にする
- 「拡大縮小設定」のチェックを外します
注意事項
- 画像のリサイズは、縦向き表示の場合に最適に表示されるように調整されます。
- スマートフォンとして認識可能であっても、機種まで判別できなかった場合には、画面幅320pxを基準としてリサイズを実行します。
■スマートフォン向けページを構築する際のポイント
スマートフォンには縦向き表示と横向き表示があるため、いずれの場合も統一的なデザインを提供するにはページ幅を100%（リキッドデザイン）に設定することをお勧めします。
- 画像の属性(width="数値")やCSS(style="width:数値")で幅を指定することで、縦向きから横向き表示に変更した場合に思わぬデザイン崩れが発生することがありますので、画像幅に固定値を指定することはお勧めいたしません。
- 画像の横幅に100%を設定することで、縦向き表示、横向き表示のいずれの場合でも、画面幅にフィットするような画像の配置が実現可能ですが、画像が引き伸ばされた状態（ぼやけた表示）となりますので、お勧めいたしません。
■スマートフォンの画面内にフィットしたデザインにするには？
●ページ幅100%の場合
- 「ページデザイン設定」画面を開く。
- 「基本設定」タブを開く。
- 「ページのプロパティ」の「ページ幅」で100%を選択。
- 「モバイル設定」タブを開く。
- 「スマートフォンviewport設定」の「自動設定」にチェックする。
●ページ幅固定の場合
- 「ページデザイン設定」画面を開く。
- 「基本設定」タブを開く。
- 「ページのプロパティ」の「ページ幅」に480ピクセルを指定。（ページ幅より大きな横幅を持つ画像をページ内に配置している場合、デザイン崩れが発生する場合がありますので、画像の横幅はページ幅に収まるようにご注意ください。）
- 「モバイル設定」タブを開く。
- 「スマートフォンviewport設定」の「自動設定」にチェックする。
