テンプレートの使い方
■はじめにやる事。
まず、htmlソースが見れる状態(メモ帳などで開いてもOK)にして、
<title>●●●あなたのホームページ名●●●</title>
を編集しましょう。あなたのホームページ名が「Sample Italian restaurant」だとすれば、
<title>Sample Italian restaurant</title>
とすればＯＫです。SEO対策もするなら、PRしたいワードを冒頭に追加します。
<title>渋谷のイタリア料理店 Sample Italian restaurant</title>
続いて、下の方の
Copyright(C) 2009 ●●●あなたのホームページ名●●●[…省略…]
も編集します。こちらはサイト名だけを入れましょう。
例：Copyright(C) 2009 Sample Italian restaurant[…省略…]
■ヘッダーのロゴの入れ替えについて
幅436px、高さ60pxでロゴを作って、背景は白色でマット処理してlogo.gifとしてimagesフォルダに上書きして下さい。現在のロゴと置き換わります。
■ヘッダー右側の電話番号入れ替えについて
sampleフォルダにヘッダー背景画像が入っています。（header_bg.gif）
これに電話番号などのせてimagesフォルダに上書きして下さい。現在のヘッダー背景画像と置き換わります。
■トップページのメイン写真について
トップページのメイン写真は再利用不可です。必ず入れ替えてご利用下さい。
配布元サイトは「素材辞典」さんの素材辞典イメージブック9に収録されています。
ご自身で作成される場合は、幅898pxで作成し、ファイル名を「main_img.jpg」にしてimagesフォルダに上書きすれば上記写真と入れ替わります。
ちなみに、上部画像の高さは400pxですが必ずしも高さを合わせる必要はありません。
高さを変えた場合は、html側で画像の高さを設定しなおして下さい。
尚、下の丸くカットされたような加工もしたい場合は、sampleフォルダに入っているkakou.pngをメイン画像の上に持ってきて保存すればOKです。レイヤー機能があるグラフィックソフトでないと利用はできません。
■上部のメインメニューについて
文字なしのベース画像がsampleフォルダに入っていますので好きに文字いれしてそのままimagesフォルダへ上書きして下さい。左からmenu_01.gif…と置き換わります。
また、menu_overで始まる画像がロールオーバー用画像になります。
当方でもメニューへの文字入れ代行1個150円にて承っております。
■当ブロックの黒色の見出し画像について
「テンプレートの使い方」などの見出し画像は以下のようにh2タグで囲めばOKです。
■当ブロック内のテキストは…
段落タグ<p>で囲みましょう。余白が自動で反映されます。
■当ブロック内に画像を置く場合…
段落タグ<p>内なら、幅510pxまで。段落タグの外なら幅550pxまで。
■最後にやる事。
全ページが完成したら、htmlソースが見える状態にしてmetaタグを変更しましょう。今はあまり重要視されていませんがSEO対策の一環です。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人がよく分かるような説明文を簡潔に書きましょう。
例：content="渋谷のイタリア料理店。春の新作メニューを揃えてお迎えしております。"
続いて、その下の行の
content="キーワード１,キーワード２,〜〜〜"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。膨大な数のキーワードを詰め込むとスパム処理されるのでやめましょう。キーワード間はカンマ「,」で区切ります。
例：content="渋谷,イタリア料理店,Italian restaurant"
商品テーブルの使い方
 *4,500yen* |
 *5,500yen* |
 *480yen* |
 *450yen* |
 *380yen* |
*4,500yen* |
*5,500yen* |
*480yen* |
*450yen* |
*380yen* |
上記は通常のtableタグで作られています。tableに「class="box"」を追加すれば、画像やリンクの設定が自動で反映されます。ちなみに、画像にリンク指定をしないと、カーソルオーバー時にフチの色が変わったりなどの色の変化はありません。
色などの設定を変えたい人はstyle.cssを編集して下さい。