Cafi Netつながる情報技術
  1. トップ>
  2. 無料テンプレート>
  3. 51~55の編集方法2

テンプレート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 未満でメニューが格納されるようになります。

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

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