ベクトルドロー・レベルゼロ+

ホーム > コンピュータ > webツール > Mobile対応への道

新しいindex.htmlに既存サイトのindex.htmlの内容をコピーします

作成日 2015.01.20
最終更新日 2015.01.20

これまでの経緯

Googleウェブマスターから警告メールをもらい、既存サイトのモバイル対応をすることを決意しました。 時間短縮のため、レスポンシブデザインの書籍 で利用してあるサンプルをテンプレートとして使用して、デザインを変更していくことにしました。 フォルダを作成し、書籍のサンプルコードをコピーして貼り付けました。さらに、バックアップ用のコピーも作成しました。

まず、行う事は、

書籍サンプルのindex.htmlをコピーして名前を変更します。

ファイル名の変更
index.html : 書籍のサンプルコード
index_BookSample.html : 書籍のサンプルコード
index_ExistingSite.html : 既存サイトのindex.html

新しいindex.htmlの該当箇所に既存のindex.htmlの内容をコピーします

index.htmlに既存サイトのindex.htmlの内容「index_ExistingSite.html」を入力します。 このような作業は、WISIWYG型のエディタが使いやすいので、 BlueGriffon を使うことにします。

レイアウト構成を意識しながらコピーしましょう。

レイアウト構成を意識しながらコピーしていきます。 同じ位置を示すレイアウト構成を表すタグ内の内容をコピーしてはりつけます。解析タグや、広告タグも合わせて移動しておきます。

既存サイトの内容を張り付けました

htmlを既存のサイトの内容に変更しました。レスポンシブビュー

次は、cssを修正します。

Mobile対応への道戻る << | >> 次へ
Mobile対応への道
Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system