レスポンシブ Web デザイン74
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 74 です。
スライドショー、写真ギャラリー（モーダルウィンドウ）、会社概要のテーブルなどを用意しました。
企業用のウェブサイトとしても、使いやすいテンプレートかと思います。
Free Template 74 をダウンロード（zip）
サンプル（動作確認）はこちら
無料テンプレート 74 には、お菓子のフリー写真素材を使用しました。そのままご利用頂いても構いませんし、他の写真に変更することもできます。
スポンサーリンク
タイトル画像について
タイトル画像は、images フォルダの title.png です。
タイトル画像は、高さ 80px で作成してください。
横幅に決まりはありませんが、同じくらいのサイズで作成すると、各デバイスで収まりが良いかと思います。
透過 PNG で作成すると、背景にマッチします。
同じファイル名で作成して入れ替えれば、設置は完了です。
サンプル画像は、Adobe Photoshop CC で作成しました。
フォントファミリーは、Bauhaus 93 です。
ヘッダーとフッターのメニューについて
メニューは、増やすことも減らすこともできます。
ヘッダーのメニュー
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="block.html">Block</a></li>
<li><a href="modal.html">Modal</a></li>
<li><a href="faq.html">Faq</a></li>
<li><a href="access.html">Access</a></li>
</ul>
</nav>
li タグを増やせば、メニューを増やせます。
li タグを減らせば、メニューを減らせます。
各ページ（.html）で、同じ編集を行ってください。
フッターのメニュー（画面幅 800px 以上の場合は表示）
<p id="footer_nav"><a href="index.html">Home</a> | <a href="block.html">Block</a> | <a href="modal.html">Modal</a> | <a href="faq.html">Faq</a> | <a href="access.html">Access</a></p>
<p id="footer_nav"> ～ </p> の間に、メニューを記載してください。
各ページ（.html）で、同じ編集を行ってください。
ヘッダーのメニューを増やした場合は、メニューが折り返さないように注意してください。
ヘッダーのメニューが長くなると、画面幅によっては折り返して見えなくなります。
その場合は、メニューが格納・展開する画面幅を変更してください。
ヘッダーのメニューを格納・展開する画面幅は、style.css と script.js で編集できます。
style.css の 402行目
@media only screen and (min-width: 800px) { /* メニュー格納 | メニューの幅により変更 ｜ .js の var min_width = 800; とセットで変更 */
script.js の 14行目
var min_width = 800; // ブレークポイント[800]
画面幅が 800px 未満の場合は、メニューは格納されます。
画面幅が 800px 以上の場合は、メニューは展開されます。
赤字の値を変更すると、格納・展開する横幅が変わります。
ヘッダーのメニューを長くした場合は、数値を増やしてください。
ブラウザの幅を狭めて確認すると、適正な値が分かるかと思います。
スライドショーについて
スライドショーは無料テンプレート 73 と同じなので、無料テンプレート 73 の編集方法をご確認ください。
写真の枚数は、2枚以上で自由に設定できます。
写真のサイズや縦横比も自由です。
スライドショーのスピードを調整することもできます。
スポンサーリンク