前提条件：デザインの変更はしない（デザイン変更は中級者以上）
１．文章が長くなってもスタイルが崩れない
２．色の変更
３．メニュー項目（リンク部分）の増減及びメニュー文字数
以上の３項目が重要課題となります。それぞれの項目についてポイントを述べます。
このサンプルでは文章が長くなると問題が生じます。ボックスの大きさとボックス内の文字数の調整が必要です。文字数が多くなるとボックスから文字がはみ出てしまいます。ボックスはここではスタイルシートでの設定ではなく、gifを使っているからです。つまり、例えば、横100px縦100pxのgifであれば、文字もそのサイズに収まる必要があります。
このサンプルでは縦横260pxの角丸のgifを作成しました。Jtrimを使います。作成方法の要約を記します。
１．Jtrimで新規作成、横サイズ260ピクセル、縦サイズ260ピクセル。
２．塗りつぶし、塗りつぶし色、色の追加、赤204、緑204、青204。
３．角丸切り抜き、丸めの半径30、背景色、色の追加、赤204、緑204、青204、枠線を付けるにチェック、枠線の幅3、枠の色、色の追加、赤0、緑51、青51
以上で次の画像が作成出来ます。
このサンプルではこの画像を横に２つ、縦に２つ表示させます。
従いまして、文字はこの画像の中に収まる必要があります。スタイルシートで２つのクラスを定義しました。
box1は左側のbox2は右側のボックスとなります。
.box1 {
background-image: url(custom6-3.gif);
background-repeat: no-repeat;
margin-top:15px;
margin-left:5px;
margin-bottom:15px;
padding-top:15px;
padding-left:10px;
float:left;
overflow: visible;
height:260px;
width:260px;
}
.box2 {
background-image: url(custom6-3.gif);
background-repeat: no-repeat;
margin-top:15px;
margin-right:5px;
margin-bottom:15px;
padding-top:15px;
padding-left:10px;
float:right;
overflow: visible;
height:260px;
width:260px;
}
また、ボックスを横に２つ配置するために、コンテンツブロックのwidthを10px増やし、右ナビゲーションブロックのwidthを10px減らしました。
ボックス内の文字がはみ出るような場合は、画像の縦幅を大きく作る、フォントサイズを小さくする、段落<p></p>を減らし<br />を使う、等の対応によりカスタマイズ可能です。
このサンプルの色のイメージはコンテンツ合わせて（運用／保守サービス）に地味にしてあります。指定を行っているのは次の箇所です。
バナーのgif、ボックスのjgif、フッターのgif
body（コンテンツの外の壁紙に当たる部分）やコンテナーブロック等の各ブロックの背景色
background-color:#003333; 等
文字の色、リンク部分の色
color:#ffffff; 等
ボタン風メニューの色
の４点です。
メニューの文字数は減りましたが、右ナビゲーションブロックでメニューの縦幅の設定はありません。widthは150pxから145pxに若干狭めましたので、左右マージンを若干変更しました。
フッターブロックのメニューは３行から２行に変更になったため、パディングの上下幅を広く取りました。15pxから30pxとしました。仮にメニューが少なく１行になった場合は上下のパディングを更に大きく取ります。
Chapter6 TOPに戻る。メニューは上部にあります。