最後にデザイン変更を行ってみます。サイトテーマはアフィリエイトサイトのトップページです。汎用的な物販サイトに置きかえることも出来ます。
今回のカスタマイズのポイントは、従来バナー部分にある画像を半分に切り、半分をコンテンツブロックの最上部に置いたことです。この手法により通常不可能なデザインが可能となります。
見た目には分かりませんが、ロゴは半分に分割され上部分がバナー部分にあり、下半分がコンテンツ部分にあります。
最初にロゴを作成します。
１．簡単バナーから、バナー幅４５０、バナー高さ８０とします。
２．文字フィールドにTokyo Night Relaxingと入力し、フォント：Tahoma、太字にチェック、フォントサイズ：３４、グラデーション：スタート色：黒、エンド色：黄とし、種類は横１として上で、文字フィールドにマウスカーソルを置きエンターを押します。
３．適当な名前を付けてjpgで保存し、簡単バナーを終了します。次の画像が作成されます。
ロゴを分割します。
１．Jtrimから作成したjpgを開きます。
２．最初に上部分を作成します。イメージ、切り抜きで、座標１、ｘ：０、ｙ：０、座標２、ｘ：４５０、ｙ：４０で切り抜きます。
３．適当な名前を付けてjpgで保存します。
４．更に下部分を作成します。もう一度jpg全体を開き、イメージ、切り抜きで、座標１、ｘ：０、ｙ：４０、座標２、ｘ：４５０、ｙ：８０で切り抜きます。
５．適当な名前を付けてjpgで保存しJtrimを終了します。次の２つの画像が作成されます。
画像は位置をスタイルシートで調整します。
/*_____________ バナーブロック設定 _____________ */
.top {
padding-top:30px;
}
/*___________ コンテンツブロック設定 ___________ */
.ctr {
text-align:center;
}
その他：
メニューを右ナビゲーション部分、左ナビゲーション部分、フッター部分に置いてみました。
右ナビゲーション部分では余った部分を利用してイメージ画像を貼り付けてみました。
スタイルシートを記述する場合は当講座で説明してきた通り、ブロックごとに記述するように心がけてください。
当講座で説明してきたブロックを改めて記しておきます。それらに対応させるため、スタイルシートで６つのIDを定義しました。
コンテナーブロック（#container）
バナーブロック（#banner）
左ナビゲーションブロック（#leftsidebar）
コンテンツブロック（#contents）
右ナビゲーションブロック（#rightsidebar）
フッターブロック（#footer）
の６つです。これらを応用させると次の組み合わせが出来ます。
１．コンテナーブロック＋バナーブロック＋コンテンツブロック
２．コンテナーブロック＋バナーブロック＋コンテンツブロック＋フッターブロック
３．コンテナーブロック＋バナーブロック＋左ナビゲーションブロック＋コンテンツブロック
４．コンテナーブロック＋バナーブロック＋左ナビゲーションブロック＋コンテンツブロック＋フッターブロック
５．コンテナーブロック＋バナーブロック＋右ナビゲーションブロック＋コンテンツブロック
６．コンテナーブロック＋バナーブロック＋右ナビゲーションブロック＋コンテンツブロック＋フッターブロック
７．コンテナーブロック＋バナーブロック＋左ナビゲーションブロック＋コンテンツブロック＋右ナビゲーションブロック
８．コンテナーブロック＋バナーブロック＋左ナビゲーションブロック＋コンテンツブロック＋右ナビゲーションブロック
Chapter8 TOPに戻る。メニューは上部にあります。