MENU

トップページ
デザインＡ
デザインＢ
デザインＣ
デザインＤ


一番上の「MENU」のような見出しにするには、
<h2 class="s-midashi">
MENU</h2>
とします。タグの途中に改行を入れてますが、普通に繋げて下さい。

メニューの横に矢印を入れる場合は、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にするとキレイに枠におさまります。

サポートと利用規約（必ずお読み下さい）

ホームページ編集のお手伝いもしております

「うまく編集できない」「作業する時間がない」という方の為に、格安でホームページ制作のお手伝いをさせて頂いております。
>>詳細はこちら。

画像加工サービスも行っております

ご自分でうまく画像加工ができない方への有料サービスです。料金は加工の度合いにもよりますが１点500円〜1,000円ほどになります。
>>ご依頼・お問い合わせはこちらのお問い合わせフォームからどうぞ

お揃いのお問い合わせフォームも作れます

このテンプレートとお揃いのＣＧＩフォーム制作承っております。１つ2,500円。
>>詳しくはこちらをご覧下さい

下の著作は絶対に外さないで下さい

下の著作とリンクは外さないで下さい。お守りいただけない場合、テンプレートの利用を中止し、5,000円の違反金を請求いたします。 逆に、500円のライセンス料を支払う事により、外す事も可能です。
>>ライセンスコードお申し込みフォームはこちら