商品はこちらから

今月の特集

上のh2見出しとセットで使うボックスです。html側だと
<div class="box1">で適用されます。


特定商取引に関する法律


お支払い方法


送料について


返品・交換について


店長ブログ


リンク


お問い合わせ

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

ビルダーでテンプレートを開いた場合、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側で書くと以下の通り。

上記のメニューパーツの外側である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タグで作られています。


画像に対して「class="fl"」を指定すると左に配置されてテキストは回り込み処理されます。

左側ブロック内の使い方

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

その下の商品メニューはリストタグでできています。html側で書くと以下の通りです。

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

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