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

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

当テンプレートの詳しい使い方はこちらをご覧下さい

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

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

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

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

フリー写真サイト PHOTO CHIPS

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

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

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

上のような見出しにしたい場合、h2タグで囲んで下さい。
例:<h2>このテンプレートの使い方について</h2>

ロゴ画像の入れ替えについて

HP左上にある「Sample Web Site」を自分のサイト名に置き換えます。画像サイズは横400px縦67pxで作成し、logo.gifという名前で保存しimagesフォルダに入れます。上の写真をそのまま使う場合は、ロゴ画像の背景色を#80d53bにすればキレイになじみます。

ロゴ画像の位置調整をしたい場合、style.cssファイルの「ヘッダー」項目内にある「#header img」の left:27px;top:40px; の部分で調整します。この意味はビル画像の左上を基点とし、top(上)から40px、left(左)から27pxの部分に配置しています、という意味です。
例えば右に寄せたいなら、left部分をrightと変更するだけで右寄せに変わりますよ。色々試してみましょう。

左のメニューの使い方

通常のulタグとlistタグで作られています。項目を追加したい場合、例えば「トップページ」の下に1つメニューを追加したい場合は、トップページの後ろで改行すれば追加できます。htmlソース側で編集するなら、<li>ここにメニュー名</li>のように好きな行に入れればOKです。

メニューの途中に入っている「item menu 1」などの小見出しを作るには、listタグにクラス指定で「menu-midashi」とすればOKです。
htmlソース側で編集するなら、
<li>メニュー名</li>
とある所に以下のようなclass部分を追加するだけです。
<li class="menu-midashi">メニュー名</li>

一番下の「item menu others」のように独立したメニューを作りたい場合、メニュー項目の一番下にある</ul>の下に以下のように追加します。htmlソース側で見て下さい。
<ul>
<li class="menu-midashi">item menu others</li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li class="arrow-last"><a href="#">item 5</a></li>
</ul>

■注意点
メニューの最後を通常のリストタグだけで終了してしまうと、左側の点線ラインが中途半端なままになってしまいます。これを避けるには、最後のメニューのlistタグにクラス指定で「arrow-last」とすればOKです。
htmlソース側で編集するなら、
<li>メニュー名</li>
とある所に以下のようなclass部分を追加するだけです。
<li class="arrow-last">メニュー名</li>

メニュー名のリンクカラーを変えたい場合、style.cssファイルの「メニュー他」という項目内にある「#sub li a:hover」の「#FF3B33」部分をあなたの好きなカラーに置き換えればOK。

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

■HPカラーの変更、お問い合わせフォームの設置、画像加工サービス(500円〜)など、ホームページ編集のお手伝いもしております。
>>詳細はこちら

listタグではない状態でも使えます。

TOPICS

上の「TOPICS」のような見出しにしたい場合、h3タグで囲んで下さい。
例:<h3>TOPICS</h3>

TOPICS 2

このテーブル枠は、divタグで囲んでクラス指定に「side-table」とすればできます。
htmlソース側で編集する場合、
<div class="side-table">テキスト</div>