Cafi Netつながる情報技術

レスポンシブ 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 を作成
<!-- ブロック7 START -->
<div id="block7">
<div class="content_odd">
<div id="max_width7">
<article id="content7">
<div class="bg-text7">



<!-- 内容 START -->
<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>
<!-- 内容 END -->



</div><!-- bg-text7 -->
</article>
</div><!-- max_width7 -->
</div><!-- content_odd -->
</div><!-- block7 -->
<!-- ブロック7 END -->

赤字が変更箇所です。

ブロック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 に変更
<!-- ブロック8 footer START -->
<div id="block8">
<div class="content_even">
<div id="max_width8">
<footer id="content8">
<div id="bg-text-footer">



<!-- 内容 START -->
<p>Copyright(C)2014 サイト名</p>
<!-- 内容 END -->

赤字が変更箇所です。

数字の 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 用)も、同じ内容にしてください。

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