テンプレート概要

CDPのすすめ

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

ダウンロード

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

やっつけバナー（同梱）

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

カスタマイズメモ

使用画像と指定先

  • top.gif [ div#HEADER ]
  • border_top.gif [ div#KIZI ]
  • border_btm.gif [ div#FOOTER ]
  • text.gif [ div.text ]
  • pan.gif [ ul#PAN li ]
  • quote_open.gif [ blockquote ]
  • quote_close.gif [ blockquote ]

トップ画像を変更する

imgフォルダ内のtop.gifを差し替えてください。15×40pxのものであればCSSを訂正する必要はありません。異なるサイズの画像に差し替える場合は、style.cssを開き、横の長さはh1 { margin: 0 0 .1em 25px; }やdiv#MENU>ul { margin: 0 0 0 25px; }の値を調整してください。縦の長さはdiv#HEADER{ margin-bottom: -2em; padding: .5em 10% 2em 2em; }やdiv#MENU { margin: 0 10% .5em 2em; }の値を調整し、画像が途中で途切れないようにします。div#HEADERのmargin-bottomの値はpadding-bottomの値（2em）にマイナスを付けたもの（＝-2em）とします。div#MENUのmargin-bottomの値はdiv#HEADERのpadding-bottomの値（2em）ー1.5em（＝.5em）とします。

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

背景画像を設定する場合はimgフォルダ内に背景画像を追加し、CSSを訂正します。style.cssを開き、一例ですが、body{ background-image: url(img/bg.gif); }等の必要な記述を追加してください。背景色を変更する場合は、style.cssを開き、body { background-color: #F5FFFA; }の値を変更してください。

記事部分の背景画像を変更する

imgフォルダ内のtext.gifを差し替えてください。このテンプレートでは340×180pxの画像を使用していますが、文字が見にくくならない程度に色の薄い画像であれば、サイズにこだわる必要はありません。ただし縦の長さによっては画像が途中で途切れてしまう（div.text内のボリュームが少ないときなどに「画像の高さ＞div.textの高さ」になってしまう）ことがありますので、その場合はdiv.text{ min-height: 80px; }の値を調整して最低限の高さを保つようにしてください。