無料テンプレート63～67の設定

無料テンプレート 63～67（レスポンシブ Web デザイン）の編集方法を解説します。

ダウンロードしたファイルには、index.html／style.css／script.js などが含まれますが、編集が必須なのは index.html のみです。

style.css と script.js の編集は任意です。

コンテンツのフェードインについて

初期設定では、スクロールした時に、上のブロックを超えると下のブロックがフェードインするように設定されています。

この機能は、タッチデバイスではオフになるので、タッチデバイスではコンテンツは最初から表示された状態です。

様々なコンテンツの高さやデバイスでも、コンテンツが非表示のままにならないように、ページの下部に到達すると、上のブロックを超えなくてもフェードインするように設定されています。

2つのナビゲーション（nav）について

index.html には、ナビゲーション（nav）が 2つあります。

ブロック1 の中にある nav は、常に表示されているナビゲーションです。（画面幅が 600px 未満のデバイスでは、メニューボタンを押すと表示されます）

その下にある nav は、フェードイン・フェードアウトするナビゲーションです。（画面幅が 600px 未満のデバイスでは、表示されません）

常に表示されているナビゲーション
<nav id="nav">
<ul>
<li><a href="#block1">トップ</a></li>
<li><a href="#block2">ブロック2</a></li>
<li><a href="#block3">ブロック3</a></li>
<li><a href="#block4">ブロック4</a></li>
<li><a href="#block5">ブロック5</a></li>
<li><a href="#block6">ブロック6</a></li>
<li><a href="#block7">フッター</a></li>
</ul>
</nav>

フェードイン・フェードアウトするナビゲーション
<!-- ブロック1 の nav のコピー（fadeIn・fadeOut 用） -->
<nav id="nav_copy">
<ul>
<li><a href="#block1">トップ</a></li>
<li><a href="#block2">ブロック2</a></li>
<li><a href="#block3">ブロック3</a></li>
<li><a href="#block4">ブロック4</a></li>
<li><a href="#block5">ブロック5</a></li>
<li><a href="#block6">ブロック6</a></li>
<li><a href="#block7">フッター</a></li>
</ul>
</nav>
<!-- nav_copy END -->

赤字のように、どちらも内容は同じで構いません。

青字のように、ID は異なります。

script.js での値の変更について

script.js の上部では、値を変更して動作を調整できます。

script.js の 4行目～ 9行目
var nav_speed = 500; // nav と nav_copy のスピード[500]
var nav_copy_fade = 420; // nav_copy が fadeIn・fadeOut する位置[420]
var nav_copy_state = 1; // nav_copy の表示・非表示[1 = ON][0 = OFF]
var content_state = 1; // content の非表示・表示[1 = ON][0 = OFF]
var content_speed = 700; // content の表示スピード[700]

赤字の部分は変更可能です。

nav_speed は、nav と nav_copy をクリック（またはタップ）した時に、ブロックに移動するスピードです。（1000 = 1秒です）

nav_copy_fade は、どの位置までスクロールしたら nav_copy がフェードインするかという設定です。初期設定では、上から 420px の位置でフェードイン・フェードアウトします。

nav_copy_state を 0 に変更すると、フェードインするナビゲーションがオフになります。

content_state を 0 に変更すると、コンテンツのフェードインがオフになります。

content_speed は、コンテンツがフェードインするスピードです。

配置する画像の幅について

各ブロックに配置したサンプル画像は、幅 450px です。

画面幅 650px 以上で閲覧すると、テキストが回り込みます。

画面幅 650px 未満で閲覧すると、画像は中心に表示されて、テキストはその下に表示されます。

画像の左右に、100px 程度のスペースが空いたら、テキストが回り込むように設定しました。

画像の幅は 450px と決まっている訳ではありませんが、同じようなサイズだと収まりが良いかと思います。

もちろん、画像の設定は必須ではなく、テキストのみでも構いません。

また style.css で設定を変更することもできるので、お好みの設定でご利用ください。

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