「独自レイアウト」を選択している時に「スマートフォン表示」の機能を有効にすると、スマートフォンでホームページを閲覧した時に、スマートフォンでの表示に最適化された専用のレイアウトで表示することができる。スマートフォン用のレイアウトは13種類用意されているので、好きなものを選んで反映することができる。

• 029-1 スマホ表示が有効なのを確認にする
• 029-2 スマホで表示する時の表示レイアウトを指定する
• 029-3 スマホ表示の有効／無効の切り替え
• 029-4 スマホ表示ではサイドバー内容は表示されない
• 029-5 スマホ表示でのレイアウトのカストマイズ
• 029-6 スマホ表示で画像表示を記述する

［スマートフォン表示］のプレビューの表示／非表示スイッチが［オフ］の状態の時はスィッチをクリックし、表示される［有効にする］ボタンをクリックし、スマートフォン表示プレビューを有効にする。

スマホ用のレイアウトが表示される。現在のレイアウトは、他のレイアウトよりも濃く表示されている。

One から Thirteen までの名前が付いた表示レイアウトから選択しクリックする。

画面の一番下までスクロールし、［保存］ボタンをクリックする。

スマホでホームページを表示すると、選択したスマホ表示が反映される。

スマートフォン表示を有効にしたくない場合は、画面の右上の「スマートフォン表示」ボタンをクリックする。スマートフォン表示の機能が無効になり、スマートフォンで表示した時もパソコンで表示した時と同じように表示される。

スマートフォン表示を有効にすると、サイドバーに作成したコンテンツ（全ページに共通で表示されるコンテンツ）が表示されなくなってしまいます。会社やお店の問い合わせ先や営業時間などの重要な情報が、サイドバーにしか掲載されていないというような状態にならないように気をつける必要があります。

［独自レイアウト］を「スマートフォン表示」を有効にする時に、スマートフォンで表示専用のCSSを編集することができる。

スマートフォン用のレイアウトは13種類用意されているが、色などは決まっているため、パソコンで表示したときとイメージが変わってしまう場合がある。そのような時に、スマートフォン用のCSSを書き込んでレイアウトをカスタマイズできる。

独自レイアウトの編集ページの［ファイル］タブで、画像をアップロードする。

スマートフォン表示が有効になってない場合は、スマートフォン用レイアウトのCSSを編集することはできない。画面右上の「スマートフォン表示」ボタンをクリックして、スマートフォン表示の機能を有効にする。

CSSで画像を追加する記述位置をクリックしてカーソルを合わせ、［画像の利用］ボタンをクリックする。

アップロードした画像のリストが表示されるので、中から使用したい画像を選択してクリックする。

カーソルのある位置に画像を表示するためのCSSが追加される。

アップロードした画像は、URLではなくファイル名を指示します。

例：　url(guide.gif)

スマホ用のCSSが反映して表示される。