フルCSSテンプレートを利用してサイトを作成している場合、作成済みのパソコン用のページをスマートフォン用のページに変換して追加することができます。
文章やリンク先など、変更した内容をそのまま利用できるので、手軽にスマートフォン用のページが作成できます。
▼注意
- 変換できるのは、パソコン用のトップページと同じテーマのデザインで、トップページから直接リンクされる1階層目のページだけです。
- 背景画像は、操作中に選択するフルCSSスマートフォンテンプレートの背景画像になります。
※パソコン用のページを作成したときに、[フルCSSテンプレートの保存]ダイアログボックスで基本情報を入力している場合は、背景画像の文字列が基本情報の内容に置き換わります。
- フルCSSテンプレートを利用していないパソコン用のページを変換して、スマートフォン用のページを作成したい場合は、以下のFAQを参照してください。
■操作
- フルCSSテンプレートで作成したサイトを開きます。
- スタイルに応じて以下の操作を行います。
※〔かんたん〕〔スタンダード〕:かんたんナビバーの[スマホ追加/同期]ボタンをクリックします。
※〔エディターズ〕:メニューバーから[サイト-スマートフォンページの追加/同期]を選択します。
[スマートフォンページの追加/同期]ダイアログボックスが表示されます。
- [PCページを変換して作成]ボタンをクリックします。
[サイトからスマートフォンページを作成]ダイアログボックスが表示されます。
- 一覧からデザインを選択します。
- [詳細設定]ボタンをクリックします。
[詳細設定]ダイアログボックスが表示されます。
- 左上の一覧で各ページをクリックして、[プレビュー]でページのイメージを確認します。
※プレビューには、タイトル画像の会社名や施設名といった、背景画像に含まれる基本情報は反映されていません。
- [保存先フォルダ名]に、スマートフォン用のページを保存するフォルダー名を指定します。
※フルCSSテンプレートで作成したサイトフォルダー内に、スマートフォン用のページを保存するフォルダーが作成されます。
- 目的に応じて、そのほかの項目を設定します。
- [サイトのトップページにスマートフォンページへのリンクを挿入する]をオンにすると、パソコン用のトップページに、スマートフォン用のトップページへのリンクを設定します。
- [トップページを分割する]をオンにするとパソコン用のトップページをスマートフォン用のトップページ(index.html)とサブページ(sub_index.html)に分割します。トップページにはメニューやトップページ用の画像、サブページにはそのほかの情報が表示され、スマートフォンでの閲覧に適した、すっきりしたトップページが作成できます。
- [スマートフォンページへリダイレクトする]をオンにすると、パソコン用のトップページをスマートフォンで読み込んだ場合、自動的にスマートフォン用のページが表示されるようになります。
- [画像サイズと画像形式を推奨値にする]をオンにすると、パソコン用ページで使っている画像サイズが大きいときに、スマートフォンで見やすいサイズに変換します。サイズが300ピクセル以上の画像は、300ピクセルに変換されます。
- [サイドバーを表示しない]をオンにすると、パソコン用のページのサイドバーを、スマートフォン用のページでは表示しません。
- [タイトル画像を指定する]をオンにすると、スマートフォン用のページのタイトル画像を指定することができます。指定した画像を反映したページは、プレビューで確認できます。
- [OK]ボタンをクリックします。
[サイトからスマートフォンページを作成]ダイアログボックスに戻ります。
- [作成]ボタンをクリックします。
[スマートフォンページへの変換結果]ダイアログボックスが表示され、変換状況が表示されます。
- 変換が終了したことを確認して、[閉じる]ボタンをクリックします。
スマートフォン用のページが作成され、作成したスマートフォン用のページのプレビューが表示されます。
- メニューバーの[サイト-ビジュアルサイトビューを開く]を選択します。
ビジュアルサイトビューの画面が表示されます。
- リンク構造に、スマートフォン用のページが追加されていることを確認します。
※[サイトのトップページにスマートフォンページへのリンクを挿入する]と、[スマートフォンページへリダイレクトする]のどちらもオフにした場合、スマートフォン用のページはビジュアルサイトビューの[リンクされていないHTML ファイル]に表示されます。
◆補足
- スマートフォン用のページは、1種類しか追加できません。スマートフォン用のページを追加したあとで、もう一度追加を行うと、作成済みのページが上書き保存されます。
- 作成済みのサイトにスマートフォン用のページを追加すると、サイトのデザインを変更する場合に、パソコン用のページとスマートフォン用のページのどちらのデザインを変更するか確認するメッセージが表示されます。どちらのデザインも変更したい場合は、1つずつ変更してください。
■関連情報