ホームページ テンプレート #001_blue 見出しタグ<h1>を使用

トップカテゴリ > パンくずリストは<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="box2">で囲まれています。回り込み(float)を使用している関係で、画像サイズとテキストの量に制約があります。

画像は90×90ピクセルの画像を用意してください。画像にはスタイルシートで自動的に1ピクセルの枠線が入ります。

画像のサイズやテキストの量が多いと、レイアウトが崩れるのでご注意ください。

商品001

ホームページテンプレートのホムテン、サンプルテキスト


商品001

ホームページテンプレートのホムテン、サンプルテキスト


商品001

ホームページテンプレートのホムテン、サンプルテキスト


商品001

ホームページテンプレートのホムテン、サンプルテキスト



一覧が終了したら、最後に必ず回り込みを解除する<br class="clear">を入れてください。

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

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

画像は164×100ピクセルの画像を用意してください。画像にはスタイルシートで自動的に1ピクセルの枠線が入ります。


一覧が終了したら、最後に必ず回り込みを解除する<br class="clear">を入れてください。

サイドメニューの解説

サイドメニューの見出しは<h3>タグと<div class="h3kazari">で囲むと表示されます。

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

引用タグ<blockquote>を使用するとこんな感じの囲みになります。

サイドメニューでのリストの表示

サイドメニューでのリストの表示

<div class="category">と
<div class="entry_body">の外にテキストを入れたい時には<div class="soto">で囲んでください