通常のテキストは<div class="entry_body">の中に収まるようにしてください。

引用タグ<blockquote>を使用するとこんな感じの囲みになります。
トップカテゴリ > パンくずリストは<div class="pan">で囲んでください。(段落タグ<p>は使用しないでください。)

シンプルなデザインのホームページテンプレート

シンプルなデザインなので、様々な業種、ジャンル、年齢層にも柔軟にマッチしますが、白と明るい色を基調にしているので、特に子供向け、女性向けのサイトにオススメです。

注意事項

  • このテンプレートはホームページ テンプレート「homuten」が配布しています。
  • ご利用の前に、必ず利用規約をご覧ください。
  • HTMLやcssの記述は原則自由に手を加えていただいて結構ですが、footer の一番下に設置してある「Template design by homuten」の著作権表記は絶対に記述の変更や削除をしないでください。無断で記述の変更や削除を行った場合は、利用を停止していただきます。
  • 個人利用、商用利用どちらでも無料でご利用いただけます。
  • 再配布、転売、WEB制作など、テンプレートそのものを使って収益を得る事を禁止します。

更新情報

  • 00/00:更新しました
  • 00/00:更新しました
  • 00/00:更新しました
  • 00/00:更新しました
  • 00/00:更新しました
  • 00/00:更新しました
  • 00/00:更新しました
  • 00/00:更新しました

この更新情報はリストタグ<ul>を<div class="new">で囲むとスライドバーが表示されるようになります。

テンプレートの解説(ここは見出しタグ<h2>で囲んでください)

文章の書き方の解説(ここは<div class="entry_body">の中で<h3>で囲んでください)

通常の文章は<div class="entry_body">の中で段落タグ<p>を使用してください。

リストタグ<ul><ol>を使用すると以下のようになります。

  • ホームページテンプレート
  • ホームページテンプレート
  • ホームページテンプレート
  1. ホームページテンプレート
  2. ホームページテンプレート
  3. ホームページテンプレート
引用タグ<blockquote>を使用するとこんな感じの囲みになります。

<div class="entry_body">内で使用できる画像の最大幅は580pxです。

テーブルの解説

キャプションタグ<caption>
  ここはヘッダセル<th>で囲むとバックに色がつきます
ここはヘッダセル<th> テーブルの幅はスタイルシートで<div class="entry_body">いっぱいまで広げる仕様になっています。全体幅は100%で作ってください。
ここはヘッダセル<th> テーブルの幅はスタイルシートで<div class="entry_body">いっぱいまで広げる仕様になっています全体幅は100%で作ってください。
ここはヘッダセル<th> テーブルの幅はスタイルシートで<div class="entry_body">いっぱいまで広げる仕様になっています全体幅は100%で作ってください。

商品やサービスの紹介リストの解説(一列の場合)

一列での紹介リストは<div class="box1">で囲まれています。サンプルとして200×90ピクセルの画像を置いていますが、枠内の大きさであれば自由なサイズの画像を置くことが可能です。画像にはスタイルシートで自動的に1ピクセルの枠線が入ります。

またテキストのボリュームも個別に自由に設定が可能です。

商品001

ホームページテンプレート



商品001

ホームページテンプレート



商品やサービスの紹介リストの解説(三列の場合)

三列での紹介リストは<div class="box3">で囲まれています。回り込み(float)を使用している関係で、画像サイズに制約があります。

画像は横幅164px以下の画像を用意してください。高さに上限はありません。画像にはスタイルシートで自動的に1ピクセルの枠線が入ります。

商品001

商品の説明文

商品001

商品の説明文

商品001

商品の説明文


商品001

商品の説明文

商品001

商品の説明文

商品001

商品の説明文


商品001

商品の説明文

商品001

商品の説明文

商品001

商品の説明文


三列ごとに、必ず回り込みを解除する<br class="clear">を入れてください。