1

2017 年７月 1７日作成

ホームページビルダー21SP 簡単レスポンシブサイト制作法

暫定版

（C）2017 ver.01 N Kando

2

目 次

1.Web サイト制作基本編 01

２．写真アルバム（アイテムギャラリー）の作り方

3. トップページメニューの編集の方法

4. トップページ編集基本編 01

5. トップページのメインビジュアルをスライドショーにする方法

6.レスポンシブサイト（PC とスマホ表示対応）制作について

7.サイト転送設定・転送方法

3

1. Web サイト制作基本編 01

①Windows10 の左端下のスタートボタンをクリックします。

②パソコンソフト一覧にマウスをあて、マウスにより下に下げ、ホームページビルダー21SP をクリ

ックしソフトを起動させる。

③ホームページビルダーSP が起動する。

4

④ホームページビルダーSP のはじめの説明のダイアログボックスの右上端の×をクリックし、画面

を消すと上記の表示になる。

⑤画面左上の端の方の“新規作成“クリックすると”サイトの新規作成（テンプレート選択）”ダイアロ

グボックスが開く。テンプレートをベーシックの左上のものを選択し、右下の方の”次へ”をクリック

する。

5

⑥サイト名を入力します。業種をとりあえず不動産、規定にし、Web サイトに表示されるタイトル

と、キャッチフレーズを入力します。完了をクリックします。

⑦サイト新規作成（完了）ダイアログボックスが表示し、閉じるをクリックします。

⑧テンプレートの機能によりサイトの基本形が出来ました。

6

⑨編集中のサイトの右側を一番上のトップページを選び、右側の編集画面の文字のトップページの下

の部分をマウスをあわせると、グレー色になる。

⑩その部分をマウスで選択すると上に黒い編集操作のリストが出て、編集可能になる。

⑪文字の不要な部分を削除し、文字を入力しなおす。

7

⑫左側の編集画面の【news】ニュースの一番下の文字をクリックし選択する。グレーで枠がおおわ

れ、投稿一覧の文字が枠の左上端に表示される。

⑬その上で、左側の編集画面の同じ投稿の部分を右クリックし、一覧よりページの編集を選択する。

⑭投稿記事の変更ダイアログボックスが開く。

8

⑮タイトルを“ホームページを公開しました！”とし、公開日時の右側の▼をクリックし、たとえば、

2017 年 6 月 17 日にし OK をクリックする。

⑯編集の変更が反映された。

⑰枠の中の編集する文字にマウスをあわせる。

9

⑱その部分を選択し黒い編集画面を出し、文字を編集し入力する。

⑲続いてニュースの投稿を同じ方法で上の方のも編集をしていく。

⑳そして枠の中の文字も同じ方法で編集し修正する。

２．写真アルバム（アイテムギャラリー）の作り方

①ニュースの記事が編集出来た。左側編集画面下の方の“ページの追加“クリックする。

10

②一覧から”新規追加”クリックする。

③“ページの新規作成”ダイアログボックスが開く。タイトルを“ギャラリー“ファイル名を gallery.html

にして OK を押す。

11

④左側の画面のメニューにギャラリーのページが追加された。

⑤左側編集画面端の下の方の“パーツ一覧“をクリックする。マウスを左側上端のはしっこにマウスを

合わせて緑色の線が出る。

⑥マウスを下げていき、“アイテムギャラリー”に緑のラインが引かれる。そこをクリックする。

12

⑦とりあえずいちばん上に表示されたアイテムギャラリーをクリック&ドラッグし、この写真の様に

ギャラリーの文字の下のあたりに位置にマウスを移動し、“ここにパーツをドラッグ“と表示された部

分に移動をし、マウスをはなす。

⑧アイテムギャラリーの部品がホームページ SP に貼りついた。アイテムギャラリーをクリックす

る。

⑨右上端の 4 つのボタンの一番左の歯車の“パーツのプロパティ“をクリックする。

13

⑩パーツのプロパティダイアログボックスが開いた。

⑪アイテムギャラリーの上右端の“管理“をクリックし、”アイテムデータの管理”ダイアログボックス

が開いた。

14

⑫写真図の真中のあたりの“アイテムリスト”の一覧の中の“追加”をクリックする。

⑬“アイテムリストの追加”ダイアログボックスの“アイテムリスト名”に、たとえば“アルバム”と入力

する。OK をクリックする。

⑭左下の方の“アイテムデータ”のボタンをクリックし、“追加”をクリックし、

15

⑮アイテムデータの追加ダイアログボックスが開き、“画像”文字の右側の参照ボタンをクリックし、

“画像ファイルの選択”ボタンをクリックし、左側の画面などから写真画像の保存してあるフォルダを

選択し写真を表示して、一つ写真を選択する。“開く”をクリックする。

⑯アイテムデータの追加ダイアログボックスの画像に写真が選択された。アイテム名とアイテム説明

を入力する。OK をクリックする。

⑰アイテムデータの追加ダイアログボックスに写真データが追加された。

16

⑱同じようにして、写真画像を追加する。閉じるボタンをクリックする。

⑲アイテムギャラリーのパーツのプロパティのアイテムデータのアイテムリストにアルバムと入力さ

れた。パーツのプロパティの右上端に×をクリックする。

⑳上左端の方の保存ボタンをクリックする。編集途中で時々この保存ボタンをクリックした方がよ

い。そこまで編集した部分は保存されるため。

17

㉑右上端のプレビューをクリックする。

㉒ギャラリーの写真の一番上左端をクリックすると、写真が拡大した。写真画像の枠の右上端の×を

クリックする。

３．トップページメニューの編集の方法

①左の編集画面のページ一覧をクリックする。

18

②左側の編集画面のメニューの部分の会社概要をクリックする。

③メニューの会社概要を選択し、Delete マークの部分をクリックして削除する。

④削除確認のダイアログボックスが開いたら“はい”をクリックする。

19

⑤物件一覧も Delete マークをクリックして削除する。

⑥右編集画面のメニューで、いらない会社概要と物件一覧が削除された。

⑦右側の編集画面のメニュー欄を選択し、右端上の方の黒いの 4 つのボタンの中の一番左の

20

パーツのプロパティの歯車マークをクリックする。

⑧パーツのプロパティダイアログボックスが開く。

⑨メニューの中のギャラリーを選択し、上の方のタブのうち“上へ“をクリックし、順番を変える。他

のも同じようにして最適なメニュー順に変更する。

⑩メニュー順が変更された。画面左の端の方の上の保存をクリックする。

4. トップページ編集基本編 01

◎メインビジュアル写真の変更方法

21

①トップページメイン画像をマウスでクリックし選択する。画像の左上端の方に、4 つのボタンが表

示される。左から 2 番目の画像の編集のボタンをクリックする。

②外部エディターで画像を編集ダイアログボックスが開く。イメージデザイナーを選択し、エディタ

ーを起動をクリックする。

22

③イメージデザイナーが起動した。画像をクリックし、Delete キーを押す。

④画像が削除された。左上端の方［絵や写真］をクリックする。

⑤その下の“素材を貼ります。”の文字の下の左端のボタンの［画像ファイルを追加］ボタンをクリッ

クする。

23

⑥“ファイルを開く”ダイアログボックスが開く。目的の画像を探し選択する。開くをクリックする。

⑦選択した画像のサムネールが左側の欄に表示された。白い長四角の枠の右上端の［設定画面を非表

示］をクリックする。

⑧設定画面が非表示になった。画面下真ん中の［倍率を下げる］をクリックし、上記のようなちょう

どよい間隔にする。

24

⑨画面の左の欄の右矢印の［素材を貼る］をクリックする。

⑩選択した画像が貼りついた。画像を編集する為に上の真ん中の方の［枠の調整］をクリックする。

25

⑪右に出たダイアログボックスの真ん中の方の［左端］をクリックする。画像の右側のボーダー部分

の上下の間の中間の四角い小さな黒い枠にマウスを合わせて左右の線のマークが出たら右側にドラッ

クして画像を右側に伸ばす。

⑫画像が拡大される。画像をクリック、選択し、左端上の［ファイル］クリック、一覧から［上書き

保存］をクリックする。

⑬もう一度［ファイル］クリックし、一覧から［イメージデザイナーの終了］クリックする。

⑭ホームページビルダーの画面に戻った。選択した画像に変更された。画面上の左の方［保存］ボタ

ンをクリックし保存する。

◎メインサイト名画像の名前の変更の方法（トップページのメインビジュアル画像は別のに変更。）

26

⑮サイト名の HOMEPAGE BUILDER の画像をクリック選択する。

⑯左側に出た 3 つのうちの真ん中のボタンの“ロゴ画像の編集”をクリックし選択する。

27

⑰開いた外部エディタで画像を編集ダイアログボックスで、イメージデザイナー選択エディタ起動ク

リックする。

⑱もし何か警告のダイアログボックスが開いたら OK を押す。イメージデザイナーが起動した。

28

⑲画面上の文字やスタンプをクリックする。画像の“ホームページビルダー”の文字をクリックし選択

する。

⑳ページの名前を“マイマキコホームページ”に変更し、その下の“HOMEPAGE BUILDER”の文字

を選択する。

29

㉑その文字を右側の編集画面で“MY MAKIKO HOMEPAGE”に変更し、左上端の“ファイル”クリ

ックし、上書き保存をクリックする。

㉒左上端の“ファイル”クリックし、“イメージデザイナーの終了”クリックする。トップページのサイ

ト名の画像が修正された。画面上の左の方の“保存”ボタンをクリックする。

30

5.トップページのメインビジュアルをスライドショーにする方法

①左端の“パーツ一覧”をクリックする。上左端の方の黒い丸をクリックし、一覧から“フォトモーショ

ン”を選択する。その上に上記画面より左側のスライドショーをクリック選択し、ドラッグし、トッ

プページのメインビジュアルの画像にしたの辺に動かし、“ここにパーツをドラッグ”と表示されたと

ころまで、マウスを移動して離す。

②スライドショー導入の画像が挿入された。画像をクリックし、3 つのボタン表示の左端のパーツの

プロパティをクリックする。

31

③パーツのプロパティダイアログボックスが開いた。

④下の方の“画像ファイルの選択”をクリックする。

32

⑤“画像ファイルの選択”ダイアログボックスが開いたら左下の方の“参照”をクリックする。

⑥“画像を選ぶ“ダイアログボックスでスライドショーに入れる画像のファイルの入ったフォルダに移

動し、Ctrl キーを押しながら必要な複数の写真を選択する。そして、”選ぶ“をクリックする。（この

時に使う画像は、サイズなど前もって画像編集ソフトなどで編集をしておく）

33

⑦OK を押す。

⑧画像が選択された。下の方の“カスタマイズ”をクリックする。

⑨左側の真ん中あたりのピンク色の詳細をクリックする。

34

⑩“スライドショーの間隔”5000 ミリ秒に選択し、“OK”クリックする。

⑪カスタマイズ（スライドショー）ダイアログボックスでも OK をクリックする。

⑫トップページにフォトモーションスライドショーが導入された。スライドショーの上にある写真画

像をクリック選択する。3 つのボタンが表示されるがその一番右の削除マークをクリックする。

35

⑬いらない画像が削除され、トップページのメインビジュアルにスライドショーが入った。画面上左

の方の保存ボタンをクリックする。

6.レスポンシブサイト（PC とスマホ表示対応）制作について

①レスポンシブサイト制作については、はじめからその機能がついているので、画面上真ん中のボタ

ンのレスポンシブの表示のボタンをクリックする。

②画面右上端の方の“プレビュー”クリックする。

③スマホの場合の表示がされる。

36

④画面上の真ん中のパソコン用ボタンをクリックする。画面上左端の方の“保存”ボタンをクリックす

る。

7.サイト転送設定・転送方法

①メニューの“サイト”クリック、“転送設定の一覧/設定”クリックする。

②“転送設定の一覧/設定”ダイアログボックスが表示された。

37

③“設定追加”クリックする。

④公開先 設定の追加（プロバイダーの選択）ダイアログボックスが表示される。“その他のプロバ

イダーを選択する“をクリック選択し、”次へ”クリックする。

⑤開いたダイアログボックスに契約したプロバイダーのホームページのサービスの転送用のユーザー

ID やパスワードなどをサービス契約時にプリントした紙を参考に入力し、完了をクリックする。

38

⑥転送設定が完了したら、画面右上端の“サイトの公開”をクリックする。

⑦サイト公開ダイアログボックスが表示された。“公開先設定”の右の下三角ボタン▽を先ほど設定し

たものに選択し、公開をクリックする。何か警告表示が出た場合は選択する部分があればチェックを

入れ OK をクリックする。転送設定が正しくあればサイトは契約したプロバイダーのサーバーにアッ

プロードされる。

⑧ブラウザを開き、契約したプロバイダーの情報を見て、自分のホームページアドレスを入力する

と、上手くいけば公開したホームページが表示される。