| バージョン1.01
なるべく分かりやすいように説明していますが、ホームページビルダーの詳しい使い方は「できるホームページビルダー８」など
市販の本を参考にしてください。
テンプレートに関するマニュアルはこれからも皆さまの声を参考にアップデートしていく予定です。
目次
■準備編
ホームページテンプレートを使うための準備
※ 各テンプレートは圧縮した形で収録しています。（下に詳しく書いてあります）
解凍ソフトをお持ちで無い方は、まず始めに解凍ソフトをダウンロードする必要があります。
→VECTORで解凍ソフト「Lhaca」をダウンロード
■ホームページテンプレート編集 基本編
サイトの構成を作る
タイトルを編集する
文字の入力と削除
リンクの文字を変える
使わないリンクを削除する
文字色を変更する
画像の削除と挿入
仕上がり具合をブラウザでチェックする
終了したいとき
続きを編集したいとき
■カスタマイズ応用編
セルの背景色変更
バナースペースの削除
項目の削除
項目の増やし方
新しいページの増やし方
リンクの張り方
メニューの増やし方
リンクの色の変え方（ＣＳＳの変更）
■ホームページテンプレートを使うための準備をします。
１．お買い上げいただいたテンプレートデータをご自分のパソコンにコピーしましょう。
コピーする場所は「マイドキュメント」などご自分が使いやすいところにしましょう。
もしもの場合を考えて元データのコピーをとっておきましょう。
２．各テンプレートのファイルは圧縮されています。
解凍ソフトをお持ちで無い方は解凍ソフトをダウンロードしてください。無料です。→VECTORで解凍ソフト「Lhaca」をダウンロード
ダウンロードが完了したら上のアイコンをダブルクリックしてインストールをします。
「ＯＫ」をクリックするとインストールされて、メモ帳が開きます。
ソフトの利用に関することが書いてあるので目を通しましょう。後は閉じてかまいません。
これが解凍ソフトのアイコンです。
３．使いたいテンプレートの圧縮ファイルを解凍しましょう。
解凍したいテンプレートのファイルをドラッグして、
このアイコンの上に持ってくると自動的に圧縮されたファイルが解凍されます。
フォルダが解凍されました。
フォルダの中には、「ｈｔｍｌファイル」と「images」「style」のフォルダがあります。
※テンプレートの種類によっては「__HPB_Recycled」のフォルダもあります。
「ｈｔｍｌファイル」はそれぞれのホームページテンプレートです。このファイルをホームページビルダーで開いて文字を入力したりします。
「images」はホームページテンプレートに使われている画像のファイルが入っているフォルダです。
「style」はスタイルシート（ＣＳＳ）が入っているフォルダです。リンクの色、サイズ、文字の行間を制御しています。
「__HPB_Recycled」はホームページビルダーに付属の画像ソフト『ウェブアートデザイナー』の元データが入っています。
『ウェブアートデザイナー』を使って自分だけのオリジナルホームページを作りましょう。
※「images」にも「__HPB_Recycled」がありますのでご自由にお使いください。
■ サイトの構成をつくります
１．まずは準備編を参考に編集したいホームページのデザインのフォルダを用意しましょう。
このマニュアルでは「ｓｔｙｌｉｓｈ ｓｑｕａｒｅ」を例に説明していきます。
２．ホームページビルダーを起動しましょう。
３．編集スタイルを選択する画面が出ることがあります。
ここでは「スタンダード」で説明します。
「ＯＫ」をクリックします。
４．スタートをクリックします。
上のような青いバーの「スタート」「ページ設定」などがでていない人はメニューの「表示」→「かんたんナビ」をクリックするとでます。
５．サイトを作成するを選びます。
６．サイト名をつけましょう
ホームページの名前をつけます。作ろうとしているホームページのタイトルを使うと分かりやすくなります。
ここでは「プチプレート」にします。
入力したら「次へ」をクリック
７．あなたのホームページのトップページになるファイルを選びます。
ここではテンプレートを利用したホームページ作成なので
「既存のページをトップページとして使用」を選びます
８．「参照」を押してホームページテンプレートをコピーした場所（マイドキュメントにコピーしたらマイドキュメント）にあるフォルダから
「stylish_squre」を選んで、さらにその中の「index.html」を選び「開く」をクリックします。
９．下にある「詳細設定」をクリックします。
↓
画像ファイルの右の「参照（２）」をクリックします。
↓
stylish_squareのフォルダの中の「images」のフォルダをダブルクリックして選んで「ＯＫ」をクリックします。
同じようにスタイルシートの右「参照（６）」をクリックして、同じstylish_squareの中の「style」のフォルダをダブルクリックして「ＯＫ」。
※この詳細設定をしておくと、作ったものを保存するときに画像は画像のフォルダ「images」、スタイルシートは「style」のフォルダに
保存されます。
「ＯＫ」をクリックして「次へ」をクリックします。
１０．転送設定はサーバーにホームページを送る時の設定です。
それぞれの利用するサービスによって違うのでここでは説明できません。
分からない人は後で設定しても大丈夫です。
転送先が決まっている人は「今から転送設定をする」を選んで設定してもいいですし、後から設定してもいいです。
転送先がまだ決まって無い人、よく分からない場合は転送時に設定するを選びます。
１１．「完了」をクリック
１２．サイトの構成ができました。
※この1〜１２の作業は次に同じホームページを編集するときはやる必要がありません。
次に「index.html」を開いて、プチプレートのカスタマイズをします。
【トップページを編集してみましょう。】
■ロゴを変えてみましょう(タイトルの編集）
１．ロゴを編集するにはまずロゴをクリックします
２．ロゴの編集 をクリック
（またはロゴの上で右クリック→ロゴの編集）
３．ホームページタイトルを入れます
ここでは「puti pure」とします。
「完了」をクリック
トップページのロゴが変更されました。
■文字の削除と入力をしてみましょう。
１．ロゴのしたのサブタイトルを変えてみましょう。
「サブタイトルをコチラへ記入することが可能です」と書いてある
ところをクリックします。
２．文字入力カーソルが入るので、元の文字を消します。
もしくは消したい文字をドラッグして選択して「Ｄｅｌｅｔｅ」キーで削除します。
入れたい文字を直接入力。ここでは「テンプレート販売サイトです」と入力しました。
３．その他の文字も同じように編集して文章を変更することができます。
※文字を編集して自分のホームページに必要な情報・文章に変更していきます。
※テンプレートによって文字のように見えても「画像」の場合があります。
文字の画像の場合、直接入力して編集することができません。
画像の文字の場合はホームページのタイトルを編集した時のように、「ロゴの編集」を利用して変更することができます。
■リンクの文字を変える
１．下のリンクの文字を変更してみましょう。やり方は普通の文字の変え方と同じです。
「さらに詳しく知りたい方はこちらをクリック。」 を反転させて削除します。
２．「テンプレートを見る」と入力してみましょう。
リンクの文字が変更されました。
※このように実際のページを作るときもリンク先のページに合わせた名前を付けていきます。
■いらないリンクを削除する
１．文字を消すのと同じ要領で消します。
消したいリンクをドラッグして反転させます。
２．「delete」で削除します。
■文字の色の変更
１．色を変更したい文字を選択します。
２．カラーパレットで好きな色を選んで→「適用」
※カラーパレットが画面に出ていない人はメニューの「表示」→「カラーパレット」
■画像の削除と挿入
１．いらない画像の削除をします。左側の真ん中「トピックス」の画像を消してみましょう。
２．消したい画像をクリックして選択します。
３．「delete」や「bacｋ space」で削除します。
【画像の挿入】
１．上で消した画像のところに画像を挿入してみます。
２．画像を挿入したいところをクリックしてカーソルをおきます。
３．素材集をクリックします
４．さらに「素材」をクリックして「画像」フォルダの中の
「イラスト」というフォルダをクリックします
５．好きなイラストをクリックして
６．「挿入」 をクリックします
７．画像が挿入されます。画像と文字が近すぎる場合は「改行」を入れてスペースを空けれます。
※自分で撮ったデジカメの写真などの画像を挿入したいときは「素材」ではなく「フォルダ」をクリックして、
自分が挿入したい画像を選んで挿入します。
■インターネットに公開したときどういう風に見えるかブラウザで見てみましょう
１．今作っているページを「保存」して、 をクリックします
２．するとインターネットエクスプローラーが起動して、今作っているものが、
インターネットに公開したときどういう風に見えるかが分かります。
■終了したいとき
１．「保存」した後に、ホームページビルダーを閉じます。
■続きを編集したいとき
１．「ファイル」→「開く」をクリックします。
２．編集したいファイルを選びます。（「index.htm」など）
３．ファイルが開いて、前回の編集の続きを編集できます。
■セルの背景色を変えてみましょう
１．「メイントピックス」と書いてあるバーの色を変えてみましょう。
２．「メイントピックス」と書いてるバーをクリックします。
３．バーが薄いピンクの枠で囲われたら、色を選ぶところが「セル背景色」となったのを確認しましょう。
４．好きな色を選んで「適用」をクリックします。
５．色が変わりました。
でも左側の色が変わっていません。左側の色も変えたい場合は次のようにします。
１．左側の四角をクリックして選択します。
２．しかし色を変える対象が「文字色」のままです。
これでは色を変えられません。
そこで選択した状態のまま十字キーをどれか１回押します。
３．すると「文字色」が「セル背景色」になりました。
そうしたら好きな色を選んで「適用」を押します。
４．左側の小さいところも色が変わりました
※stylish_squareはかなり背景の色を変更することができますが、他のテンプレートはこのように簡単に背景のデザインを変更することができないところがたくさんあります。簡単に変更できない理由は「画像」を使っているからで、ホームページビルダーのソフトだけでは変更することができません。
基本的にテンプレートとはデザインはそのままで、文字や画像を入力したり挿入したりして使うものなのでかならずしもテンプレートの色などを簡単に変更できるわけではありません。
ただし「画像」をご自分で編集して変更できる方は自由に変更してかまいません。
■右上のバナースペースをバックの色に変えて、バナースペースを消してみましょう
１．「※バナースペース360X60」をクリックして選択します。
２．右クリック→「タグの削除」をクリック
３．バナースペースが削除されました。
■いらない項目を削除する
【右上の「サブトピックス」を消してみましょう】
１．サブトピックスを選択します。
２．右クリック→「タグの削除」をクリックします。
サブトピックスが削除されました。
３．しかしまだ余計なセルが残っています。
サブトピックスを消したように余計なセルも削除します。
セルを選択して右クリック→「タグの削除」をクリックします。
４．余計なセルも消えてニュースの位置が正しい位置になりました。
※他の「メールマガジン」や「トピックス」の項目も同じように削除することができます。
■項目を増やす
【左側一番下の「オススメ」を右側の「ニュース」の項目の下に増やしてみましょう】
１．下の「！」から上の右側の「！」までをドラッグして選択します。
２．右クリック→「コピー」をクリック
３．右側の「ニュース」のセルの下をクリックします。
４．右クリック→「貼り付け」
「オススメ」の項目が増えました。
■新しいページの増やし方
１．増やしたいページを開きます。
ここでは「stylish_squre」のファイル「product.htm」を開きます
２．「htmlソース」のタブをクリックします。
３．どこでもいいのでクリックしてカーソルをおきます。
４．「ctrl」+「Ａ」を同時に押して全体を選択します。
５．「ctrl」+「Ｃ」を押して「コピー」します。
６．「HTMLの新規作成」 をクリックします
７．「HTMLソース」のタブをクリックします。
８．今書いてある文字を全部選択して、選択した黒く反転しているところの上で
「右クリック」「貼り付け」
９．「ページ編集」のタブをクリックしましょう。
１０．「product.htm」と同じページがコピーされました。
１１．ファイル→「名前をつけて保存」をクリックして、「product2.htm」と名前をつけて保存しましょう
１２．「product.htm」のページを元に新しい「product2.htm」をコピーして作ることができました。
※コピーしたページは必要な場所からリンクを張りましょう。
■リンクの張り方
【ここでは上で増やした「product2.htm」のページにトップページからリンクを張ってみます】
１．「index.htm」を開きます。
２．真ん中の下の方「商品情報２」の「詳細はコチラ」のリンクを「product2.htm」に張ってみましょう。
※リンクを張り替える前は「product.htm」にリンクを張った状態になっています。
画面の右側（移動した方は、右側に無い可能性もありますの「属性」でどこにリンクが張られているかを確認できます。
この画面がどこにも無い人は「表示」→「属性／ドキュメント アウトライナ／ページ一覧」をクリックして出すことができます。
「商品情報２」の「詳細はコチラ」をクリックして、上の画像の「ＵＲＬ」のところをみると「products.htm」に
なっていることが分かります。
３．このＵＲＬをリンクを張りたいページに変更するとリンクを張ることができます。
「参照」をクリックして「product2.htm」のファイルを開きます。
４．一度「上書き保存」をします。
５．「プレビュー」してみましょう。
今変えた「詳細はコチラ」をクリックしてリンクがちゃんと張れているかを確認しましょう。
■メニューの項目の増やし方
１．メニューの項目をドラッグして選択します。
２．右クリック→「コピー」をクリック。
３．増やしたいメニューの位置で、右クリック→「貼り付け」
４．貼り付けたら自分の付けたいメニューの項目に文字を変更します。
５．増やしたメニューにリンクしたいページをリンクすれば完了。
■リンクの色の変え方
【リンクはスタイルシートで色を定義してあるので、スタイルシートを変更します。】
１．「表示」→「スタイルシートマネージャー」をクリックして、スタイルシートマネージャを出します。
２．「style/style.css（リンク）」をダブルクリックします。
すると「外部スタイルシート」が開きます。
３．Ａ（リンク）をダブルクリックします。
４．「カラーと背景」のタブをクリックします。
５．「前景色」を変えます。前景色はリンクの文字の色です。
「背景色」が入っているものもあります。
「背景色」はポインタをのせたときにリンクの背景の色です。
６．好きな色を選んだら「ＯＫ」をクリックします。
リンクの色が変わりました。（下の例は「青」を選んだときです。）
※「メニュー」のＣＳＳは「．ｍｅｎｕ A」
「一番下のメニュー」は「sub_menu A」
「．ｌｉｎｋ A」は「その他のリンクでさらに色が違うリンク」のＣＳＳです。
※それぞれに「ＨＯＶＥＲ」と付いているのがマウスポインタをのせたときにリンクの色が変わるときの定義をしてあるＣＳＳです。
|
