ホームページテンプレートの編集方法について
ここからは、実際にホームページテンプレートをHP編集ソフト(今回使用するのはホームページビルダーver.13)で開いて編集作業を進める方法をご紹介致します。
最初にやる設定（※ホームページビルダーの場合です）
まず最初にホームページビルダーの設定をします。
これをしていないと、テンプレートを開いた瞬間にタグが書き換えられて知らず知らずにレイアウトが崩れている…という事になりかねません。
ビルダーの設定を完了したら、解凍したフォルダを開いてみましょう
１つ前のページで解凍したフォルダをダブルクリック(又はシングルクリック)で開きます。以下のようにウィンドウが出てきたら中身を見てみましょう。（※下の画面はご利用のパソコンによって表示が異なります）
simple18_redテンプレートの場合、htmlファイルが３枚と、style.css(スタイルシート)ファイルと画像が梱包されているimagesフォルダとbaseフォルダがセットで入っています。ReadMeファイルについてはホームページ用のファイルではなく、テンプレート使用上の注意事項などの説明書なので一通り目を通しておいて下さい。
トップページをビルダーで開いてみよう！
- 全テンプレート共通ですが、トップページは「index.html」になります。まずはこれをビルダーで開いてみましょう。
simple18テンプレートだと、ブラウザで見ていた状態とほぼ同じ、テンプレートの種類やビルダーのバージョンによってはかなり崩れて見える場合があります。これはビルダーがスタイルシート(style.css)を完全にサポートしていない為に起きるものでテンプレート本体が崩れている訳ではありません。プレビューで見てみれば正常に表示されます。
titleタグ、metaタグ、h1タグを設定しよう！
- SEO対策(検索順位で上位に出る為の様々な対策の事)の一環でもある各タグを自分用に変更しましょう。編集画面(ページ編集)を利用するよりhtmlソースを利用する方が簡単なので、ビルダー上部の「HTMLソース」タブをクリックしてソースを表示させます。
- すると、上の方に「●●●あなたのホームページ名●●●」という箇所がありますね。これがtitleタグです。SEOでも重要な箇所なで適切なワードを入力します。例えばあなたのサイトが「SAMPLE WEBSITE」だとします。通常は、「●●●あなたのホームページ名●●●」を「SAMPLE WEBSITE」にすれば完了ですが、これだと何の業者か分かりませんし、SEO対策にもなりません。あなたのサイトが「ネイルの通販サイト」なら「ネイルの通販サイト SAMPLE WEBSITE」とすればGOODです。他にも地域や低い価格など、PRしたいワードがあるのなら追加しておきましょう。
- 次にキーワードとサイト説明用のmetaタグの設定をします。現在のSEOではあまり効果はないようですが、やって損はないので設定しておきます。古いテンプレートにはこのmetaタグが入っていないものもあるので、その場合は手作業で追加しておきましょう。
サイト説明文は検索結果に出る場合があるので見た人に分かりやすく、かつ訪問したくなるような文面にしておきましょう。キーワードは、サイトに重要だと感じる単語をカンマ区切りで5〜10個ぐらい入れておけばＯＫです。 - h1タグは「h1テキスト入力場所です。titleタグの次に重要なので……」と入っている部分になります。titleタグ同様にあなたのサイト用のワードを入れましょう。今回の場合は「ネイルの通販サイト SAMPLE WEBSITE 只今キャンペーン割引中！」にします。
- 入力を終えたら次のステップへ入る前に一旦保存しておきましょう。
メニューを決めよう！
- simle18テンプレートには、「Toppage」「About」「Menu Sample」のメインメニューがあります。これらを自分用に変更します。
■ちょっと補足
メニューの呼び方には色々とありますが、当サイトではメインとして使うメニューを「メインメニュー」、次に使うメニューを「サイドメニュー」や「サブメニュー」や「ナビメニュー」などと初心者でも分かりやすいように解説しております。 - さて今回は、「トップページ」「サービス」「ショップ情報」「よくある質問」「お問い合わせ」にする事にします。
まずは「Toppage」を「トップページ」に置き換えましょう。
- 上の絵のように、「Toppage」を選択します。選択したままの状態で「トップページ」と入力しましょう。
なぜ一旦削除せずに「選択したままの状態で」と書いたかといいますと、古いタイプのビルダーをご利用の場合に、削除してしまう事によりスタイルの設定が消えてしまう場合がある為です。今回利用のビルダーのバージョン（Ver13）の場合は一旦削除してもスタイルは残りましたが、古いバージョンをお使いの場合や削除する事によってスタイルが消えてしまう場合は上記の方法をご利用下さい。 - 同じ方法で残りメニューも設定してしまいましょう。
- 続いて、あまってしまったメニュー２個を削除します。方法はいくつかありますが、一番問題の出ないhtml側での編集をしてみます。ビルダーでhtmlソースを開きましょう。
■ちょっと補足
<a href ="#">の「#」って何？と思われた方も多いかと思います。これはリンクを貼った状態にしてスタイルを反映させる為のもので、特にリンク先がない場合に入れています。ちなみに、クリックすればページの上部に移動するので「このページの上部に」などのリンクをページ下部に置いた時に使ってもいいかと思います。 - 余っている２つのメニューがありますので、削除して下さい。以下のようになればＯＫです。
リンクを設定しよう！
- リンク設定とは、クリックした時に他のページに移動する設定の事です。まずは、上で入力したメニューのページ名(htmlファイル名)を決めます。ページ名には日本語やスペースは入れないようにしましょう。
■トップページ…index.html
■サービス…service.html
■ショップ情報…shop.html
■よくある質問…faq.html
■お問い合わせ…contact.html - ページ名が決まったら、先ほどのhtmlソース画面が開いた状態で、ページ名を手作業で入れていきます。
…どうですか？上のように入れ替えられましたか？では、ここで一旦保存をします。
プレビューで見てみよう！
- ちゃんとメニューが反映されているか、プレビューで見てみましょう。
…どうですか？ばっちり反映されていれば成功です！
続いて、メインコンテンツとサイドコンテンツ編集を簡単にご紹介します。一旦保存をして次に進みましょう。
メインコンテンツって？サイドコンテンツって？
- 例えば左右に分かれているボックスで構成されている場合、大きい方を「メインコンテンツ(#main)」小さい方を「サイドコンテンツ(#side)」もしくは「サブコンテンツ(#sub)」としております。
（「左コンテンツ」「右コンテンツ」と書く場合も時々あります。）
メインコンテンツを編集してみよう！
- メインコンテンツの編集方法を簡単にご紹介します。ビルダーの「ページ編集」タブをクリックして編集していきます。
- まず、見出しを入れ替えましょう。サンプルで入っているテキストを選択(一番左の文字から左クリックした状態で一番右の文字まで移動)します。
- 選択状態を確認したら、その状態のままテキストを入力します。今回は「ごあいさつ」にしてみます。
- 同様の手順で本文も全部選択状態にします。この際、先頭の１文字だけ残しておきましょう。後で編集がしやすくなります。
- 上で選択したテキストを削除すると、先頭の１文字だけが残ってその右側でカーソルが点滅しています。そのまま入れたいテキストを詰め込んでいきましょう。
- その下の「更新情報・お知らせ」はそのまま残します。テキストは上記方法と同じ要領で変更しておきましょう。
- ちょっと書き忘れてしましたが、「ごあいさつ」ブロックのテキストの先頭に残していた■マークは後で削除してもらってＯＫです。この場合も■を１個残しておく事により、このブロックのスタイルが消去されてしまう問題を防いでいます。
パーツを追加したい場合は…？
- h2見出しとテキストのパーツを追加したい場合について解説します。間違えないよう編集する為に、ビルダーの「htmlソース」タブをクリックします。上記で入力した「ごあいさつ」ブロックと「更新情報・お知らせ」ブロックを探して下さい。
- 今回は「ごあいさつ」ブロックと同じコーナーを追加する事にします。改めて「ごあいさつ」ブロックを見ると、<h2>タグ(h2見出しタグ)と<p>(段落タグ)タグで構成されているのがわかりますね。同じパーツを手作業で入力してみましょう。後で編集をしやすくする為にサンプル文字（今回は「あ」という文字）を入力しておきます。
■ちょっと補足
html側で見た時に１〜２行ぐらいの行間があるのはなぜかと思われた方もいるかと思います。これはhtml側で編集する場合に各ブロックがわかりやすいようにあえて改行をあけているもので、実際にはあいてなくても問題ありません。 - 上記のように追加がおわったら、「ページ編集」タブをクリックしましょう。以下のように追加したパーツを確認できましたか…？追加できたら、「あ」というテキスト部分をご希望のテキストに入れ替えましょう。
「更新情報・お知らせ」のボックスの余白が気になる場合…
- さて、ここでちょっと気になったのが、上のパーツの「更新情報・お知らせ」との余白です。これはhtmlページではなく、梱包のstyle.cssファイルで調整します。cssファイルはWindowsアクセサリのメモ帳でも編集ができます。今回はメモ帳で開いてみます。開いたら、以下のブロックを探してみて下さい。中盤より少し下にあります。
- 見つけたら、height: 140px;という行を探して下さい。右側にcss用のコメントタグとして「/*ボックスの高さ*/」と入っています。説明の通り、この数値が「更新情報・お知らせ」ボックスの高さ設定箇所です。今回は半分の70pxにしてみましょう。
- 変更したら保存ボタンを押し、メモ帳も閉じます。
- 次にビルダーのプレビューでチェックしてみましょう。以下のようにボックスの高さが小さくなれば完成です。ちなみに、この後更新情報はどんどん追加していくと思います。そうすると右側にスクロールバーが出てきますが、その際に今度はボックスの高さが小さすぎると感じるかと思います。そうなった時は上記の要領で今度はボックスの高さを大きく変更してみて下さい。
ページのベースができたら、他のページとして保存していきます
- 今までリンク設定でつけたページ名がありますので、それぞれ保存していきます。トップページは今まで編集してきたindex.htmlになるので、次の「サービス（service.html）」で保存します。
- ビルダーの上部にあるメニューから「ファイル」をクリックして出てきたリストから「名前を付けて保存」をクリックします。
- 小さなウィンドウが出てきます。（以下の表示内容はご利用のパソコンによって異なります）
ダウンロードしてきたテンプレートフォルダが開いている事を確認したら、ファイル名を変更します。
- テンプレートフォルダを見てみましょう。上で保存した「service.html」が作られていれば成功です。
- さて、トップページに入っているメイン写真については、その他ページでは使わない事にするとします。今保存したservice.htmlをビルダーで開いて処理をしましょう。
- 確実に画像部分だけを削除する為、選択した状態のまま「htmlソースタブ」を選択して下さい。ビルダーのバージョンにもよりますが、古いものでなければ選択していた画像のタグに色が付いているのでわかりやすいと思います。
- では、不要なパーツを１行丸ごと削除しましょう。
- さて、ここでプレビューチェックしてみましょう。
右コンテンツが上の方にくっついてしまって見た目がよくないですね。このテンプレートの場合、トップページとその他ページとでスタイルを切り替えていますのでその他ページ用のスタイルに変更作業します。 - htmlソースタブを開きます。ページの上の方にある<body id="toppage">という行を探して下さい。このid値がトップページ専用のスタイル設定箇所なので、このid値を外します。
- 以下のようになれば完了です。念のため、プレビューチェックもし、崩れがなくなっている事を確認してみて下さい。
なお、今回の設定はsimple18テンプレート専用のものです。ほかのテンプレートにはid値がないものもありますし、あってもほかのスタイルを設定している場合がほとんどです。詳しい事については、テンプレートの使い方説明用htmlファイルやstyle.cssファイルに直接書いてある説明などを読んでみて下さい。 - 作業を続行します。
続いて「更新情報・お知らせ」ブロックを削除してみたいと思います。今度はhtml側から直接削除してみましょう。
- 不要なパーツの削除を完了したら、上のステップと 同じ手順で必要なhtmlファイルを全て作っておきましょう。後は、各htmlファイルを開いて、そのページ用の中身を入力しなおせば完成です。
最初のindex.htmlでメニューのリンク設定をしているので、後から１枚ずつ設定する必要がなくて簡単ですね！ - 尚、テンプレートによっては商品紹介や会社概要の為のサンプルページを準備しているものもあります。それらもパーツ単位でコピーして使ったり工夫して使いこなしてみて下さい。
- ホームページが完成したら、サーバーにアップロードして公開となります。この後の工程はサーバーに解説があるかと思いますのでそちらをご覧下さい。
どうしてもわからない！解決しない場合…
「Nikukyu-Punchコミュニティサイト」の質問ＢＢＳをご利用下さい。