レスポンシブ Web デザイン68～72

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

ヘッダーに動画（HTML5 の video タグ）を配置しました。

PLAY VIDEO をクリックすると、メインの動画（音声あり）と入れ替わります。

無料テンプレート68

無料テンプレート 68～72 には、滝のフリー動画素材と滝のフリー写真素材を使用しました。そのままご利用頂いても構いませんし、他の動画や写真に変更することもできます。

テンプレートの編集について

無料テンプレート 63～67 のヘッダーを動画に入れ替えたテンプレートなので、編集方法も共通の部分が多いです。

ブロックの増やし方や script.js などの編集については、無料テンプレート 63～67 の解説をご確認ください。

動画の設定や編集については、このページと無料テンプレート 68～72 の編集方法をご確認ください。

サーバーによっては、.htaccess（ディレクトリ単位の設定ファイル）での指定が必要となります。

動画が再生されない場合は、以下を .htaccess に追加してみてください。

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm

images フォルダには、top-video と main-video が 4ファイルずつあります。

top-video は、アクセス時に表示される、ヘッダーの動画と画像です。

main-video は、PLAY VIDEO をクリックした時に表示される、ヘッダーの動画と画像です。

main-video が必要ない場合は、index.html の 62行目を削除してください。

main-video を表示するボタン（index.html の 62行目）
<p id="play_button">（三角） PLAY VIDEO</p>

上のコードを削除すると、main-video に切り替えるボタンが削除されます。

main-video は必須ではないので、ご都合に合わせて変更してください。