カスタマイズはcustomフォルダ内のファイルを用います。
前提条件：デザインの変更はしない（デザイン変更は中級者以上）
１．文章が長くなってもスタイルが崩れない
２．色の変更
３．画像（写真）挿入
４．メニュー項目（リンク部分）の増減及びメニュー文字数
以上の４項目が重要課題となります。それぞれの項目についてポイントを述べます。
スポンサードリンク
１．文章が長くなってもスタイルが崩れない
このサンプルでは文章が長くなり問題が生じそうな箇所はほぼ無いと思います。但し、バナー部分の文字数が多くなった場合にはフォントを小さくして対応します。
２．色の変更
このサンプルで色の指定を行っているのは次の箇所です。
バナーのgif、サイドラインのjpg、フッターのgif
body（コンテンツの外の壁紙に当たる部分）やコンテナーブロック等の各ブロックの背景色
background-color:#ffffff; 等
文字の色、罫線の色
color:#696969; 等
の３点です。
３．画像（写真）挿入
このサンプルでは画像を使っていますので、HTMLとスタイルシートを確認してみます。
<div class="contents-top">
<img src="main.jpg" width="700" height="250" alt="main" />
</div>
.contents-top {
text-align:center;
padding-top:15px;
}
４．メニュー項目（リンク部分）の増減及びメニュー文字数
メニューが横並びの場合、メニュー項目数及びメニューの文字数には注意が必要です。スタイルが崩れやすいからです。縦並びの場合は容易です。
対応方法をいくつか説明します。
（１）メニューの右端が崩れた場合の対応
スタイルシートに以下を追記し、
.cl {
clear:both;
}
<ul>
<li><a href="x1.html">ネオンテトラ</a></li><li><a href="x2.html">グリーンネオンテトラ</a></li><li><a href="x3.html">ナノストムス・エスペイ</a></li><li><a href="x4.html">ハイフェソブリコン・アマパエンシス</a></li><li><a href="x5.html">ダイアモンドテトラ</a></li>
</ul>
<br class="cl" />
<ul>
<li><a href="x6.html">カージナルテトラ</a></li><li><a href="x7.html">ラミーノーズテトラ</a></li><li><a href="x8.html">ブラックネオンテトラ</a></li><li><a href="x9.html">クリスタルレッドテトラ</a></li>
</ul>
このように修正されます。
（２）メニュー項目数及びメニューの文字数が多くなった場合の対応
同様にリスト<ul>を分けて複数使ってみます
<ul>
<li><a href=".w1.html">スキアエノクロミス・フライエリー（アーリー）</a></li><li><a href="w2.html">ネオラムプロローグス・トレトケファルス</a></li><li><a href="w3.html">ネオラムプロローグス・ブリシャルディ</a></li>
</ul>
<br class="cl" />
<li><a href="x1.html">ネオンテトラ</a></li><li><a href="x2.html">グリーンネオンテトラ</a></li><li><a href="x3.html">ナノストムス・エスペイ</a></li><li><a href="x4.html">ハイフェソブリコン・アマパエンシス</a></li><li><a href="x5.html">ダイアモンドテトラ</a></li>以下略
５．カスタマイズの事例
以上の４つのポイントを踏まえ、custom2.htmlのカスタマイズの事例を示します。
ここでは、上記の説明通りにカスタマイズしてあります。
１．バナー及びフッターの作り直し
２．サイドラインの作り直し
３．コンテンツ上部の写真の入れ替え
４．色の全面変更
５．フッターのメニューの設定
Chapter2 TOPに戻る。メニューは上部にあります。