とりあえず、よくお読みください。

SAMPLE ONLINE SHOP

• トップページ
• 当サイトについて
• ショッピングガイド
• ショッピング
• よくある質問
• 店舗紹介
• お問い合わせ

商品はこちらから

• item menu1
• item menu2
• item menu3
• item menu4
• item menu5
• item menu6
• item menu7
• item menu8

今月の特集

特定商取引に関する法律

お支払い方法

送料について

返品・交換について

店長ブログ

リンク

お問い合わせ

ホームページビルダーをご利用の方へ（重要）

ビルダーでテンプレートを開いた場合、htmlの１行目を勝手に変換されてテンプレートが崩れる原因になるのでこちらを必ずお読み下さい。もしご自身のパソコンで見た時に正常に見えても、他の環境で崩れて見える場合があります。
このページをビルダーで開いて見ている場合、既にhtmlの１行目が自動変換されている可能性大です。
修復方法についても上記ページをご覧下さい。

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

テンプレートの使い方

■はじめにやる事。
まず、htmlソースが見れる状態(メモ帳などで開いてもOK)にして、
<title>●●●あなたのホームページ名●●●</title>
を編集しましょう。あなたのホームページ名が「Sample Online Shop」だとすれば、
<title>Sample Online Shop</title>
とすればＯＫです。
SEO対策もするなら冒頭にキーワードを入れましょう。
<title>手作り雑貨通販ショップ Sample Online Shop</title>

続いて、下の方の
Copyright(C) 2009 ●●●あなたのホームページ名●●●[…省略…]
も編集します。「2009」部分はその年その年にあわせて変更して下さい。
例：Copyright(C) 2009 Sample Online Shop[…省略…]

■上部のメインメニューについて
リストタグでできています。html側で書くと以下の通り。
<ul> <li><a href="#">トップページ</a></li> <li><a href="#">当サイトについて</a></li> <li><a href="#">ショッピングガイド</a></li> <li><a href="#">ショッピング</a></li> <li><a href="#">よくある質問</a></li> <li><a href="#">店舗紹介</a></li> <li><a href="#" class="last">お問い合わせ</a></li> </ul>
上記のメニューパーツの外側であるtdには「id="mainmenu"」を指定しておきます。
メニュー内の文字数は全角文字12文字以内にして下さい。もっと入る場合でも、他のブラウザで見た際に文字が途中で切れます。
一番最後のclass="last"では右側の境界線を外す設定をしています。もし6個以下でのメニュー構成にする場合はこれを入れないほうがかえって見やすいです。

■トップページのメイン写真について
トップページのメイン写真はフリー素材なのでそのままご利用頂く事もできます。
もしご自身で変更したい場合は、幅700px以内にして下さい。段落タグ内に置く場合は幅664pxまで。

■当ブロックの見出しについて
当ブロックの上にある「テンプレートの使い方」などの見出し画像は以下のようにh2タグで囲めばOKです。

■当ブロック内のテキストは…
段落タグ<p>で囲みましょう。余白が自動で反映されます。

■当ブロック内に画像を置く場合…
段落タグ<p>内なら、幅664pxまで。段落タグの外なら幅700pxまで。

■最後にやる事。
全ページが完成したら、htmlソースが見える状態にしてmetaタグを変更しましょう。今はあまり重要視されていませんがSEO対策の一環です。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人がよく分かるような説明文を簡潔に書きましょう。
例：content="手作り雑貨をネット販売しています。バッグ・小物・アクセサリーセール中！"

続いて、その下の行の
content="キーワード１,キーワード２,〜〜〜"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。膨大な数のキーワードを詰め込むとスパム処理されるのでやめましょう。キーワード間はカンマ「,」で区切ります。
例：content="手作り,雑貨,通販………"

白い角丸テーブルと商品紹介ボックスについて

	■ここで使っている白い角丸テーブルはtableタグでできています。tableタグ丸ごとコピーしてお好きな位置に貼り付けてご利用下さい。 ■box2 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 ■この上の商品紹介ボックスは以下のhtmlタグで作られています。 <div class="box2 cf"> <img src="images/P1010007.jpg" alt="" width="100" height="100" class="fl" /> <h3>■box2</h3> <p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p> </div> 画像に対して「class="fl"」を指定すると左に配置されてテキストは回り込み処理されます。

左側ブロック内の使い方

左側ブロックの見出し（「商品はこちらから」等）はh2タグで囲めばOKです。

その下の商品メニューはリストタグでできています。html側で書くと以下の通りです。
<ul class="menu"> <li><a href="#">item menu1</a></li> <li><a href="#">item menu2</a></li> <li><a href="#">item menu3</a></li> <li><a href="#">item menu4</a></li> <li><a href="#">item menu5</a></li> <li><a href="#">item menu6</a></li> <li><a href="#">item menu7</a></li> <li><a href="#">item menu8</a></li> </ul>

文字色やサイズなどの設定は…

梱包のstyle.cssで行います。メモ帳で編集できます。詳しい説明も書いていますのでお読み下さい。

店長おすすめ商品

■ミニBAG♪ （980 yen）
またまた続いてミニミニバッグｖちょっとそこまでのお買い物にお財布だけポンと入れて使ってね♪イチゴのモチーフがポイントっ！

■ミニBAG♪ （980 yen）
またまた続いてミニミニバッグｖちょっとそこまでのお買い物にお財布だけポンと入れて使ってね♪イチゴのモチーフがポイントっ！

右ブロックだけは見出しをh3タグで囲んで下さい。