<4D F736F F D2082D982AD82C882EA C815B D836A B2E646F63>

Transcription

1 ほくなれテンプレートマニュアル ( 暫定版 ) 1 週間で覚える無料ホームページ作成講座 ほくなれ

2 まえがき お店の宣伝のためにホームページを用意することにしたけど 一から作らないといけないのだろうか 確かに一から作る方法もあります 一から作ると 好きなデザインで作成することができます ですが 非常に高度なテクニックや知識が必要とされます 入門書読んでも なかなかビジネス用には遠いものとなってしまいがちです しかし そんな不安は心配ありません 最近では テンプレートといって 予めデザインやレイアウトが用意されているものがあります 作るほうとしては 文章や図を用意すれば それらを挿入するだけで簡単にホームページを作成することができます 当ホームページテンプレートは初心者でも使いやすくできれるよう シンプルにまとめました また 集客のためのSEO 用の基本的なタグも用意しております このマニュアルは 一日一時間こつこつやって一週間で完成させることを目標に作りました 細かいところは省き 最小限に抑えました 時間があれば 一日でできるでしょう ぜひ 当テンプレートとマニュアルを活用して 集客に繫がるホームページになっていただければと思います

3 1 日目 : ダウンロードして 編集してみよう! 1. ダウンロード 1-1.1ファイルを選ぶ より好きなテンプレートをダウンロードします.zip( ダウンロード ) と記述されているものより ダウンロードしてください 1-2. 展開するダウンロードしたファイル (.zip) を 右クリックして すべて展開 (A) を選択します

4 1-3. 展開したファイルを確認するファイルを展開し 以下の三つがあるかどうか確認してください [css] [image] index.html この三つがあることで ホームページが構成されます 1-4. それぞれのファイルの意味それぞれのディレクトリ ファイルの役割について書きます [css] ホームページのレイアウトやデザインの設定をする 俗に言う 見栄え のため [image] 画像ファイルを保存しておく index.html ホームページ上の文章を書いたり 画像を指定したりする

5 2. ページの構成をみてみよう 今回は実際にダウンロードしたテンプレートを見て その構成について勉強します 2-1. ページを開いてみる ダウンロードして展開したファイルやディレクトリの中から index.html というファイルを開いてみましょう すると 下記のようなファイルが開かれます ( ダウンロードしたファイルによって 見た目が変わってきますが だいたい同じような構成です )

6 2-1. 構成について構成はヘッダー部 サイドメニュー 本文の三つに分かれます トップページ ( 一番最初に表示するページ ) ではこれらに加えて トップ画像も追加します 今回のテンプレートでは ヘッダー部にもメニューがあります メニューがないテンプレートもありますが ほぼ共通しています 今回の講座では これら三つの部分を改良して オリジナルのテンプレートとしていきます 2-2. それぞれの意味 1ヘッダー部 企業名や住所 キャッチコピー 電話番号などを記します 場合によってはメニューもあります

7 2サイドメニュー 文字通りサイドメニュー 会社紹介 商品案内などのページに容易にいけるようなメニューを作ります 3トップ画像 企業やその特徴やシンボル メッセージなどを表したトップ画像を書くといいです 4 本文 ここではそれぞれのページの内容を記していきます 3. 実際に編集してみよう 3-1. ファイルの内容を開く 1index.html のファイル上にマウスをもっていき 右クリック 2プログラから開く Notepad またはメモ帳を選択

8 すると 下記のようなファイルが表示されます これでは何が何だかわかりませんね とりあえず どこかしら編集してみましょう 3-2. 編集してみる 1とりあえず 開いたメモ帳をスクロールして ついに出た当店自慢の を大放出 の部分を探します 2この部分を 今日も暑いですね に変更してみる

9 3 編集したら メモ帳の ファイル 上書き保存 で保存する 4index.htm を開いてみる そのままダブルクリックして みてみましょう 文章が変わっているはずです

10 だいたい このような感じで 編集していきます ここまでで ホームページの基本的な構成から 実際に文章の編集の流れを勉強してきました

11 3 日目 : ホームページの作成 ( 編集準備からヘッダー編集まで ) 今回は 以下のページから egreen2 というテンプレートを用いて 編集します 3-1. お好みのダウンロードと編集準備 1www.hokunare.com よりテンプレートをダウンロードしてください 展開します 3 メモ帳で編集できるようにしてください

12 4 開きます 3-2. 住所や電話番号 会社名の変更開いたら 以下の箇所を編集してください <table> <tr> <td class="a1"><a href="index.html"> 歯科医院 </a></td> <td class="a2"> お問い合わせはお気軽に <br /> <br /> 住所 : 秋田県青森市 町 <br /> </td> </tr> </table> 編集したら上書き保存し インターネットエクスプローラーで見てみましょう

13 3-3. タイトル ( 歯科医院 ) の上の **** の編集 1また メモ帳を開きます 2 以下の文言を編集します <h1>********************************</h1> ( 編集 ) <h1> 市の皆様に密着した親切丁寧な歯医者さんを目指します </h1> 同じようにインターネットエクスプローラーで見てみます 3-4. 次はタイトルを編集します <title> タイトル </title> ( 編集 ) <title> 歯科医院 - で唯一の歯医者さん </title> インターネットエクスプローラーでみると 一番上の部分のタイトルが換わっていることが分かります

14 4. メニューの編集 ページの左側にメニューがあります そこを編集していきます 4-1. メニューを確認してみよう ページをインターネットエクスプローラーなどで開いてみましょう ホームが並んでいます ここを編集していきます 4-2. 編集してみる 回と同じように index.html をメモ帳 (Notepad) を開きましょう ページの下部に下記のように書かれている部分があるかと思います <h3>contents</h3> <ul> <li><a href="index.html"> ホーム </a></li> <li><a href="index.html"> ホーム </a></li> <li><a href="index.html"> ホーム </a></li> <li><a href="index.html"> ホーム </a></li> <li><a href="index.html"> ホーム </a></li> </ul> ここを前回エクセルで作成した表を参考に のように編集します

15 <h3>contents</h3> <ul> <li><a href="index.html"> ホーム </a></li> <li><a href="aisatsu.html"> 院長のごあいさつ </a></li> <li><a href="shinryo.html"> 診療のご案内 </a></li> <li><a href="yosu.html"> 院内の様子 </a></li> <li><a href="access.html"> アクセス </a></li> <li><a href="link.html"> リンク </a></li> </ul> 4-3. 上書き保存して みてみましょう

16 5. メタタグの編集 今回は メタタグといって ヤフーやグーグルなどのロボットが検索する際に参照される項目のひとつです 検索に強くなるためにも ここはしっかりと抑えておきましょう 5-1. メタタグの確認メモ帳で開き 上部のほうに以下の文言があることを確認してください <title> 歯科医院 - で唯一の歯医者さん </title> <meta name="description" content=" " /> <meta name="keywords" content="***********************" />> この赤字を編集していきます 5-2.<meta name="description" content= の編集これはページの説明文です 検索に引っかかりそうなキーワードを織り交ぜた文章にしてください 今回の講座では以下のように書いていきます <meta name="description" content=" 市の歯医者さんとして 日曜以外月 ~ 土までやっております 親切で分かりやすいスタッフと最新の設備でお待ちしております " /> 5-3.<meta name="keywords" content= の編集これはコンマ (,) でキーワードを区切っていれます 10 個程度はいいでしょう 今回は <meta name="keywords" content=" 市歯医者, 土曜診療, 駅歯科医院 " /> とします

17 6. 項目にあわせて ページを量産 ここでは実際に作るホームページのページ分を量産していきます これらのページはあとでそれぞれ編集していきます 6-1. エクセルを開くエクセルの表にあらかじめ決めておいたファイル名の一覧があります まずはそのエクセルの表を開きます 6-2. 名前をつけて保存次に index.html をメモ帳で開き エクセルの表を参考に 名前をつけて保存 で それぞれファイル名をつけていきます ファイルの種類は すべてのファイル にしてください

18

19 4 日目 : ページの編集 ( 文章と画像の編集と貼り付け ) 1. 文章 ( 見出しのつけ方 ) 1-1. 大きなタイトルの編集や追加 index.html でいう お知らせ にあたる部分です ここを編集するには タイトルを <h2> と </h2> で囲めばOKです 例えば index.html の <div id="whatsnew" class="contents"> <img src="image/main.jpg" alt="menu" /> <h2> お知らせ </h2> の赤字部分を <h2> 歯科医院へようこそ </h2> としてみてください index.html に反映されているはずです 1-2. 小さなタイトルの編集や追加 index.html でいう 新しいニュース にあたる部分です ここを編集するには タイトルを <h3> と </h3> で囲めばOKです 例えば index.html の <h3> 新しいニュース </h3> <p> 2011/1/3 </p> <p> 2010/12/28 </p> の赤字部分を <h3> 最近のできごと </h3> としてみてください index.html に反映されているはずです

20 2. 文章 ( 本文のつけ方 ) 2-1.<p> </p> で囲む本文は <p> 文章 </p> で囲むとできます 強調させたいときは <strong> </strong> で囲みます 例 <p> たちつてと </p> <p><strong> さしすせそ </strong></p> 2-2. 段落を置くとき <br /> を用います <p> あいうえお <br /> さしすせそ </p> 2-3. 中央に配置するときいろいろやり方があり 本当は css ファイル ( 見栄えをよくするための設定ファイル ) でやることが推奨されていますが 今回は html で行う方法を紹介します <p align="center"> </p> を使います <p align="center"> なにぬねの </p>

21 2-4. まとめ <p> たちつてと </p> <p><strong> さしすせそ </strong></p> <p> あいうえお <br /> さしすせそ </p> <p align="center"> なにぬねの </p> と書くと 以下のようになります

22 3. イメージ画像の貼り付け 3-1. イメージ画像の貼り付け 1 横幅を 570 ピクセル以下にした画像を用意してください 2 次に image と書かれているフォルダに保存します 3index.html をメモ帳 (Notepad) で開き <img src="image/( ファイル名 )" alt="( イメージファイルの説明 )" /> と記述して notepad で開いたページの任意の場所に置くと 貼り付けることができます 3-2. トップページのイメージ例 <div id="contents"> <div id="main"> <div id="whatsnew" class="contents"> <img src="image/main.jpg" alt=" 歯科医院の外観 " /> <h2> お知らせ </h2> 赤字の部分の main.jpg を保存したトップ画像のファイル名にします ( あるいはトップ画像を image フォルダに保存するときに main.jpg と名前を変更してもいいです ) そして alt="menu" の Menu を画像の説明文をいれてください 病院でしたら 歯科医院の外観 など これで トップイメージの完成です 3-3. 画像を右寄せ 中央寄せに変更する おそらく 何もしないと 左寄せになってしまいます 画像を中央寄せにするには <p align="center"> </p> を使います 例 ) <p align="center"><img src="image/main.jpg" alt=" 歯科医院の外観 " /></p> center の部分を right にすると 右寄せになります

23 画像ぼけていてすみません

24 5 日目 : リンクと表の貼り方 ホームページにおいて リンクは非常に重要です 表は少しややこしいので 作りながら コツを覚えていきましょう 1. リンクの貼り方 1-1. ウィンドウを変えずにリンクする これは エクスプローラー内の画面が切り替わるリンクの張り方です <a href=" アドレス )"/>( ページの名前 )</a> とします 例として ヤフーのページをリンクする場合について書いてみます <a href=" ヤフーのページ </a> 1-2. 新しいウィンドウで表示する 新しいウィンドウで表示させる場合は taget="_blank" を追加します <a href=" target="_blank"> ヤフーのページ </A> これらは 文章中にもいれることができます 例えば index.html をメモ帳で開いてみましょう 1-3. 文章中にリンクを入れる場合 <p> 現在 <a href= ヤフー </a> からも検索ができます </p> を追加してみてください 文章中にもいれることができます

25 1-4. 画像でリンクする場合バナー広告や画像ボタンなどで画像をリンクする場合は 文章の部分を画像に置き換えるだけでできます 例 ) <a href=" src="image/main.jpg" alt=" 歯科医院の外観 " /> ヤフーのページ </a> 2. 表の貼り方 2-1. とりあえず貼り付けてみる 以下のようなタグを貼り付けてみましょう <table> <tr><th> </th><th> 月 </th><th> 火 </th><th> 水 </th></tr> <tr><th> 午前 </th><td> </td><td> </td><td> </td></tr> <tr><th> 午後 </th><td> </td><td> </td><td> </td></tr> </table> すると 黄色と白の背景でできた表が現れてきます では この表について説明していきます

26 2-2. まず <table> と </table> で囲みます <table> <tr><th> </th><th> 月 </th><th> 火 </th><th> 水 </th></tr> <tr><th> 午前 </th><td> </td><td> </td><td> </td></tr> <tr><th> 午後 </th><td> </td><td> </td><td> </td></tr> </table> 2-3. 次に行を <tr></tr> で作ります <table> <tr><th> </th><th> 月 </th><th> 火 </th><th> 水 </th></tr> <tr><th> 午前 </th><td> </td><td> </td><td> </td></tr> <tr><th> 午後 </th><td> </td><td> </td><td> </td></tr> </table> 2-4. 項目の名称のところには <th></th> で囲みます 例えば 曜日 時間等背景が黄色のところにしたいところを <th></th> で囲めば大丈夫です <table> <tr><th> </th><th> 月 </th><th> 火 </th><th> 水 </th></tr> <tr><th> 午前 </th><td> </td><td> </td><td> </td></tr> <tr><th> 午後 </th><td> </td><td> </td><td> </td></tr> </table> 2-5. 項目ごとの内容は <td></td> で囲みます <table> <tr><th> </th><th> 月 </th><th> 火 </th><th> 水 </th></tr> <tr><th> 午前 </th><td> </td><td> </td><td> </td></tr> <tr><th> 午後 </th><td> </td><td> </td><td> </td></tr> </table> こうすることで 表を簡単に作ることができます

27 6 日目 : ひたすら作る さてここまでで 6 日目ですが ここまできたら 一通り作ることができるはずです ひたすら作ります 1. メニューの項目の順に作っていきましょう 7 日目 : インターネット上にアップする アップ方法については 最新版に記述予定です 出来次第 ホームページ上で発表いたします ( これは暫定版です ) 今回 以上で終わりです 今後は 最新版や css の編集をする応用編なども予定しております