ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座 無料テンプレートで Web Design

カスタマイズ ホームページ作成講座

【カスタマイズ】 ホームページ作成講座

テンプレートのページでダウンロードしたファイルの解説とカスタマイズを簡単に説明します。

まずは、ダウンロードした【./】 【sample.css】を開きプリントアウトしてください。プリントアウトして紙で見るのと、パソコンの画面で見るのとでは、多少ですが、紙で見たほうが理解しやすいからです。またカスタマイズすべきところをプリントアウトした紙に色をつけるなどすると、よりわかりやすいでしょう。

それではまず【./】のファイルを開きます。

<body>タグの間がブラウザに表示される内容です。<body>タグの中で表示されるレイアウトのタグは<div id="banner"><div id="content"><div id="title"><div id="main"><div id="sidemenu"><div id="foot">大きく分けてこの6個でレイアウトされています。

また、下の図には描かれていませんが、<div id="content"><div id="title"><div id="main"><div id="sidemenu"><div id="foot">を囲っています。

テンプレートの解説

<div id="○○"></div>というのは#○○を指すCSSファイルの装飾の名前です。

たとえば<div id="title"><h1>ホームページのタイトル</h1></div>という記述を例に出すと、
"title"という指定の装飾が<h1>ホームページのタイトル</h1>に対して反映されるということです。

ちなみに<div id="title">で指定されている、装飾はどうなっているかというと、

#title{
width:750px;
background: #FFF799;
height:20px;
line-height:20px;}

となっています。

width:750px;というのは、横の長さは750pxですよ。という指定。
background: #FFF799;というのは背景色を #FFF799;というカラーにしなさいという指定。
height:20px;と line-height:20px;というのは、高さと行間の指定です。

たとえば、この部分をオレンジ(#FF6600)の背景にして、高さを40pxにしたい場合の記述は下記のようになります。

#title{
width:750px;
background:
#FF6600;
height:
40px;
line-height:
40px;}

これを書き換えたらCSSファイルを上書き保存して、indexファイルをブラウザで開いてみましょう。
すると、2つめのホームページのタイトルの背景色と幅が変更されているはずです。

このように、レイアウトの変更をしたい場合はCSSファイルの装飾の指定を変更します。

それでは今度はindexファイルの変更をして見ましょう。
まず、<h1></h1><h2></h2><h3></h3>の間にある見出しの変更をしましょう。

そして上書き保存をして、ブラウザで確認します。すると、どこがどう変化したかわかりますね。
文章などの表示はすべてindexファイルで変更します。

こういった要領で、HTMLとCSSをカスタマイズしていくことができます。

ではこのサンプルテンプレートをもう少しカスタマイズしてみましょう。

まず、<div id="banner"></div>の部分です。
今はただのオレンジの画像が入っていますが、この画像を変えてみましょう。
これはご自身でバナーを用意していただいてもけっこうです。

imageフォルダの中にtitle2.jpgというファイルが入っています。
それに変更しましょう。編集するのはCSSファイルの#bannerの部分です。

#banner{
background:url(images/
title.gif);
background-color:#FFFFFF;
width:750px;
height:150px;}


このCSSのtitle.giftitle2.gifに書き換えましょう。
すると、このようにバナーの画像が変わります。
しかし、<h1></h1>に書いてある見出しの文字が白いため見えにくくなってしまいました。
これは、<h1>タグのCSSを編集します。文字を#FF6600に変えてみましょう。

#banner h1{
text-align:left;
font-size:18px;
color:#FFFFFF;
padding-left:40px;
padding-top:50px;}

color:#FFFFFF#FF6600に変えてみましょう。
すると下記のように文字の色が変わります。

#banner h1という指定は<div id="banner">のなかにある<h1>タグで囲まれている文字に対する装飾です。h1タグはこのページで2回使っています。<div id="title"></div>の間にも<h1>タグが入っていますが、この文字の色はうすいグレーのままのはずです。これは<h1>タグの指定がCSSで別に装飾されているからです。カスタマイズするときは、indexで書かれている文字が何のタグに囲われているか?を確認しましょう。

背景画像は<div id="content">、<h2>や<dt>に使っています。背景の色や形、スタイルを変えたい場合はCSSの背景画像の指定を先ほどのバナーと同じように変更すればいいだけです。

ただし、#contentの背景画像は、横(width)750px、縦(height)1pxで、サイドバーの領域部分の200pxを薄いオレンジ、残りを白という画像を縦に繰り返す(repeat-y)で表示しています。
サイドバーの背景色を変えたい場合は、この画像(side_bg.gif)の変更が必要となります。

あとは、文章を書き込んだり、サイドのメニューを変更しリンクを貼っていきましょう。

また同じような要領で他のテンプレートのカスタマイズも可能です。

さらにカスタマイズがしたいという人はCSSリファレンスを参考にしてください。


ホームページ作成講座
ホームページ作成講座【HTMLタグ講座】
ホームページ作成講座【ブラウザーで表示してみよう】
ホームページ作成講座【レイアウトをしてみよう】
ホームページ作成講座【無料ホームページのテンプレートを使おう】
ホームページ作成講座【無料テンプレートをカスタマイズしよう】
ホームページ作成講座
HTMLタグ講座
ブラウザで表示
レイアウト
テンプレート
カスタマイズ講座
ホームページ作成講座HOME
ホームページ作成講座HOME