1
st-need
平賀正彦氏 会員限定・ホームページテンプレートVer 3.00
1
st-need
利用規約
【利用規約】 ◆ 本テンプレートは平賀正彦氏の会員でない方の利用はできません。 ◆ テンプレートの不正利用、無断での譲渡、改変しての再配布または販売などは堅く禁じます。 ◆ 不正利用を発見した場合は、[email protected] まで通報ください。直ちに対応いたします。 【規約準拠と裁判管轄】 １．本規約の執行可能性、解釈および有効性は日本国法に従って判断されるものとします。 ２．利用者と当サイトは、本規約に関するいかなる紛争も東京地方裁判所を専属的管轄裁判所に することに同意します。 【免責事項】 ◆本テンプレートは上位表示を保障するものではありません。 SEO対策はあくまでも自己責任でお願いします。 2010年3月 制定・施行1
st-need
はじめに
このたびは、「平賀正彦氏 会員限定・ホームページテンプレート」をダウンロード して頂きまして誠にありがとうございます。 Web標準 W3C準拠された このテンプレートを使って制作したサイトは、 様々なブラウザにおいて同一レイアウトを実現し、 ユーザーの閲覧環境に応じて正しい情報を伝えられるように設計されています。 どうぞ自信をもってサイトを制作してください。 正しい構造のサイトが自社制作できれば、インターネットビジネスのうち８割は 成功したと言っても良いでしょう。 本テンプレートで制作されたサイトがあなたに多くの利益をもたらし続けますように。 2010年3月吉日 いせきけんじ http://isekikenji.jp/1
st-need
制作環境
オリジナル画像を制作し、img-layoutフォルダ内の画像と差し替えるだけで オリジナルデザインのサイトが作成できます。 画像編集には、Photoshop、Fireworks などを推奨します。 Dreamweaver（バージョン8以降） があれば、サイト制作（コード記述とCSS記述）作業もかなり 楽になります。勝手にコードが書き換わったりして、使いづらい場合もありますが。 またソースコードを入力するにはテキストエディターと呼ばれるソフトの使用もオススメです。 シンプルなソフトとして、Crescent Eveをご紹介しておきます。 http://www.kashim.com/eve/ ← デスクトップアイコンにファイルをドラッグすればコード編集ができます。 ホームページビルダーについては、編集画面のレイアウトが崩れたり、コードが一部書き換わったりして あまりオススメできませんが、サイト制作自体は可能です。 実際にブラウザで、表示を確認しながらの作業を行ってください。1
st-need
ファイル一覧
css/ └ style.css img/ ├ ba180150-01.gif └ img/ba_index.jpg img-layout/ ├ bg_body.jpg ├ bg_h2.jpg ├ bg_mag2.jpg ├ bg_top.jpg ├ ico_pagetop01.gif ├ li_arrow01～02.gif ├ main_img.jpg ├ menu0～5.jpg ├ menu0～5_o.jpg ├ side-f.jpg └ side-h.jpg 制作用/ ├ bg_top.jpg ├ menu0.jpg ├ menu0_o.jpg ├ menu1-5.jpg └ menu1-5_o.jpg company.html form-inquiry.html index.html law.html menu1.html menu2.html menu3.html menu4.html menu5.html privacy.html sitemap.html setup.js slide540180_3.js slide540180_3.swf 制作用フォルダ以外のファイルを全てサーバーにアップロー ドしていただきますと、サイトとして動作いたします。 制作用フォルダ内には、トップバナーと各メニューボタンの テキストなし画像が入っています。編集用にお使いください。 ※menu0(_o).jpg のみ、他のボタンとサイズが違います。 img-flash/ ├ banner00～03.jpg └ banner.txt1
st-need
各ファイルの説明（１）
css/ └ style.css img/ ├ ba180150-01.gif └ img/ba_index.jpg img-layout/ ├ bg_body.jpg ├ bg_h2.jpg ├ bg_mag2.jpg ├ bg_top.jpg ├ ico_pagetop01.gif ├ li_arrow01～02.gif ├ main_img.jpg ├ menu0～5.jpg ├ menu0～5_o.jpg ├ side-f.jpg └ side-h.jpg ■ css/style.css は、サイトの全体のレイアウト用です。 このファイルで、文字色・背景色・配置などを決めています。 ファイル内の記述を編集するとレイアウト崩れを起こす可能性 がありますので編集しないようにお願いします。 ■ imgフォルダには、サイト内で通常使用する画像を保存してくだ さい。 テストとして、バナーを２つ入れています。 ■ img-layoutフォルダには、サイトのレイアウトに使う画像を保 存しています。 この中の画像と、css/style.css が連動してサイトとして表示 させています。 各画像の使用箇所については次ページで説明します。1
st-need
各ファイルの説明（２-１） img-layoutフォルダ
li_arrow01.gif
bg_top.jpg
bg_h2.jpg
（H2タグの背景画像）side-h.jpg
（サイドバー見出しの背景）side-f.jpg
（枠線の背景）menu0～5.jpg
（
カーソルオン時、それぞれ menu0～5_o.jpg に対応）main_img.jpg
1
st-need
各ファイルの説明（２-２） img-layoutフォルダ
bg_mag2.jpg
（まぐまぐ登録フォームの 背景画像になります。）bg_body.jpg
（ページの両端の影部分の画像。 この小さい画像がY軸リピートで ページ背景に入っています。）ico_pagetop01.gif
1
st-need
各ファイルの説明（３） img-flashフォルダ
banner00～03.jpg
img-flash/ ├ banner00～03.jpg └ banner.txt 下記コードをHTMLファイルに貼り付けるとスライドバナーが動作します。<div id="FLASH"><script type="text/javascript" src="slide540180_3.js"></script></div>
banner.txt ファイル内の &url= の値を変えることで、表示画像に対応したリンクを貼ることができます。 （例）&url01=menu1.html →【 banner01.jpg をクリックすると menu1.html にジャンプ】 画像が下記の順番でスライドします。 banner01.jpg ↓ banner02.jpg ↓ banner03.jpg ↓ banner01.jpg（以下繰り返し） ※banner00.jpg はFlashが表示されない環境の場合に表示される画像です。
1
st-need
各ファイルの説明（４）
company.html … 会社概要ページ form-inquiry.html … お問い合わせページ index.html … トップページ law.html … 特定商取引法に基づく表記ページ menu1.html … メニュー１ページ menu2.html … メニュー２ページ menu3.html … メニュー３ページ menu4.html … メニュー４ページ menu5.html … メニュー５ページ privacy.html … プライバシーポリシーページ sitemap.html … サイトマップページ setup.js … メニューボタンのロールオーバー用ファイル slide540180_3.js … フラッシュスライドバナー用ファイル slide540180_3.swf … フラッシュスライドバナー用ファイル 各html ファイルは、お使いの環境に合わせてファイル名などを変更してください。 ページを追加する場合は、既存のHTMLファイルをコピーしてファイル名を変更してご利用ください。 ページ内のコードの記述方法、文字装飾の方法などはサポートサイトで公開いたします。 メニューボタンにカーソルを載せると画像が変わりますが、この動作を setup.js 内で行っています。1
st-need
まぐまぐ登録フォームレイアウトの説明
<div id="MAG2"> <p class="blue b center f14">マガジン・サブタイトル（簡単な説明）</p> <p class="f12">メールマガジンの説明。メールマガジンの説明。メールマガジンの説明。 ルマガジンの説明。メールマガジンの説明。（２行程度）</p><form action="http://regist.mag2.com/reader/Magrdop" method="post"> <div class="center">
<label for="op_reg6">
<input tabindex="1" accesskey="A" type="radio" id="op_reg6" name="op" value="reg" checked="checked" /> 登録</label>
<label for="op_unreg6">
<input tabindex="2" accesskey="B" type="radio" id="op_unreg6" name="op" value="unreg" /> 解除</label>
<input tabindex="3" accesskey="C" id="email6" type="text" size="26" name="rdemail" value="メールアドレス“
onfocus="if (this.value == 'メールアドレス') this.value = '';" onblur="if (this.value == '') this.value = 'メールアドレス';" /> <input type="hidden" name="magid" value="■マガジンナンバー■" />
<input type="hidden" name="reg" value="hakkou" />
<input tabindex="4" accesskey="D" type="submit" value="送信" /> </div>
</form>
<p class="f12">発行周期：毎週 ●曜日 <span class="f11"><a href="http://archive.mag2.com/■マガジンナンバー■/">>> バックナンバーはこちら</a></span></p> まぐまぐでメルマガ発行されている方のための レイアウトになります。 下記コード内の「■マガジンナンバー■」部分 （２箇所）を10桁のメルマガIDに変更してください。 変更後、サーバーにアップすれば正常に動作します。 その他、各文言を変更してお使いください。
