テンプレート概要

CDPのすすめ

このテンプレートはCSS着せ替えテンプレート企画専用のものです。同企画はCSSファイルだけを変更することでデザインをチェンジするテンプレート（CDP）を作るという趣旨の試みです。詳細は企画サイトをご覧ください。

ダウンロード

ここではCSSと画像のみの配布となりますので、基礎HTMLは企画サイト内よりダウンロードをお願いします。

やっつけバナー（同梱）

バナー・大 バナー・中 バナー・小

カスタマイズメモ

使用画像と指定先

  • top.jpg [ body ]
  • bg.gif [ html ]
  • h2.gif [ h2 ]
  • menu.gif [ li.menu-on ]
  • pan.gif [ ul#PAN li ]
  • quote_open.gif [ blockquote ]
  • quote_close.gif [ blockquote ]

トップ画像を変更する

imgフォルダ内のtop.jpgを差し替えてください。600×180pxのものであればCSSを訂正する必要はありません。異なるサイズの画像に差し替える場合は、style.cssを開き、横の長さはbody{ width: 600px; }の値を調整してください。縦の長さについては、仮に300pxにする場合、div#HEADER{ min-height: 280px; }のように、min-height: 高さー20px;の記述をdiv#HEADERに書き足してください。

メニューロゴを変更する

imgフォルダ内のmenu.gifを差し替えてください。横サイズ140px以内かつ縦サイズ40pxのものであればCSSを訂正する必要はありません。異なるサイズの画像に差し替える場合は、style.cssを開き、横の長さはdiv#MENU{ width: 160px; }の値を、縦の長さはdiv#MENU{ padding-top: 60px; }の値を変更してください。なお、横の長さを変更する場合はdiv#HEADER{ width: 400px; }の値も調整する必要があります。

背景画像または背景色を変更する

背景画像を変更する場合はimgフォルダ内のbg.gifを差し替えてください。背景色や背景画像の位置などを変更する場合は、style.cssを開き、html { background: #F5F5F5 url(img/bg.gif) no-repeat center 30px; }の値を変更してください。

横幅を変更する

style.cssを開き、body{ width: 600px; }の値を調整してください。なお、横幅を変更する場合はdiv#HEADER{ width: 400px; }とdiv#MENU{ width: 160px; }の値も変更する必要があります。両横幅の計＋20px×2＝全体の横幅となるよう調整してください。