レスポンシブ Web デザイン75・76
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 75・76 です。
無料テンプレート 74 をベースに作成した、和風のデザインです。
スライドショー、写真ギャラリー（モーダルウィンドウ）、会社概要のテーブルなどを用意しました。
Free Template 75 をダウンロード（zip）
サンプル（動作確認）はこちら
Free Template 76 をダウンロード（zip）
サンプル（動作確認）はこちら
無料テンプレート 75・76 には、和菓子のフリー写真素材を使用しました。そのままご利用頂いても構いませんし、他の写真に変更することもできます。
スポンサーリンク
無料テンプレート 75・76 の編集について
無料テンプレート 74 がベースなので、無料テンプレート 74 の編集方法も参考にしてください。
ヘッダーメニューの格納・展開、スライドショー、ギャラリーとモーダルウィンドウの仕組みは共通です。（行数や数値は異なるケースがございます）
ギャラリーのサムネイルのサイズは、幅 285px に変更しました。
画像サイズに決まりはありませんが、幅 285px で作成すると、各デバイスで収まりが良いと思います。
BASE フォルダの画像について
BASE フォルダには、編集用の画像（透過 PNG）を梱包しました。
title.png のように、2パターン用意されている場合もあります。
こちらに文字や画像を載せて、images フォルダの画像に上書きしてください。
もちろん、BASE フォルダの画像を使用せずに、新しく作成しても構いません。
title.png（無料テンプレート 75 では、幅 214px 高さ 182px）のサイズを変更した場合は、style.css も編集してください。
無料テンプレート 75「style.css の 429行目～433行目」
/* ie8 以下 */
.ie8_under #site_title {
width: 214px;
height: 182px;
}
無料テンプレート 76「style.css の 435行目～439行目」
/* ie8 以下 */
.ie8_under #site_title {
width: 165px;
height: 95px;
}
赤字が変更箇所です。
上記は Internet Explorer 8 以下で、できるだけデザインを保持するためのコードです。それ以外のブラウザには影響しません。
BASE フォルダをアップロードしても問題はありませんが、アップロードの必要はありません。
ヘッダーメニューと contact.png について
ヘッダーメニューのテキストは、メニューの範囲に収まる文字数にしてください。
contact.png は、画面幅が 1450px 以上のときに表示されます。
contact.png を表示したくない場合は、style.css を編集してください。
無料テンプレート 75「style.css の 520行目～525行目」
無料テンプレート 76「style.css の 530行目～535行目」
#contact {
z-index: 1;
position: absolute;
display: block;
right: 0px;
}
赤字の CSS コードを削除すると、contact.png は非表示になります。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク