このテンプレートの使い方について
上のような見出しにしたい場合、h2タグで囲んで下さい。
例：<h2>このテンプレートの使い方について</h2>
ロゴ画像の入れ替えについて
ＨＰ左上にある「Flower shop ROSE*」を自分のサイト名に置き換えます。画像サイズは横354px、縦67pxで作成し、logo.gifという名前で保存しimagesフォルダに入れます。上の写真をそのまま使う場合は、ロゴ画像の背景色を#fe3c35にすればキレイになじみます。
ロゴ画像の位置調整をしたい場合、style.cssファイルの「ヘッダー」項目内にある「#header img」の left:27px; と top:40px; の部分で調整します。この意味はお花の画像の左上を基点とし、top(上)から40px、left(左)から27pxの部分に配置しています、という意味です。
例えば右に寄せたいなら、left部分をrightと変更するだけで右寄せに変わりますよ。色々試してみましょう。
左のメニューの使い方
通常のulタグとlistタグで作られています。項目を追加したい場合、例えば「トップページ」の下に１つメニューを追加したい場合は、トップページの後ろで改行すれば追加できます。htmlソース側で編集するなら、<li>ここにメニュー名</li>のように好きな行に入れればＯＫです。
メニューの途中に入っている「item menu 1」などの小見出しを作るには、listタグにクラス指定で「menu-midashi」とすればＯＫです。
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」とすればＯＫです。
htmlソース側で編集するなら、
<li>メニュー名</li>
とある所に以下のようなclass部分を追加するだけです。
<li class="arrow-last">メニュー名</li>
メニュー名のリンクカラーを変えたい場合、style.cssファイルの「メニュー他」という項目内にある「#sub li a:hover」の「#FF3B33」部分をあなたの好きなカラーに置き換えればＯＫ。
ホームページ編集のお手伝いもしております
「うまく編集できない」「作業する時間がない」という方の為に、格安でホームページ制作のお手伝いをさせて頂いております。詳細はこちら。
下の著作は絶対に外さないで下さい
下の著作とリンクは外さないで下さい。お守りいただけない場合、テンプレートの利用を中止し、5,000円の違反金を請求いたします。 逆に、500円のライセンス料を支払う事により、外す事も可能です。 >>ライセンスコードお申し込みフォームはこちら