大きくレイアウトを変更するにはこの部分を編集しますがスキルがあがってから css は触っていかれればいいでしょう gnavi_color 内はメニューボタンのほかの色のバージョンが入っていますサイトをご覧いただくとメニューボタンは黒になっていますが他の色にしたいときはこの中から選んでい

Size: px

Start display at page:

Download "大きくレイアウトを変更するにはこの部分を編集しますがスキルがあがってから css は触っていかれればいいでしょう gnavi_color 内はメニューボタンのほかの色のバージョンが入っていますサイトをご覧いただくとメニューボタンは黒になっていますが他の色にしたいときはこの中から選んでい"

えりかしもね
5 years ago
Views:

1 ホームページテンプレートの使い方ダウンロードしていただき解凍してパソコン内の任意の場所に保存してくださいテンプレートの中は以下の画像のようなフォルダとファイルが入っていますそのファイルとフォルダをそのままサーバーにアップすればこのようなサイトになりますこの中の画像テキスト ( 文章 ) などを変えていくことでご自身のサイトに変えていくことができますレイアウトなどもご自由に変えれますがまずはそのままのレイアウトで入れ替えをしながら作られるのがいいでしょう css はこのテンプレートのいろいろな命令をしているところです 1

2 大きくレイアウトを変更するにはこの部分を編集しますがスキルがあがってから css は触っていかれればいいでしょう gnavi_color 内はメニューボタンのほかの色のバージョンが入っていますサイトをご覧いただくとメニューボタンは黒になっていますが他の色にしたいときはこの中から選んでいただき変更していただきます黒の他に青緑オレンジ紫赤黄色がありますメニューボタンの色や項目はご自身で作られたものにも変更は可能になっています img の中にはサイトで使う商品画像などをいれておきます img-layout 内はデフォルトで使用しているメニューボタンの画像やお問い合わせの画像などが入っています通常はここに追加で入れることはありません index をはじめとする8つの HTML ファイルがありますこれらがサイトのページになります一番最初は8ページあるということですぼくたちのサイトはこのページを増やしていくことにより強くしていきます index がサイトのトップページとなりますこの index ファイルを修正していくことによりサイトのトップページが変わりキーワード意識させたサイトタイトルをつけることで SEO にも大きな影響があるので大事なファイルとなります 2

3 サイトを見ていただき画面上で右クリックしソースを表示させてみてくださいどの部分を修正すればどこが変わるかが理解できればサイト制作も早くなります 1.23 行目 <div id="logo"><a href="./"><img src="img-layout/logo.gif" alt=" サイトタイトル " width="240" height="60" /></a></div> ショップのロゴマークなどの画像を用意してここに表示させますそのマークをクリックすればトップページに戻るようになっています 2.20 行目 <h1> トップページタイトル </h1> SEO 的にも重要な部分です 3.26~34 行目メニューボタンの部分です 3

4 <div id="menu-home"> <div class="menu"><a href="./"><img src="img-layout/menu0.jpg" alt="home" width="102" height="30" class="img_o" /></a></div> <div class="menu"><a href="best-sellers.html"><img src="img-layout/menu1.jpg" alt="best SELLERS" width="165" height="30" class="img_o" /></a></div> <div class="menu"><a href="sale.html"><img src="img-layout/menu2.jpg" alt="sale" width="93" height="30" class="img_o" /></a></div> <div class="menu"><a href="how-to-order.html"><img src="img-layout/menu3.jpg" alt="how TO ORDER" width="175" height="30" class="img_o" /></a></div> <div class="menu"><a href="review.html"><img src="img-layout/menu4.jpg" alt="review" width="111" height="30" class="img_o" /></a></div> <div class="menu"><a href="about-us.html"><img src="img-layout/menu5.jpg" alt="about US" width="133" height="30" class="img_o" /></a></div> <div class="menu"><a href="contactus.html"><img src="img-layout/menu6.jpg" alt="contact US" width="150" height="30" class="img_o" /></a></div> </div> たとえば一番右の CONTACT US は横 150 縦 30 の menu6 という画像表示させてそこをクリックすると contactus.html というページに飛ぶように命令しています 4. トップバナーテンプレートの img-layout 内の main_img という画像 ( 横 930 縦 200) を差し替えまたは修正することによって変更することができます 5.41 行目 <h2> 魅力的なタイトルキャッチコピー </h2> この h2 ダグも SEO を意識したキーワードの入ったものの方がいいでしょう 4

5 7. 左サイドバー menu Category Menu を削除することもありますカテゴリーをいくつか設定してユーザーが迷わないサイト作りをしましょう Category は 116 行目以下 5

6 8. 左サイドバー ABOUT US ここも削除する場合もあります W3C のマークは残しておきましょう 9.57~75 行目メインコンテンツ商品説明部分メインコンテンツはご自由にしていただいて結構ですテンプレートでは一般的なならびにしていますトップページで商品説明販売したい場合は9のようにされるのがいいでしょう buy now をクリックすると PayPal の決済ページに飛ぶようにします PayPal の決済ボタンの作り方はこちら作っていただいて PayPal コードの value の右横の英数をテンプレートの 73 行目 <input type="hidden" name="hosted_button_id" value=" ****** " /> の ****** に入れ替えていただければリンクできます 6

10.77~97 行目ランキングの欄ですランキングを載せるとその商品にアクセスを流すことができますので見てもらいたい商品や売りたい商品をランキングに掲載するのはおすすめです 11.99 行目 <p class="pagetop"><a href="./"><img src="img-layout/obj_pagetop.

7 10.77~97 行目ランキングの欄ですランキングを載せるとその商品にアクセスを流すことができますので見てもらいたい商品や売りたい商品をランキングに掲載するのはおすすめです行目 <p class="pagetop"><a href="./"><img src="img-layout/obj_pagetop.jpg" alt="pagetop" width="66" height="14" /></a></p> page top という小さい画像を表示させてそこをクリックするとそのページの一番上に戻るようにしています <a href="./"> の部分がページを設定していますここではトップページ (index) に設定しています ~177 行目フッター部分メニューやカテゴリーの項目に修正されればいいでしょう 7

8 行目 <p>copyright 2016 <a href="./"> サイトタイトル </a> All Rights Reserved.</p> コピーライトの部分ですサイト名やショップ名を入れましょう 181 行目に  という記載がありますこれはすべてのページにありますここに Google Analytics のタグをいれますメニューボタンや左サイドバーフッター部分はサイト全ページ同じにする必要がありますファイル数 ( ページ数 ) が少ないときは各々のページをテキストソフトで開いてコピー & ペーストでいいですがページ数が多くなってくるとたいへんです以下のような一括変換ソフトがありますのでのちのちはご利用してください Devas Devas の詳しい使用方法を書いたページですよく使うテキストタグの説明こちらのページをご覧くださいテキストを表示させるタグを書き出していますページを表示させていただき画面上で windows でしたら右クリックしてページのソースを表示させて見比べながらご覧くださいテキスト 1 8

9 44 行目 <h2> テキスト 1</h2> と記載するとページのように表示されます以下の <h3></h3> <h4></h4> とともにタイトルや小見出しなどに使いますテキスト 2 46 行目 <h3> テキスト 2</h3> テキスト 3 48 行目 <h4> テキスト 3</h4> テキスト 4 50 行目 <p> テキスト 4</p> 通常文字を入力する場合は <p>~</p> を使いますテキスト 5 52 行目改行するときは <br /> を使います 1 行空けたい場合は </p> で終わって次の文章の頭に <p> を入れて入力すれば 1 行空欄ができますテキスト 6 55 行目テキストをクリックすると別窓が開いて指定したページに飛ぶようにできるタグですよく使います <a href=" リンク先の URL " class="popup"> テキスト 6</a> テキスト 7 57 行目文字の色を変えることができます <p>~</p> ないの変えたい文字を <span class=" 文字の色 "> テキスト </span> でくくります赤は red 青は blue 緑は grn オレンジは ora クレーは gry 黄色の帯をつける場合は yell にします文全部をたとえば赤にする場合は <p class="red">~</p> で結構ですテキスト 8 59 行目 <p class="b"> テキスト 8 太字 </p> 太文字にしたい場合ですテキスト 9 61 行目文字の大きさを変えることができます f12 f18 f24 f28 で大きさが変わります 9

10 テキスト行目 s を使うことで消し文字になりますテキスト行目 u を使うことで下線を引くことができますテキスト行目 center を使うと文字が真ん中に表示されますテキスト行目 txt-r を使うと文字が右寄せになりますテキスト行目 yell-bg を使うと文字が枠で囲まれますテキスト 15 74~80 行目チェック項目を示したい場合はこのタグを使います項目が多くなる場合は <li>~</li> をコピーして増やしてくださいテキスト 16 テキスト 17 テキスト行目 86 行目 88 行目上部にスペースを空けたい時に使います mt20 は上部に 20px mt40 は上部に 40px mt60 は上部に 60px 空けることができます画像を表示させるタグこちらのページをご覧ください img フォルダ内の横 224 縦 168 の photo_01s という jpg 形式の画像を表示させますソースを見ると 43 行目がその記載です 10

11 真ん中に寄せる場合は 46 行目テキストと同じく center を使います右寄せにする場合は 49 行目こちらも同じく txt-r を使います商品画像を横に 3 つ並べる場合は 1 つのボックスとして横幅 224px で設定されています (52 行目 ~60 行目 ) 4 つ並べる場合は 1 つのボックス横幅 160px で設定されています (64 行目 ~74 行目 ) 表示されている画像をクリックすると他のページに飛ばすようにするにはテキストと同じく <a href=" リンク先 URL ">~</a> を使います (78 行目 ) よく使うタグはメモ帳などにコピーして一覧として使いやすいようにまとめておかれるのがいいでしょう Windows では画面右下に道具箱のようなアイコンが表示されていると思いますそのアイコンをクリックして単語 / 用例の登録をクリックします読みと語句入力して登録しておいてくださいたとえばぼくの場合読みに p 語句に <p></p> と登録しています p と入力すれば <p></p> が出るようになっていますりんだと <a href= class= popup ></a> s だと <span class= red b > や </span> などが出るようになっていますのでみなさんもご自分が使いやすいように登録されるのがいいかと思います 11

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

Crescent Eve ホームページ編集ソフトの使い方マニュアル 1 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 3 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 4 COPYRIGHT TempNate. ALL RIGHTS RESERVED.