カスタマイズはcustomフォルダ内のファイルを用います。
前提条件：デザインの変更はしない（デザイン変更は中級者以上）
１．文章が長くなってもスタイルが崩れない
２．色の変更
３．画像（写真）挿入
４．メニュー項目（リンク部分）の増減及びメニュー文字数
以上の４項目が重要課題となります。それぞれの項目についてポイントを述べます。
文字が長くなってスタイルが崩れるのは縦の長さに指定がある場合です。このサンプルで縦の長さの指定があるのはバナー部分です。対策としてバナー部分の文字数が多くなった場合はフォントを小さくして対応します。それでも収まらない場合は、バナーを縦長に作り直します。
色を変更する際、まず最初に注意することはgifで作成した画像部分の色とスタイルシートで指定した色を合わせるという事です。Jtrimではカラーコードで指定出来ます。カラーコードはこちらを参考にして下さい。
http://www.minacleweb.com/study/color.html
Jtrimからカラーコードで指定する場合は１０進数で指定します。スタイルシートでは１６進数又は、カラーネームで指定します。（HTMLから指定する場合も１６進数又は、カラーネームで指定します）
スタイルシートで色を指定する場合、背景では、１６進数、
background-color:#ffffff;ないし、background:#ffffff;（ffffffや000000等ではfff、000と略す事が出来ます）
あるいは、カラーネームも使えます。カラーネームは１４７色あります。上記のページを参照して下さい。セーフカラー２１６色にはカラーネームはありません。１６進数のみ使えます。
background-color:white;
background:white;
このサンプルで色の指定を行っているのは、
バナーのgif
body（コンテンツの外の壁紙に当たる部分）やコンテナーブロック等の各ブロックの背景色
background-color:#ffccff; 等
文字の色、
color:#000000; 等
color:black;
枠線の色、
border-left: #ffffff 1px solid; 等
の４点です。
当初、色の使い方は多いに悩むと思います。ポイントは自分のホームページと競合するホームページの配色を参考にします。（業界によってある傾向があることが多いようです）但し、盗用は無論厳禁です。
このサンプルでは画像は使用していませんが、画像挿入はHTMLを使います。構文を以下に示します。
<img src="表示する画像.jpg" alt="その写真を文字にする" width="横幅" height="高さ" />
.ctr {
text-align:center;
}
<div class="ctr">
<img src="表示する画像.jpg" alt="その写真を文字にする" width="横幅px" height="高さpx" />
</div>
現在このサンプルでは、メニューの文字は、「サンプル１−１カラムレイアウトその１」 となっています。ところが、もし文字数が増え、「「サンプル１−１カラムレイアウトその１１カラムレイアウトその１」となった場合の対応です。
単にHTMLで文字数を増やすと、 このようになってレイアウトがおかしくなってしまいます。そこで、スタイルシートで縦幅を増やすのです。現状は次の通りです。
li {
list-style-type : none;
width:90px;
height:33px;このようにピタリとレイアウトされるようになります。
以上の４つのポイントを踏まえ、custom1.htmlのカスタマイズの事例を示します。
１．バナーの作り直し（角丸の部分に注意）
２．色の全面変更
３．メニュー数を増やし尚かつメニュー文字を増やした
４．写真の挿入
スタイルシートの追加部分
.ctr {
text-align:center;
}
<div class="ctr">
<img src="../../4/bmw.jpg" alt="bmw" width="480" height="360" />
</div>
Chapter1 TOPに戻る。メニューは上部にあります。