テンプレートの使い方

■はじめにやる事。
まず、htmlソースが見れる状態(メモ帳などで開いてもOK)にして、
<title>●●●あなたのホームページ名●●●</title>
を編集しましょう。あなたのホームページ名が「Sample Dog Cafe」だとすれば、
<title>Sample Dog Cafe</title>
とすればOKです。SEO対策もするなら、PRしたいワードを冒頭に追加します。
<title>渋谷のドッグカフェ Sample Dog Cafe</title>

続いて、下の方の
Copyright(C) 2009 ●●●あなたのホームページ名●●●[…省略…]
も編集します。こちらはサイト名だけを入れましょう。
例:Copyright(C) 2009 Sample Dog Cafe[…省略…]

ヘッダーのロゴの入れ替えについて
幅436px、高さ54pxでロゴを作って、背景は白色でマット処理してlogo.gifとしてimagesフォルダに上書きして下さい。現在のロゴと置き換わります。

ヘッダー右側の電話番号入れ替えについて
sampleフォルダにヘッダー背景画像が入っています。(header_bg.gif)
これに電話番号などのせてimagesフォルダに上書きして下さい。現在のヘッダー背景画像と置き換わります。

■トップページのメイン写真について
トップページのメイン写真は再利用不可です。必ず入れ替えてご利用下さい。
配布元サイトは「素材辞典」さんの素材辞典イメージブック10に収録されています。

ご自身で作成される場合は、幅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="キーワード1,キーワード2,〜〜〜"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。膨大な数のキーワードを詰め込むとスパム処理されるのでやめましょう。キーワード間はカンマ「,」で区切ります。
例:content="渋谷,ドッグカフェ,Sample Dog Cafe"

商品テーブルの使い方


*サンプルA*

*サンプルB*

*サンプルC*

*サンプルD*

*サンプルE*

*サンプルA*

*サンプルB*

*サンプルC*

*サンプルD*

*サンプルE*

上記は通常のtableタグで作られています。tableに「class="box"」を追加すれば、画像やリンクの設定が自動で反映されます。ちなみに、画像にリンク指定をしないと、カーソルオーバー時にフチの色が変わったりなどの色の変化はありません。
色などの設定を変えたい人はstyle.cssを編集して下さい。

*SIDE MENU*

*SIDE MENU*

上部の緑色の見出し*SIDE MENU*部分は
h3タグで囲めばOKです。html側だと以下の通り。

上部のサイドメニューは
リストタグでできています。ulタグにclass指定で「sidemenu」を指定し、メニュー本体はliタグで作ります。h3の見出しを含め、サイドメニューの1ブロックをhtml側で書くと以下の通りです。

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

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

サポート

■ホームページ編集のお手伝いもしております。
>>詳細はこちら

■画像加工サービスも行っております。ご自分でうまく画像加工ができない方への有料サービスです。料金は加工の度合いにもよりますがメインイメージの場合は1点500円〜1,000円ほど。上のメニューの場合、1個150円(ロールオーバー用も込み)。全部変えるなら150円×7個=1,050円です。
>>ご依頼・お問い合わせはこちらのお問い合わせフォームからどうぞ