MENU

トップページ
デザインA
デザインB
デザインC
デザインD


一番上の「MENU」のような見出しにするには、
<h2 class="s-midashi">
MENU</h2>
とします。

メニューの横に矢印を入れる場合は、tdタグにclass指定で「arrow1」として下さい。これだけでは矢印は出てきませんが、テキストにリンクを貼ると出てきます。
普通にセルの分割で増やせばclass指定も引き継ぐHP編集ソフトが多いかと思うのでそれで増やしてリンクを貼るだけでOKだと思います。

tdセルに何も指定しないとここの説明文のように通常の状態で入力ができます。 arrow1のclass指定が入った状態でも同じテキストになりますが、リンクを貼ると崩れるのでメニュー以外ならclass指定は外しておきましょう。

h3タグで囲むとこんな感じ

全テーブルで共通の上の見出しの作り方はh3タグで囲むだけです。
▼HTMLソース側の例
<h3>見出しテキスト</h3>

画像を置くなら

横幅を180pxにするとキレイに枠におさまります。

 

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

比較的大規模なサイトを想定したテンプレートを作ってみました。初心者でも使いやすいようにtableタグになっています。

タイトルロゴについて

上のサンプルのような画像にする場合は幅330px×高さ60pxにして、背景通過でマット色を#292929にして「logo.gif」の名前でimagesフォルダに上書きすればOK。画像加工ができない人は上のロゴ画像を外して直接テキストを入力すればそれなりに大きな文字になるよう設定してあります。

見出しの作り方

左の「MENU」や上の「このテンプレートについて」などの見出し部分はtableタグでなく、通常のh2タグにclass指定をしています。

<h2 class="m-midashi">見出しテキスト</h2>

ちなみに、上の白い「見出しの作り方」みたいな枠にしたい場合は、
<h3>使い方例</h3>
のようにh3タグで囲むだけでOKです。左側のメニューの下スペースでも、下の大きなテーブルでも同様な見出しが作れます。

続いて、このテキストが入っているテーブルの説明をします。長くなるので、右側のテーブルで説明をします。→

 

テキストが入るテーブルについて

今、このテキストが入っている部分もtableタグ使用です。通常のテーブルを作って、class指定に「m」とするだけです。分かりやすいように、上の見出しも含めたhtmlソースを書いてみます。分からない人は以下をそのままコピペすればこのテーブルができます。

サンプル

<h2 class="m-midashi">見出し部分</h2>
<table class="m" border="0" cellspacing="0" cellpadding="0">
<tr> <td>テキスト部分</td> </tr>
</table>

補足ですが、一番左のメニューや下の大きなテーブルではまた若干指定が違いますのでご注意下さい。


FLASH画像について

上部の加工画像はFLASHです。ダウンロード後、梱包のfla.txtファイルをお読み下さい。画像の入れ替えもできます。


追加もできます

同じ幅のテーブル同士なら追加できます。


大きなテーブル

上の見出しは
<h2 class="l-midashi">
大きなテーブル</h2>
とすれば出ます。「l」は数字でなくアルファベット「L」の小文字です。

今、このテキストが入っている部分もtableタグ使用です。通常のテーブルを作って、class指定に「l」とするだけです。分かりやすいように、上の見出しも含めたhtmlソースを書いてみます。分からない人は以下をそのままコピペすればこのテーブルができます。

サンプル

<h2 class="l-midashi">見出し部分</h2>
<table class="l" border="0" cellspacing="0" cellpadding="0">
<tr> <td>テキスト部分</td> </tr>
</table>

大きなテーブルに画像を置きたい場合…

横幅を705pxにするとキレイに枠におさまります。


テンプレートご利用の前に必ずお読み下さい

当ホームページテンプレートはこちらからダウンロードできます。

■このテンプレートは、無料テンプレートサイトNikukyu-Punchが配布しているものです。
必ず利用規約をご一読の上でご利用下さい。

フッター内(HP最下部)の著作表示・スポンサー表示は削除しないで下さい。
お守りいただけない場合、テンプレートの利用を中止し、違反金を請求いたします。 逆に、ライセンス料を支払う事により、外す事も可能です。
>>ライセンスコードお申し込みフォームはこちら

WEB制作業者様、もしくは外部業者にWEB制作依頼を予定されている方へ
WEB制作代行用に当テンプレートを使うWEB制作業者様などの場合、必ず事業者登録(及びテンプレートコード取得)を行って下さい。詳しくはこちら
また、外部のWEB制作業者に制作を依頼予定の方の場合は、その制作業者側にこの事業者登録を行って頂く必要があります。

当社関連サイト(※こちらのバナーは削除してご利用下さってOKです。)

フリー写真サイト PHOTO CHIPS

テンプレートの編集サービスについて

ロゴやメニューの画像加工やhtmlコーディング、テンプレートのテーマカラー変更やプログラム設置など、テンプレートに関する様々なサポートも承っております。また、当テンプレートのPSD(Photoshop)ファイル販売も行っております。
詳しくはこちらのテンプレート編集ページをご覧下さい。

 
  Copyright(C)2008 ●●●あなたのホームページ名●●● All Rights Reserved.
*Template design by Nikukyu-Punch*