ホームページテンプレート無料配布「k2-s.com」

ホームページテンプレートNo.076

ようこそ「k2-s.com」へ

「k2-s.com」をご利用いただきありがとうございます。このテンプレートはあなたがあなたのホームページを作成する場合に限り無料でご利用になれます。詳しくはご利用規約のページをご覧ください。

スタイルシートでレイアウトされたテンプレート

イメージこのテンプレートのレイアウトはスタイルシートで行っています。スタイルシートについてわからない方はstyleフォルダの中は編集しないようにしましょう。もし、あなたがスタイルシートについて学んでみたいと思うのならスタイルシート基礎講座をまずはご覧ください。

ホームページ作成について

イメージこのテンプレートを使ってホームページを作成する際にさまざまなホームページ作成ソフトを使われる方もいると思います。しかしながらすべてのソフトウェアについての動作確認は行っていません。もしあなたの使うソフトウェアでうまくいかない場合どうなるのかをご連絡いただけると幸いです。よくあるものであれば、FAQでまとめたいと思います。
基本的にはメモ帳などのテキストエディタでホームページができるということ考えていますので。

このテンプレートについて

このテンプレートのHTMLはメインの部分から書かれています。つまり右側からですね。テーブルレイアウトですと左側からになりますが、スタイルシートですのでどちらから書くことも可能です。ですから、右側のメインの内容から書くことによって、検索エンジンもそうですが、音でホームページを見ている人にとっても常に内容から情報を見る（聴く）ことができます。

ホームページ作成方法

一番上の右側のタイトル（見出し）

大きな文字ではありませんが、一応ページの見出し部分です。HTMLは以下のように書きます。

<h1 id="h">ホームページテンプレート無料配布「k2-s.com」</h1>

ヘッダーメニュー

上の横に並ぶメニュー部分の書き方です。あまり多いと一行におさまらないので注意しましょう。

タイトル画像

タイトル画像は自分で適当に作成してください。一応文字なしのものがimgフォルダに含まれています。ファイル名はtitle_no_text.gifです。

ページの見出し

ページ中の大見出しは3パターン用意しました。

大見出しタイプ1

大見出しタイプ2

大見出しタイプ3

それぞれ以下のように書かれています。

<h1 class="pg1">大見出しタイプ1</h1>
<h1 class="pg2">大見出しタイプ2</h1>
<h1 class="pg3">大見出しタイプ3</h1>

ページ中の小見出し

ページ中の小見出しも3パターンです。

ページ中の小見出し

それぞれ以下のように書かれています。

<h2 class="pg1">ページ中の小見出し</h2>
<h2 class="pg2">ページ中の小見出し</h2>
<h2 class="pg3">ページ中の小見出し</h2>

文章の書き方

文章の書き方は5パターンです。

パターン1
文章はこのように表示されます。

パターン2
文章はこのように表示されます。

パターン3
文章はこのように表示されます。

パターン4
文章はこのように表示されます。

パターン5
文章はこのように表示されます。

それぞれ以下のように書かれています。

<p class="r_f1">パターン1<br>
文章はこのように表示されます。</p>
<p class="r_f2">パターン2<br>
文章はこのように表示されます。</p>
<p class="r_f3">パターン3<br>
文章はこのように表示されます。</p>
<p class="r_f4">パターン4<br>
文章はこのように表示されます。</p>
<p class="r_f5">パターン5<br>
文章はこのように表示されます。</p>

画像の貼り付け位置

一番上の画像のように目いっぱいに入れたいときは画像のサイズは幅が520ピクセルです。ただしそのときは<p class="r_f1">内容</p>の中に入れてはいけません。r_f1で左右にマージンをとっていますので収まりきらないので注意しましょう。
また、その下のように画像を右、または左に回りこませたいときは以下のように書いていきます。

<p class="r_f1"><img src="画像のアドレス" alt="画像の説明" width="幅" height="高さ" class="l_img">
ここから文章。この文章の左に画像</p>

この場合は、<p class="r_f1">内容</p>の中に画像ファイルの記述をしたほうがよいでしょう。画像を右側にしたいときは、classをr_imgにしましょう。また、回り込みを解除したいときは、

と、書けば解除されます。