レスポンシブ Web デザイン56
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート56です。
ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。（レイアウトを切り替えた場合は、メニューを正しい位置に表示するために、再読み込みが必要な場合があります）
無料テンプレート56 は、無料テンプレート51～55 のヘッダーを画像にしたテンプレートです。
また、コンテンツ部分を 1カラム・2カラム・3カラムから選択できるようにしました。
共通の部分が多いので、無料テンプレート51～55 の編集方法の解説も参考にして頂けたら幸いです。
無料テンプレート56 は、ヘッダーのメイン画像を入れ替えることができます。
スポンサーリンク
photo1.jpg ～ photo8.jpg まで、8枚のメイン画像を用意しました。
もちろん、ご自身で用意した画像を設定することもできます。
メイン画像のサイズは、幅 2000px 高さ 800px にしてください。
幅 2000px 高さ 800px ではなくても設定できますが、サイズは矯正されます。
つまり、小さな画像であれば引き伸ばされ、縦横比が違えば歪みます。
images フォルダは、サイトの画像を保存して整理するためのフォルダなので、メイン画像も images フォルダに保存してください。
style.css を開いて、header と .ie8_under header にメイン画像のファイル名を入力してください。
上の画像では photo1.jpg が指定されていますが、2～8 に数字を変更すればメイン画像が切り替わります。
ご自身でメイン画像を用意した場合は、その画像のファイル名を入力してください。
.ie8_under header は、Internet Explorer 8・7・ 6 用です。
古いブラウザでの閲覧についてですが、Internet Explorer 8・7 はカラムも含め問題ありませんでした。（メニュー背景のバーが表示されないなど、多少の違いはございます）
Internet Explorer 6 では、2カラムと 3カラムは 1カラムとして表示されるように設定されています。
Internet Explorer 8 は、実機での確認となります。
Internet Explorer 7・ 6 は、シミュレーターでの確認となります。
最終確認日は 2014/2/4 です。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク