• 2013年11月20日

ホームページビルダー18 使い方 徹底解説! 【フルCSS/セットアップ編】

ホームページビルダー18 使い方 徹底解説! 【フルCSS/セットアップ編】

ホームページビルダー18 使い方 徹底解説! 【フルCSS/セットアップ編】 640 430 パソコン生活サポート Pasonal

前回はホームページビルダー18の準備編をご紹介しました。

今回はフルCSSテンプレート編のセットアップとフルCSSテンプレートの編集をご紹介します。

 

サーバーにインストールする

フルCSSテンプレートを使用するには、まず、サイトを公開するサーバーにインストールしなくてはいけません。初心者の人はまずここで「つまずく」のではないでしょうか?

なるべく分かりやすく解説していきます。

 

レンタルサーバーの情報を準備する

アカウント情報メール

 

X SERVERのアカウント設定情報メールです。サーバーをレンタルすると左記のような設定情報が記載されたメールが届きます。まずは、設定情報のメールがあるかどうか確認してください。

前回解説した選択したサーバーの情報が必要となります。サーバーとは「さくらインターネット」「X SERVER(エックスサーバー)」「ロリポップサーバー」「ホームページビルダーを提供しているジャストシステム社のサーバー」などのことです。

メール等で設定情報を受け取っているはずです。

まずは、その情報を手元に用意してください。

 

FTPマニュアルの確認

下記が各サーバー会社のFTP設定マニュアルのページです。

レンタルしたサーバー会社をクリックして、FTP設定のページを参照してください。

※各社だいたい同じ内容ですが、「初期フォルダ」など設定が異なる場所があるので、マニュアルをよく確認して入力してください。

 

 

FTP設定項目を入力する

実際にホームページビルダー18(以下 hpb18)で上記のアカウント情報を設定していきます。

 

【1】hpb18を起動

hpb18 フルCSS 手順1

 

今回はフルCSSテンプレートで作成するので、【かんたんホームページ・デビュー】を選びます。
hpb18を起動すれば左記の画面が自動的に起動します。
万が一、起動しない場合は、画面上の「新規作成」 > 「かんたんホームページ・デビュー」を選択してください。

 

【2】【他のプロバイダー】を選択

hpb18 フルCSS 手順2

 

今回は他社のレンタルサーバーを利用するため、「他のプロバイダーを利用する」を選択します。ジャストシステム社のレンタルサーバーで契約する場合は、「ホームページビルダーサービスに申し込み」を選択してください。※ホームページビルダーサービスは料金が高いため、お勧めできません。

 

【3】FTPサーバー名、FTPアカウント名、FTPパスワードを入力

hpb18 FTP設定成功

 

FTP設定を行いますが、慎重に入力してください。また、何を入力してよいか分からない場合は、素直に【各サーバー会社のFTP設定マニュアルのページ】を参照してください。

入力が全て正しければ【転送先フォルダの設定】画面が下記のように表示れます。

  • ※【転送先フォルダの設定】画面が表示されない場合、もう一度、正しく入力し直してください。
  • ※転送先フォルダは【各サーバー会社のFTP設定マニュアルのページ】を参照してください。
  • ※転送設定名は何でもOKです。(分かりすく、サイト名にしておけばOK)
  • ※サイトのURLは、例【 http://pasonal.com/ 】のように入力してください。
  • ※上記の設定でわからなければ、もう一度【各サーバー会社のFTP設定マニュアルのページ】を見返してください。

 

【4】作成したいフルCSSテンプレートを選択

hpb18 フルCSSを選ぶ

 

画面左端にあるジャンルから選択します。通常版でも豊富な種類が揃っています。もちろん無料です。他のレイアウトを使用したい場合は、有料にて購入する必要があります。左側メニューの下にあるピンク色の箇所をクリックすれば、有料ページを閲覧することができます。作りたいホームページのイメージに合ったものを選びましょう!

 

【5】サイトの詳細情報を入力して、【公開する】ボタンを押す

hpb18 サイト情報入力

 

サイトの詳細情報を入力します。このページは任意なのでそのままでもOKです。
後ほど、修正することができます。
サイトの保存場所は任意で変更できますが、そのままのほうが良いでしょう。

 

【6】サーバーへFTPアップロードの開始

hpb18 FTPアップロード

 

上記で【公開する】ボタンを押すと自動的にサーバーへ必要ファイルがアップロードされます。何もせず、そのまま完了するまで待ちましょう。

 

【7】サーバーへのアップロードが完了

hpb18 FTPアップロード完了

 

サーバーへのアップロードが正常に完了すると左記のような画面が表示されます。
これでフルCSSテンプレートのFTPアップロードが完成しました。次はいよいよ、サイトの構築に入ります。

 

 

ホームページの組み立て方

フルCSSテンプレートのサーバーへの設置が完了しました。

ここからいよいよ、ホームページ(以下、HP)の作成へ移りますが、いきなり作成しようとしてもまず何から始めていいのか迷います。

おそらくある程度の方向性は決まっていると思いますが・・・。例えば、「お店のHPを作りたい」「クラブチームのHPを作りたい」などです。

まずは、HPのイメージを固める必要があります。

大ざっぱですが、以下のようにサイトの構築をしていきます。

  1. 最初にヘッダー(グローバルメニュー)を作成
  2. コンテンツ(中身)を作成
  3. レイアウトを整える
  4. サイトの反映をチェック
  5. 以上2~4の繰り返し

 

最初にグローバルメニューを考える

hpb18 グローバルメニュー

 

まずは、グローバルメニューから考えていきます。グローバルメニューとはサイトの上部にある項目のことです。

 

【1】「何の情報」を提供したいのかを考える

上記のInfo-Pressのサイトでは主に「映画好きな人に映画の情報を提供する」「時事関連のニュースを感想を交えて提供する」など、主に筆者が気になっている情報をサイトで提供しています。または、お店のサイトを作ろうと考えている人ならば、「お店で扱っている商品の紹介」「お店の情報(電話番号・アクセス)」「お問い合わせ」などが考えられます。

作りたいサイトは人それぞれなので一概にはいえませんが、まずは、情報をある程度整理しておくことです。サイトの規模にもよりますが、グローバルメニューの項目はだいたい5~7項目ぐらいがいいでしょう。

 

【2】他のホームページを参考にする

グローバルメニューの項目が思い浮かばなければ、他のホームページを参考にしてもいいでしょう。「お店なら他のお店のホームページ」を、「グラブチームなら他のクラブチームのホームページ」などを参考にして、本当にこの項目が必要なのか?を考えながら決めていきましょう。グローバルメニューの項目が決まりましたか?

次回のPart.3でグローバルメニューを作成していきたいと思います。

今日は取り急ぎここまで。

 

ホームページビルダー18の関連記事

ぱそなる の最新の更新を
プッシュ通知で購読しよう

よかったらシェアしてください
5 コメント
  • 津谷 裕子 2014年12月14日 at 1:57 PM

    PDFやパワポファイルへのリンクの張り方を教えてください。

    • Pasonal 2014年12月14日 at 3:17 PM

      以下の手順を参考にしてみてください。

      1.hpb18を起動
      2.PDFファイル等を挿入したい場所を選択
      3.任意の文字列を入れる「例 PDFはこちら」
      5.リンクを選択し、右クリック > リンクの挿入
      6.「URLへ」のタブを選択
      7.URLの欄にPDFまでのパスを記述する「例 http://サーバー名/ファイル名/xxxx.pdf」
      (※パスが分からない場合は、再度ご連絡ください)
      8・PDFファイルを上記のパスの場所にアップロードする
      (※hpb18のファイル転送ツールでも、FFFTPでもどちらでもOK)
      (※アップロードする場所はindex.htmlと同じ場所でOK)
      9.最後に、リンクを付けたページをインターネットで開き、動作確認してください。

  • 山谷の和 2016年2月6日 at 11:01 AM

    hpb18で図形を挿入した際、自由に動かせる場合と、動かせない場合が出てきます。
    どのように設定するのでしょうか?
    ワードの図形のように文字の折り返しから行内ではなくすような作業が必要なのでしょうか?

    • Pasonal 2016年2月6日 at 3:01 PM

      コメントありがとうございます。

      図形=画像として話をしますが、コンテンツ内(記事内)の画像は基本、CSSによって制御されています。
      hpbのデザイン画面では直感的にページを構築できるのが特徴ですが、時として、不便な場合があります。

      ・思ったような位置に画像が配置できない。
      ・おかしな場所で改行されてしまう。
      ・hpbの画面と、インターネットにアップロードした画面がズレている。

      などのケースです。
      画像を思うような場所に配置するには、HTMLやCSSコード内から適切に記述する必要があります。

      例えば・・・
      ・ある画像に対して「margin」や「padding」を設定する。
      ・画像の横に文字列を折り返したような形にするには、「float left / right」を設定する。
      ・段落をdivで囲み、画像と文字列を整える。

      などがあります。

      以上、ご参考までに。

      • 山谷の和 2016年2月6日 at 10:12 PM

        早速のご回答に感謝申し上げます。

        なるほど。

        HTMLの知識なども必要なんですね。

        ワードのような感覚で作れると良いのですが。

        残念です。

返信を残す

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)