既存のサイトをスマホ対応するための手順

はじめに

すでにサイト開設していて長年運営している場合、Expression Web 4で同じサイト内で作業すると混乱してしまいます。レスポンシブWebデザインのサイトに移行するには、既存のサイトデータはそのままにして、新しくExpression Web 4でサイトを作成して、その都度データをインポートするといいと思います。

とりわけ、成長したサイトの場合は旧サイトと新サイトに分けたほうがいいです。Expression Web 4で新しいサイトと既存のサイトの両方開いておき、タスクを切り替えながら作業するとよいでしょう。

できれば、大きな解像度を持つディスプレイを導入するか、ほかにディスプレイを接続してマルチディスプレイ環境にした方がより快適に、より効率的に行えるかと思います。

スマホ対応するためのステップ

たとえば以下のステップでスマホ対応のサイトに移行していきましょう。必ずしもこれが正しいとは限りませんが、参考にしてください。

1. Expression Web 4上で新しいサイトを作成する
2. 作成した新しいサイト内に、カテゴリごとにフォルダーで分類する
3. 新しいサイトにその都度必要なデータをインポートしていく
4. レスポンシブWebデザイン仕様のトップページ（フォルダーリストでアイコンが付いたファイル）を完成させる
5. レスポンシブWebデザインのダイナミックWebテンプレートを作成する
6. 既存のWebページのコンテンツ部分だけ残して、それぞれにダイナミックWebテンプレートを適用する

もし、ホームページフォルダー直下にファイルを羅列してたら管理が大変です。論理的にディレクトリ構造でサイトを構築しなおすことで、閲覧者にとっても今どこにいるのか明確になりますし、整理されたファイルやフォルダーの方が管理する側も楽になります。詳しくは『Webサイト構築のポイント』の記事を参考にしてください。

FrontPage固有のWebコンポーネント機能が使われている場合

リンクバーや共有枠を使ったホームページからの移行は比較的難易度が高いかと思います。ただし、大事なのは「コンテンツ」部分なので、ダイナミックWebテンプレートとCSSを組み合わせてテンプレート部分にヘッダーやナビゲーションをデザインしていくのがよいでしょう。共有枠は残念ながらExpression Web 4では対応していません。共有部分が真っ白になっても、コンテンツ部分は残っているはずです。おそらく問題ないかと思います。

リンクバーや共有枠の要素をすべて除去して、プレーンなコンテンツ部分だけ残してから移行したほうがいいかもしれません。

共有枠で構成されたホームページからレスポンシブWebデザイン対応のダイナミックWebテンプレートに移行するには、コンテンツの中身をダイナミックWebテンプレートの編集可能な領域に当てはめていくとよいでしょう。ただし、そのコンテンツ部分をどの編集可能な領域に当てはめるのか確認する画面が出てくるので、メインコンテンツの編集可能な領域を指定すればOKです。詳しくは『本文だけのページにダイナミックWebテンプレートを適用するには』をご覧ください。

前のページ 次のページ