テンプレート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 未満でメニューが格納されるようになります。
ブラウザの幅を狭めて、どのくらいの値を設定したらよいかを決めてください。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク