#53以前の説明書はこちら
以下の説明は、#54以降を対象にしています。
HTMLファイルの論理構造を固定にし、デザイン・レイアウトをCSSでおこなっています。 従って、CSSファイルと画像を入れ替えるだけで、ページのデザインを一新できます。 また、CSSファイルの当該部分を変更するだけで、文字の色や大きさなど、簡単に変更できます。
当サイトのテンプレートは、ヘッダーとなるheader、メインとなるtext、textの中のfirst-sectionとsecond-section、
フッターとなるfooterにより構成されています。
また、以下の説明より、<h1>で囲まれた部分をサイト名、<h2>で囲まれた部分を見出しと呼びます。
ヘッダーに記述するサイト名は、CSSファイルの<h1>により文字の大きさ等を設定しています。
メニュー部についての説明です。
メニューは、first-sectionのなかの<ul id="menu">の部分です。
CSSファイルの#menuの部分で文字色等を変更可能です。
各メニュー項目は<li>で囲みます。
↑これが見出しです。見出しは<h2>で囲むことを前提に設定しています。
なので、ほとんどのテンプレでは、<h3>とか<h4>とかの設定はしていません。
ちなみに、<h1>は、ヘッダーのサイト名のために使用しています。
文章は<p>で囲んで記述します。
<hr>は、「段組（float)」を解除するために使用しています。 なので、普通に線が引きたくて<hr>を使っても、通常通りには表示されません。 線が引きたい場合は、cssのborderを使用してください。
このページにもありますが、top↑をクリックすることで、
ページの一番上（正確にはヘッダー）に戻れるように設定しています。
<p class="top"><a href="#header">top↑</a></p>
とhtmlファイルに記述することで、設置できます。
また、CSSファイルの.topで、デザインを変更できます。
aboutページにはサンプルとして「about site」と「about author」を記述しています。 これらはテーブルで囲って記述しています。 <table>にaboutというclassをつけているので、 CSSファイルの.aboutの部分でデザインを変更できます。
linkページにはサンプルとして2つのリンクを設置しています。 それぞれのリンクごとに、<dl>にlinkというclassをつけて、 バナーを<dt>で囲み、そのサイトの説明を<dd>で囲んで記述しています。 CSSファイルの.linkで、デザインを変更できます。
各テンプレートの下部に広告が表示されますが、 これは当サイトのレンタルサーバによるものなので、 ダウンロードしたテンプレートに直接表示されるものではありません。
まぁ、テンプレートの文章と、リンクのURLだけを書き換えて使用すれば間違いないかと。
そうやって使っていえれば、必ずHTML覚えます。自分がそうだったので。
質問がある方はお気軽にお尋ねください。
BBS
メール→flanker3601@yahoo.co.jp