ダウンロード
このテンプレートをダウンロード
概要
同梱画像
- img.jpg(morgueFile)
- 26.gif(irusu):この画像を使う最中は、irusu様に必ずリンクをはってください。
- k.png(自作)
同梱画像をそのまま使いたい場合は、画像配布元の規約も確認してください。
カスタマイズ
トップ画像差し替え
トップ画像は、別の横700px・縦450pxの画像に差し替えることができます。useフォルダ内のimg.jpgに上書きしてください。
JPG以外の保存形式の画像を使う場合は、style.css内の「img.jpg」を変えたい画像のファイル名に書き換えしてください。
画像縦幅が450px以外の場合は、数値も書き換えてください。
/* トップ画像 ----------------------*/
#INDEX div#KIZI{
background-image: url(use/img.jpg);
padding-top: 450px;
}
画像横幅は700px以外だと左右に見切れたり余白ができたりします
INDEX以外でも表示する場合は、上記部分の #INDEX div#KIZI{ を div#KIZI{ にします。
メニュー幅変更
一列に並べるメニュー数 2つ:50% / 3つ:33.3% / 4つ:25% / 5つ:20% / 6つ:16.6%
/* メニュー横幅---------------------*/
#MENU ul li{
width: 25%;
}
文法記述
このテンプレートを使用すれば、CSSを変更する事で楽にデザインが変更することが出来ますが、それはあなたができるだけ正しい文法でサイトを作成していくことを前提としています。つまりあなたはwebサイトを作成していく途中で、誤って必要なタグを削除してしまったり、記述ミスをするとデザインは崩れてしまいます。なのであなたが、htmlタグやCSSを全くあつかった事がない初心者ならば、このテンプレートを使用することは避けた方がいいかもしれません。正しい文法についてはgoogleなどを使用し、ご自分で学習してください。
一見不要に見えるタグも、デザインを変更する際に必要になる場合があります。タグの変更・削除は慎重に行ってください。
もし不具合が発生した場合は、Another HTML-lintでhtmlに記述ミスがないか確認してください。CSSファイルに手を加えた場合はW3C CSS検証サービスでチェックする事をオススメします。
それでもなおらないときはCSS制作者に質問メールを送るか、もしくはCSS着せ替えテンプレートプロジェクト内にあるフォーラムをご利用ください。
個人サイトで見られるindexページの注意文について
index.html(拡張子は異なる場合がある)にサイトの注意文などを掲載したり、またはデザインを重視し飾り付け、サイトの『玄関』の役割を与えている個人のwebサイトを多く見かけます。しかし本来、index.htmlには、indexという単語の意味から分かるように、サイトの目次として、メニューや概要を示すものであり、このような使い方はあまりよろしくありません。そのためこのテンプレートには注意文を掲載するためのindexページは用意しておりません。注意文等が必要な方は、メニューの下、このページで言うところの『このテンプレートについて』の場所に、注意文を書かれることをオススメします。独立した注意文ページが必要な方は、ご自分で作成なさってください。
フッターのアドレス
フッターにあなたのメールアドレスを記載する場所があります。しかし自分のメールアドレスを記述することに不安を覚える方は少なくないでしょう。その場合はメールフォームがあるページ、もしくはメールアドレスが記述してあるプロフィールページ等へリンクを書きかえてください。
言語指定
またこの基礎htmlは日本語のサイト用に作成されています。日本語以外の言語圏で使用される場合は、ご自分で言語設定を変更してください。