テンプレート51～55のブロックの増やし方

最終更新日 2014/1/30

テンプレートの基本的な編集に加えて、ブロックの増やし方を解説します。

ほとんど同じなので、既存のブロックをコピー＆ペーストします。

上の画像では、ブロック5 をコピーしています。

<!-- --> で囲んだ部分は、コメント（ブラウザには表示されないメモ書き）なので、コピーしてもしなくても構いません。

ブロック5 の下に、Enter キーでスペースを作ってペーストします。

ブロック5 をコピー＆ペーストしたら、2箇所数字を変更します。

ブロック5
<div class="content_wrap1" id="5">

ブロック6
<div class="content_wrap2" id="6">

赤字が変更箇所です。

content_wrap1 と content_wrap2 を交互に配置すると、背景色も交互になります。

id は nav（メニュー）をクリックした時に、ジャンプする位置です。

更に、ブロック7 を追加する場合は、以下のようになります。

ブロック7
<div class="content_wrap1" id="7">

同じ手順で、いくらでもブロックを追加することができます。

上の画像のように、メニューも追加することで、ブロックへリンクすることができます。

<a href="# に続く数字を、ブロックの id と同じ数字にしてください。

メニューが長くなると（幅 600px を超えると）、スクリーンサイズによっては、メニューが折り返すことがあります。

どのくらいのスクリーンサイズで折り返すかは、ブラウザの幅を狭めると確認できます。

メニューの折り返しが気になる場合は、メニューのテキストを短くするか、メニューを格納するスクリーンサイズを変更してください。

以下の 2箇所を変更します。

style.css を開いて、188行目の 600px を 700px など大きな数値に変更します。

script.js を開いて、4行目の 600 を style.css で変更した数値と同じにします。

2箇所の数値を 700 に変更すると、幅 700px 未満でメニューが格納されるようになります。

ブラウザの幅を狭めて、どのくらいの値を設定したらよいかを決めてください。

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