前提条件：デザインの変更はしない（デザイン変更は中級者以上）

１．文章が長くなってもスタイルが崩れない
２．色の変更
３．メニュー項目（リンク部分）の増減及びメニュー文字数

以上の３項目が重要課題となります。それぞれの項目についてポイントを述べます。

スポンサードリンク

１．文章が長くなってもスタイルが崩れない

このサンプルでは文章が長くなり問題が生じそうな箇所はほぼ無いと思います。但し、バナー部分の文字数が多くなった場合にはフォントを小さくして対応します。ボックス内の文字数は多くても少なくても設定変更はありません。

２．色の変更

このサンプルで色の指定を行っているのは次の箇所です。
バナーの背景色、コンテンツの背景色、左ナビゲーションの背景色です。gif等の画像はありません。
文字の色、罫線の色
color:#696969;　等
の２点です。

３．メニュー項目（リンク部分）の増減及びメニュー文字数
ナビゲーション部分の縦並びメニューは横並びメニューと比べ設定は非常に簡単です。 スタイルシートの調整箇所を示します。

li {
  padding-left : 5px;　ナビゲーション内側からメニューの間の値
  line-height:120%;　行間
  margin-bottom:15px;　メニュー項目とメニュー項目の間の値
  list-style-type : none;
  font-family : MS UI Gothic;
  font-size:15px;　フォントサイズ
}
４．カスタマイズの事例

以上のポイントを踏まえ、custom3.htmlのカスタマイズの事例を示します。

ここでは、上記の説明通りにカスタマイズしてあります。
１．色の全面変更
２．長い文章（Googleホームページより引用しました）

Chapter3で説明したhtmlには画像はありませんので、配色を変更するだけで十分オリジナルなものが作成出来ます。
アフィリエイトサイトにも最適です。ナビゲーション部分にもコンテンツ部分にもアフィリエイトリンクなどを設置出来ます。ナビゲーション部分はどうしてもメニューが短いと、中央以下が空き気味となりますので、adsenseリンクを貼るのもデザイン上良いと思います。

カスタマイズの事例

Chapter3　TOPに戻る。メニューは上部にあります。


Copyright ©2007-2008 HTMLCSS.biz-ホームページ制作講座 All Rights Reserved.
運営者：SEOホームページ制作-SIS