Cafi Netつながる情報技術

レスポンシブ Web デザイン58

スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート58です。

無料テンプレート58のサンプル

2014/2/19 不要な CSS コードがあったので削除しました。(動作に変更はありません)

ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。(レイアウトを切り替えた場合は、メニューを正しい位置に表示するために、再読み込みが必要な場合があります)

無料テンプレート58 は、テンプレート57 にスライドショーを追加したテンプレートです。

スライドショーなしが良い場合は、テンプレート57 をご利用ください。スライドショーありが良い場合は、テンプレート58 をご利用ください。

無料テンプレート58

Free Template 58 をダウンロード(zip)

無料テンプレートの利用規約はこちらです。

スライドショーの特徴は、次の通りです。

写真の枚数は、2枚以上で自由に設定できます。

写真の縦横比は、自由に設定できます。(写真の幅は 1000px にしてください。写真の高さは自由です。つまり、正方形でも長方形でも OK です。各写真は同じサイズにしてください。)

スライドショーのスピードを調整できます。

レスポンシブ Web デザイン対応のスライドショーです。

写真をクリック(タップ)すると、スライドショーが停止します。同時に「戻るボタン」と「進むボタン」が表示され、スライドショーを操作できます。もう一度、写真をクリックすると、スライドショーが再開します。

「戻る」と「進む」の文字は変更できます。矢印などでも構いません。

Internet Explorer 8 以下では、スライドショー部分は表示されないので、テンプレート57 と同じデザインになります。

写真を 5枚から 7枚に変更(index.html)
<!-- スライドショー ここから -->
<div class="content_wrap_slide">
<div class="max_width">
<article class="content">
<div id="stage">
<ul>
<li><img src="images/photo1.jpg"></li>
<li><img src="images/photo2.jpg"></li>
<li><img src="images/photo3.jpg"></li>
<li><img src="images/photo4.jpg"></li>
<li><img src="images/photo5.jpg"></li>
<li><img src="images/photo6.jpg"></li>
<li><img src="images/photo7.jpg"></li>

</ul>
</div><!-- stage -->
<div id="slide_control"><button id="prev_button">戻る</button> <span id="number_last"></span> <button id="next_button">進む</button></div>
</article>
</div><!-- max_width -->
</div><!-- content_wrap_slide -->
<!-- スライドショー ここまで -->

スライドショーの写真は 5枚設定されていますが、増やすことも減らすこともできます。(写真のファイル名も自由に変更できます)

例えば 7枚に増やしたい場合は、上のように <li> タグを増やしてください。

スライドショーは、<li> タグの上から順番に表示されます。

補足として、写真は少し縮小して表示されるので、幅約 941px で表示されます。

写真が幅約 941px より小さいと、パソコンで見た時にスライドショーの右側に空白ができてしまいます。(動作には問題ありません)

スピードを変更(script.js の 6行目~ 9行目)
// スライドショーのスピードを変更
var first_photo = 2000; // 最初の写真を何秒かけて表示するか(1000 = 1秒)
var change_photo = 2000; // 写真を何秒かけて切り替えるか
var slide_time = 3000; // 何秒ごとに写真の切り替えを実行するか(first_photo と change_photo より長く設定
var change_photo_click = 800; // 写真を何秒かけて切り替えるか(戻る・進むボタンをクリックしたとき)

スライドショーのスピードは、script.js の 6行目~ 9行目で変更できます。

変更できるのは 4項目で、それぞれコメントに記載の通りです。

例えば、change_photo の数値を小さくすると、キビキビと切り替わるスライドショーになります。

例えば、slide_time の数値を大きくすると、1枚ずつゆっくり見せることができます。

数値を変更するだけなので、サイトのテーマに合わせて変更してみてください。

当サイトの無料テンプレートがお役に立ちましたら幸いです。