トップ>
無料テンプレート>
59・60の編集方法1

無料テンプレート59・60のブロックの増やし方

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

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

ブロックの増やし方

ブロックは id block が適用された部分で、ダウンロード時には 7ブロック用意されています。

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

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

<div id="block6">
<div id="max_width6">
<article id="content6">
<div class="bg-text6">


<h1>見出しを記入する部分です。</h1>
<p>文章を記入する部分です。</p>


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

上の HTML タグは、ブロック6 です。

赤字は、各ブロックで決まっている部分です。表示や動作が崩れる原因となりますので、オリジナルの編集は加えないでください。（もちろん、編集にチャレンジされるのはご自由です）

緑字は、オリジナルの編集を加える部分です。

<h1>タグ内には、各ブロックの見出しを記入してください。

<p>タグ内には、文章や画像などコンテンツを記入してください。

もちろん、<p>タグは増やしても構いません。

このブロック6 をコピーして、すぐ下にペーストしたとします。

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


<h1>見出しを記入する部分です。</h1>
<p>文章を記入する部分です。</p>


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

数字の 6 を 7 に変更してください。

青字が変更箇所です。

の間はコメント（処理に影響がないメモ書き）なので、変更しなくても構いません。2番目から 5番目の青字が、変更必須の部分です。

これでブロック7 ができました。

続いて、フッターの番号を変更します。

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


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

これで、上から順番に block1 ～ block8 が作成できました。

続いて、ナビゲーション部分を編集します。

<div id="nav_open"><img src="images/nav-open.png" alt="ナビゲーションオープン"/></div>
<nav id="nav">
<ul>
<li id="up_button">▲</li>
<li id="button1"><a href="#block1">●</a></li>
<li id="button2"><a href="#block2">●</a></li>
<li id="button3"><a href="#block3">●</a></li>
<li id="button4"><a href="#block4">●</a></li>
<li id="button5"><a href="#block5">●</a></li>
<li id="button6"><a href="#block6">●</a></li>
<li id="button7"><a href="#block7">●</a></li>
<li id="button8"><a href="#block8">●</a></li>
<li id="down_button">▼</li>
</ul>
</nav>

青字が追加箇所です。

ブロック8 用のナビゲーションを追加しました。

この時点で、ブロック8 の背景には何も設定されておらず、真っ白の状態です。

ブロック8 にも背景画像を設定する場合は、style.css を開きます。

#block8 {
background: url(images/photo8.jpg) no-repeat center;
background-size: cover;
}

#block8 を追加して、背景画像を設定してください。

上の例では、images フォルダに photo8.jpg を追加する必要があります。

style.css 下部には以下の記述がありますが、これはスクリーンサイズ幅 1200px 以上で背景画像を固定する設定です。

固定したくない場合は、以下の記述は削除してください。

ブロック8 の背景画像も固定する場合は、青字の部分を追記してください。

@media only screen and (min-width: 1200px) {
#block1 {
background-attachment: fixed;
}
#block2 {
background-attachment: fixed;
}
#block3 {
background-attachment: fixed;
}
#block4 {
background-attachment: fixed;
}
#block5 {
background-attachment: fixed;
}
#block6 {
background-attachment: fixed;
}
#block7 {
background-attachment: fixed;
}
#block8 {
background-attachment: fixed;
}
}

以上の作業で、ブロック数を 7 から 8 に変更できます。

同じ手順で、必要なだけブロックを増やしてください。

ブロックを減らしたい場合も同じように、上から順番にブロックの番号が並ぶようにしてください。

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

前：無料テンプレート59・60

次：無料テンプレート59・60の編集方法2