レスポンシブ Web デザイン63～67

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

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

無料テンプレート63

Free Template 63（黒色）をダウンロード（zip）
サンプル（動作確認）はこちら
 ブロックの増やし方はこちら（ページ下部）
script.js や画像の編集についてはこちら

Free Template 64（濃い赤色）をダウンロード（zip）
サンプル（動作確認）はこちら

Free Template 65（濃い青色）をダウンロード（zip）
サンプル（動作確認）はこちら

Free Template 66（濃い緑色）をダウンロード（zip）
サンプル（動作確認）はこちら

Free Template 67（濃い黄色）をダウンロード（zip）
サンプル（動作確認）はこちら

無料テンプレート 63～67 には、野菜の写真（フリー写真素材）を使用しました。写真はそのままご利用頂いても構いませんし、他の写真に変更することもできます。

ブロックの増やし方

ブロックは増やすことも減らすこともできますが、ブロックの番号は上から順番に並べてください。

例えばブロック8 を作成する場合は、ブロック6 をコピー＆ペーストしてブロック7 を作成して、フッターをブロック8 に変更してください。

以下は、ブロックを 7つから 8つに増やす手順です。

ブロック6 をコピー＆ペーストしてブロック7 を作成

<div id="block7">
<div class="content_odd">
<div id="max_width7">
<article id="content7">
<div class="bg-text7">


<h1>ブロック7</h1>
<p class="img_450_right"><img src="images/asparagus-free-photo2.jpg" alt="アスパラガスの写真"/></p>
<p><span class="color1">赤色</span>は、class「color1」です。<span class="color2">橙色</span>は、class「color2」です。<span class="color3">紫色</span>は、class「color3」です。文字色の変更や追加は、style.css に記述してください。<span class="supplement">※補足は class「supplement」です。</span></p>


</div>
</article>
</div>
</div>
</div>

赤字が変更箇所です。

ブロック6 をコピーしたら、ブロック6 の下（ブロック6 とフッターの間）にペーストして、数字の 6 を 7 に変更します。

<div class="content_odd"> は、背景色とリンクカラーの設定です。

ブロック毎に、class「content_even」と class「content_odd」を交互に設定すると、背景色も白色と黒色が交互になります。

<p class="img_450_right"> は、テキストを左側に回り込ませる設定です。

こちらもブロック毎に、class「img_450_left」と class「img_450_right」を交互に設定すると、テキストの回り込みが左右交互になります。

補足として、 の間はコメント（処理に影響がないメモ書き）なので、変更しなくても構いません。

元々のブロック7（フッター）をブロック8 に変更

<div id="block8">
<div class="content_even">
<div id="max_width8">
<footer id="content8">
<div id="bg-text-footer">


<p>Copyright(C)2014 サイト名</p>

赤字が変更箇所です。

数字の 7 を 8 に変更します。

class「content_odd」の下なので、class「content_even」に変更します。

以上の作業で、ブロックを 7つから 8つに増やすことができます。

ナビゲーション（nav）の変更

ブロックを増やしたら、ナビゲーション（nav）も変更してください。

ブロックを 8つに増やした場合
<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">ブロック7</a></li>
<li><a href="#block8">フッター</a></li>
</ul>
</nav>

赤字が変更箇所です。

ブロック7 へのリンクを追加して、フッターを block8 に変更します。

もう 1つの nav（fadeIn・fadeOut 用）も、同じ内容にしてください。

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

前：無料テンプレート68～72の編集方法

次：無料テンプレート63～67の編集方法