ホームページビルダーをご利用の方へ（重要）
ビルダーでテンプレートを開いた場合、htmlの１行目を勝手に変換されてテンプレートが崩れる原因になるのでこちらを必ずお読み下さい。もしご自身のパソコンで見た時に正常に見えても、他の環境で崩れて見える場合があります。
もしこのページをビルダーで開いて見ている場合、既にhtmlの１行目が自動変換されている可能性大です。修復方法についても上記ページをご覧下さい。
文字色やサイズなどの設定は…
梱包のstyle.cssで行います。メモ帳で編集できます。詳しい説明も書いていますのでお読み下さい。
テンプレートの使い方
■はじめにやる事。
まず、htmlソースが見れる状態(メモ帳などで開いてもOK)にして、
<title>●●●あなたのホームページ名●●●</title>
を編集しましょう。あなたのホームページ名が「Sample Nail Salon」だとすれば、
<title>Sample Nail Salon</title>
とすればＯＫです。「●●●」部分はhtml側で分かりやすいように飾りを入れたもので、実際には外してご利用下さい。残したままだとSEO対策にも不利です。
SEO対策もするなら冒頭にキーワードを入れましょう。
<title>ネイルの通販ショップSample Nail Salon</title>
続いて、下の方の
Copyright(C) 2009 ●●●あなたのホームページ名●●●[…省略…]
も編集します。「2009」部分はその年その年にあわせて変更して下さい。
例：Copyright(C) 2009 Sample Nail Salon[…省略…]
■ヘッダー背景画像（右上の写真）について
自分で画像を用意する場合、幅1091px、高さ110pxにし、画像ファイル名を「header_bg.jpg」にしてimagesフォルダに上書きして下さい。現在のネイル画像と置き換わります。
■トップページのメイン画像について
文字なしの写真がbaseフォルダに入っていますので使いたい方はどうぞ。ただし、普通に市販されちえるネイルを撮影したものです。
■サイト名ロゴ画像について
横幅357px、高さ57pxで制作して、画像ファイル名を「logo.gif」にしてimagesフォルダに上書きして下さい。現在の「Sample Nail Salon」のロゴと置き換わります。
■上部のメインメニューについて
リストタグでできています。html側で見ると以下の通り。
一番右側のメニューだけ、右の余白をなくす為にclass="last"と指定して下さい。メインメニューを使わない場合は、ブロックごと削除して下さい。
Windows XP以前のパソコンや、メイリオフォントが搭載されていないパソコンをご利用の場合、メニュー内のテキストを幅ギリギリまで使わないように注意して下さい。他の環境で最後のメニューの文字が途中から消えてしまう場合があります。ギリギリになりそうな場合、できればメイリオフォントが搭載されているWindows Vistaなどの環境での閲覧チェックをおすすめします。
■当ブロックの見出しについて
当ブロックの一番上にある「ホームページビルダーをご利用の方へ（重要）」などの見出しは以下のようにh2タグで囲めばOKです。
環境によって文字が切れる場合があるのであまり枠ギリギリまで文字を詰め込まないように。
■当ブロック内のテキストは…
段落タグ<p>で囲みましょう。余白が自動で反映されます。
■当ブロック内に画像を置く場合…
段落タグ<p>内なら、幅683pxまで。段落タグの外なら幅703pxまで。
■最後にやる事。
全ページが完成したら、htmlソースが見える状態にしてmetaタグを変更しましょう。今はあまり重要視されていませんがSEO対策の一環です。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人がよく分かるような説明文を簡潔に書きましょう。
例：content="ネイル通販のSample Nail Salon。あなただけのオリジナルネイルを制作しております。"
続いて、その下の行の
content="キーワード１,キーワード２,〜〜〜"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。膨大な数のキーワードを詰め込むとスパム処理されるのでやめましょう。キーワード間はカンマ「,」で区切ります。
例：content="ネイル,通販,Sample Nail Salon,……"
左右ブロックの「submenu」の使い方について
左右ブロックのメニュー部分は以下のhtmlでできています。MENUと入った黒い見出しも含めると以下の通りです。
上をコピーして左右ブロック内に追加すればいくつもサブメニューのブロックを追加する事ができます。テーマが異なる場合などメニューを分けて使いたい場合にご利用下さい。「MENU」と入った黒い見出し画像の文字なし土台はbaseフォルダに入っていますので、必要に応じて文字のせなどしてご活用下さい。
トップページの「What's New」コーナーの使い方
定義リストタグでできています。h2の見出しを含めた１ブロックをhtmlで書くと以下の通りです。
<dl>タグにclass指定で"new"とする事でインラインフレーム(iframe)風のボックスが出来上がります。iframeと違い、実際に同じhtmlファイル内に記載されているのでSEO的にも有効かと思います。
<dt>には日付、<dd>には内容を書きます。日付の文字色やボックスの背景色やボックスの大きさなどはstyle.cssで変更して下さい。
トップページの商品テーブルについて
「New Nail」とある商品テーブルには、１行のテキストと縦横100pxの写真を配置して下さい。これ以上文字が増えたり画像が大きくなるとレイアウトが崩れます。
こんな商品ボックスも用意しておきました。
商品説明が必要な場合などにご利用下さい。画像サイズはトップページの「New nail」コーナー同様、縦横100pxにして下さい。変更したい場合は、style.cssを編集して下さい。
item name
ここに説明文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
item name
ここに説明文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
item name
ここに説明文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
おまけ
テンプレートとセットのバナーも準備しました。文字なし土台がbaseフォルダに入っていますのでご活用下さい。当サイトでも文字のせ代行承っておりますのでお気軽にご相談下さい。
