レスポンシブ Web デザイン73
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 73 です。
トップページ（index.html）に、スライドショーを配置したテンプレートです。
Free Template 73 をダウンロード（zip）
サンプル（動作確認）はこちら
無料テンプレート 73 には、猫のフリー写真素材と桜のフリー写真素材を使用しました。そのままご利用頂いても構いませんし、他の写真に変更することもできます。
スポンサーリンク
タイトルの画像について
タイトルの画像は、images フォルダの title-small.png と title-big.png です。
画面の横幅が 400px 未満の場合は、title-small.png（幅 250px 高さ 80px）が表示されます。
画面の横幅が 400px 以上の場合は、title-big.png（幅 280px 高さ 80px）が表示されます。
タイトルの画像は、高さ 80px で作成してください。
横幅は変更しても構いませんが、同じくらいのサイズで作成すると、各デバイスで収まりが良いかと思います。
透過 PNG で作成すると、背景にマッチします。
同じファイル名で作成して入れ替えれば、設置は完了です。
画像を切り替える値（400px）は、style.css で編集できます。
style.css の 250行目
@media only screen and (min-width: 400px) { /* site_title img 切り替え */
サンプル画像は、Adobe Photoshop CC で作成しました。
フォントファミリーは、Bradley Hand ITC です。
メニューの画像について
メニューの画像（images フォルダの home.png／news.png／guide.png／faq.png／access.png）は、高さ 30px で作成してください。
横幅は 180px 以内で作成してください。
透過 PNG で作成すると、背景にマッチします。
メニュー間の余白は style.css で設定されているので、余白は要りません。
ファイル名を変更した場合は、HTML ファイル（.html）内の、画像のファイル名も変更してください。
メニュー（nav）を展開する画面幅は、style.css と script.js で編集できます。
style.css の 285行目
@media only screen and (min-width: 950px) { /* nav 展開の切り替え / js の min_width（ブレークポイント）も同じ値に設定 */
script.js の 13行目
var min_width = 950; // ブレークポイント[950]
画面の横幅が 950px 未満の場合は、メニューは格納されます。
画面の横幅が 950px 以上の場合は、メニューは展開されます。
赤字の値を変更すると、格納・展開する横幅が変わります。
ブラウザの幅を狭めて確認すると、適正な値が分かるかと思います。
編集内容に合わせて、ご自由にカスタマイズしてください。
スポンサーリンク