●●●あなたのホームページ名●●●

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

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

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

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

画像を置くなら

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

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

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

見出しの作り方

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

<h2 class="m-midashi">見出し部分</h2>

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

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

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

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

サンプル

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

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

追加もできます

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

大きなテーブル

上の見出しは
<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です。)