目次 1.Web サイト制作基本編写真アルバム ( アイテムギャラリー ) の作り方 3. トップページメニューの編集の方法 4. トップページ編集基本編トップページのメインビジュアルをスライドショーにする方法 6. レスポンシブサイト (PC とスマホ表示対応 ) 制

Size: px

Start display at page:

Download "目次 1.Web サイト制作基本編写真アルバム ( アイテムギャラリー ) の作り方 3. トップページメニューの編集の方法 4. トップページ編集基本編トップページのメインビジュアルをスライドショーにする方法 6. レスポンシブサイト (PC とスマホ表示対応 ) 制"

まいえはまもり
5 years ago
Views:

2 目次 1.Web サイト制作基本編写真アルバム ( アイテムギャラリー ) の作り方 3. トップページメニューの編集の方法 4. トップページ編集基本編トップページのメインビジュアルをスライドショーにする方法 6. レスポンシブサイト (PC とスマホ表示対応 ) 制作について 7. サイト転送設定転送方法 2

3 1. Web サイト制作基本編 01 ①Windows10 の左端下のスタートボタンをクリックします ②パソコンソフト一覧にマウスをあてマウスにより下に下げホームページビルダー21SP をクリックしソフトを起動させる ③ホームページビルダーSP が起動する 3

4 ④ホームページビルダーSP のはじめの説明のダイアログボックスの右上端のをクリックし画面を消すと上記の表示になる ⑤画面左上の端の方の新規作成クリックするとサイトの新規作成テンプレート選択ダイアログボックスが開くテンプレートをベーシックの左上のものを選択し右下の方の次へをクリックする 4

5 ⑥サイト名を入力します業種をとりあえず不動産規定にし Web サイトに表示されるタイトルとキャッチフレーズを入力します完了をクリックします ⑦サイト新規作成完了ダイアログボックスが表示し閉じるをクリックします ⑧テンプレートの機能によりサイトの基本形が出来ました 5

6 ⑨編集中のサイトの右側を一番上のトップページを選び右側の編集画面の文字のトップページの下の部分をマウスをあわせるとグレー色になる ⑩その部分をマウスで選択すると上に黒い編集操作のリストが出て編集可能になる ⑪文字の不要な部分を削除し文字を入力しなおす 6

7 ⑫左側の編集画面の news ニュースの一番下の文字をクリックし選択するグレーで枠がおおわれ投稿一覧の文字が枠の左上端に表示される ⑬その上で左側の編集画面の同じ投稿の部分を右クリックし一覧よりページの編集を選択する ⑭投稿記事の変更ダイアログボックスが開く 7

8 ⑮タイトルをホームページを公開しましたとし公開日時の右側のをクリックしたとえば 2017 年 6 月 17 日にし OK をクリックする ⑯編集の変更が反映された ⑰枠の中の編集する文字にマウスをあわせる 8

9 ⑱その部分を選択し黒い編集画面を出し文字を編集し入力する ⑲続いてニュースの投稿を同じ方法で上の方のも編集をしていく ⑳そして枠の中の文字も同じ方法で編集し修正する２写真アルバムアイテムギャラリーの作り方 ①ニュースの記事が編集出来た左側編集画面下の方のページの追加クリックする 9

10 ②一覧から新規追加クリックする ③ ページの新規作成ダイアログボックスが開くタイトルをギャラリーファイル名を gallery.html にして OK を押す 10

11 4 左側の画面のメニューにギャラリーのページが追加された 5 左側編集画面端の下の方のパーツ一覧をクリックするマウスを左側上端のはしっこにマウスを合わせて緑色の線が出る 6 マウスを下げていきアイテムギャラリーに緑のラインが引かれるそこをクリックする 11

分に移動をしマウスをはなす ⑧アイテムギャラリーの部品がホームページ SP に貼りついた

12 ⑦とりあえずいちばん上に表示されたアイテムギャラリーをクリック&ドラッグしこの写真の様にギャラリーの文字の下のあたりに位置にマウスを移動しここにパーツをドラッグと表示された部分に移動をしマウスをはなす ⑧アイテムギャラリーの部品がホームページ SP に貼りついたアイテムギャラリーをクリックする ⑨右上端の 4 つのボタンの一番左の歯車のパーツのプロパティをクリックする 12

13 ⑩パーツのプロパティダイアログボックスが開いた ⑪アイテムギャラリーの上右端の管理をクリックしアイテムデータの管理ダイアログボックスが開いた 13

14 12 写真図の真中のあたりのアイテムリストの一覧の中の追加をクリックする 13 アイテムリストの追加ダイアログボックスのアイテムリスト名にたとえばアルバムと入力する OK をクリックする 14 左下の方のアイテムデータのボタンをクリックし追加をクリックし 14

15 ⑮アイテムデータの追加ダイアログボックスが開き画像文字の右側の参照ボタンをクリックし画像ファイルの選択ボタンをクリックし左側の画面などから写真画像の保存してあるフォルダを選択し写真を表示して一つ写真を選択する開くをクリックする ⑯アイテムデータの追加ダイアログボックスの画像に写真が選択されたアイテム名とアイテム説明を入力する OK をクリックする ⑰アイテムデータの追加ダイアログボックスに写真データが追加された 15

16 ⑱同じようにして写真画像を追加する閉じるボタンをクリックする ⑲アイテムギャラリーのパーツのプロパティのアイテムデータのアイテムリストにアルバムと入力されたパーツのプロパティの右上端にをクリックする ⑳上左端の方の保存ボタンをクリックする編集途中で時々この保存ボタンをクリックした方がよいそこまで編集した部分は保存されるため 16

17 ㉑右上端のプレビューをクリックする㉒ギャラリーの写真の一番上左端をクリックすると写真が拡大した写真画像の枠の右上端のをクリックする３トップページメニューの編集の方法 ①左の編集画面のページ一覧をクリックする 17

18 ②左側の編集画面のメニューの部分の会社概要をクリックする ③メニューの会社概要を選択し Delete マークの部分をクリックして削除する ④削除確認のダイアログボックスが開いたらはいをクリックする 18

19 ⑤物件一覧も Delete マークをクリックして削除する ⑥右編集画面のメニューでいらない会社概要と物件一覧が削除された ⑦右側の編集画面のメニュー欄を選択し右端上の方の黒いの 4 つのボタンの中の一番左の 19

20 パーツのプロパティの歯車マークをクリックする 8 パーツのプロパティダイアログボックスが開く 9 メニューの中のギャラリーを選択し上の方のタブのうち上へをクリックし順番を変える他のも同じようにして最適なメニュー順に変更する 10 メニュー順が変更された画面左の端の方の上の保存をクリックする 4. トップページ編集基本編 01 メインビジュアル写真の変更方法 20

21 ①トップページメイン画像をマウスでクリックし選択する画像の左上端の方に 4 つのボタンが表示される左から 2 番目の画像の編集のボタンをクリックする ②外部エディターで画像を編集ダイアログボックスが開くイメージデザイナーを選択しエディターを起動をクリックする 21

22 ③イメージデザイナーが起動した画像をクリックし Delete キーを押す ④画像が削除された左上端の方絵や写真をクリックする ⑤その下の素材を貼りますの文字の下の左端のボタンの画像ファイルを追加ボタンをクリックする 22

23 6 ファイルを開くダイアログボックスが開く目的の画像を探し選択する開くをクリックする 7 選択した画像のサムネールが左側の欄に表示された白い長四角の枠の右上端の [ 設定画面を非表示 ] をクリックする 8 設定画面が非表示になった画面下真ん中の [ 倍率を下げる ] をクリックし上記のようなちょうどよい間隔にする 23

24 9 画面の左の欄の右矢印の [ 素材を貼る ] をクリックする 10 選択した画像が貼りついた画像を編集する為に上の真ん中の方の [ 枠の調整 ] をクリックする 24

11 右に出たダイアログボックスの真ん中の方の [ 左端 ] をクリックする画像の右側のボーダー部分の上下の間の中間の四角い小さな黒い枠にマウスを合わせて左右の線のマークが出たら右側にドラックして画像を右側に伸ばす 12 画像が拡大される画像をクリック選択し左端上の [ ファイル ] クリック一覧から [ 上書き保存 ]

25 11 右に出たダイアログボックスの真ん中の方の [ 左端 ] をクリックする画像の右側のボーダー部分の上下の間の中間の四角い小さな黒い枠にマウスを合わせて左右の線のマークが出たら右側にドラックして画像を右側に伸ばす 12 画像が拡大される画像をクリック選択し左端上の [ ファイル ] クリック一覧から [ 上書き保存 ] をクリックする 13もう一度 [ ファイル ] クリックし一覧から [ イメージデザイナーの終了 ] クリックする 14ホームページビルダーの画面に戻った選択した画像に変更された画面上の左の方 [ 保存 ] ボタンをクリックし保存するメインサイト名画像の名前の変更の方法 ( トップページのメインビジュアル画像は別のに変更 ) 25

26 ⑮サイト名の HOMEPAGE BUILDER の画像をクリック選択する ⑯左側に出た 3 つのうちの真ん中のボタンのロゴ画像の編集をクリックし選択する 26

27 17 開いた外部エディタで画像を編集ダイアログボックスでイメージデザイナー選択エディタ起動クリックする 18 もし何か警告のダイアログボックスが開いたら OK を押すイメージデザイナーが起動した 27

28 19 画面上の文字やスタンプをクリックする画像のホームページビルダーの文字をクリックし選択する 20 ページの名前をマイマキコホームページに変更しその下の HOMEPAGE BUILDER の文字を選択する 28

29 21その文字を右側の編集画面で MY MAKIKO HOMEPAGE に変更し左上端のファイルクリックし上書き保存をクリックする 22左上端のファイルクリックしイメージデザイナーの終了クリックするトップページのサイト名の画像が修正された画面上の左の方の保存ボタンをクリックする 29

その上に上記画面より左側のスライドショーをクリック選択しドラッグしトップページのメインビジュアルの画像にしたの辺に動かし

30 5. トップページのメインビジュアルをスライドショーにする方法 1 左端のパーツ一覧をクリックする上左端の方の黒い丸をクリックし一覧からフォトモーションを選択するその上に上記画面より左側のスライドショーをクリック選択しドラッグしトップページのメインビジュアルの画像にしたの辺に動かしここにパーツをドラッグと表示されたところまでマウスを移動して離す 2 スライドショー導入の画像が挿入された画像をクリックし 3 つのボタン表示の左端のパーツのプロパティをクリックする 30

31 3 パーツのプロパティダイアログボックスが開いた 4 下の方の画像ファイルの選択をクリックする 31

32 ⑤ 画像ファイルの選択ダイアログボックスが開いたら左下の方の参照をクリックする ⑥ 画像を選ぶダイアログボックスでスライドショーに入れる画像のファイルの入ったフォルダに移動し Ctrl キーを押しながら必要な複数の写真を選択するそして選ぶをクリックするこの時に使う画像はサイズなど前もって画像編集ソフトなどで編集をしておく 32

33 ⑦OK を押す ⑧画像が選択された下の方のカスタマイズをクリックする ⑨左側の真ん中あたりのピンク色の詳細をクリックする 33

34 ⑩ スライドショーの間隔 5000 ミリ秒に選択し OK クリックする ⑪カスタマイズスライドショーダイアログボックスでも OK をクリックする ⑫トップページにフォトモーションスライドショーが導入されたスライドショーの上にある写真画像をクリック選択する 3 つのボタンが表示されるがその一番右の削除マークをクリックする 34

35 13 いらない画像が削除されトップページのメインビジュアルにスライドショーが入った画面上左の方の保存ボタンをクリックする 6. レスポンシブサイト (PC とスマホ表示対応 ) 制作について 1 レスポンシブサイト制作についてははじめからその機能がついているので画面上真ん中のボタンのレスポンシブの表示のボタンをクリックする 2 画面右上端の方のプレビュークリックする 3 スマホの場合の表示がされる 35

36 ④画面上の真ん中のパソコン用ボタンをクリックする画面上左端の方の保存ボタンをクリックする 7.サイト転送設定転送方法 ①メニューのサイトクリック転送設定の一覧/設定クリックする ② 転送設定の一覧/設定ダイアログボックスが表示された 36

37 ③ 設定追加クリックする ④公開先設定の追加プロバイダーの選択ダイアログボックスが表示されるその他のプロバイダーを選択するをクリック選択し次へクリックする ⑤開いたダイアログボックスに契約したプロバイダーのホームページのサービスの転送用のユーザー ID やパスワードなどをサービス契約時にプリントした紙を参考に入力し完了をクリックする 37

38 ⑥転送設定が完了したら画面右上端のサイトの公開をクリックする ⑦サイト公開ダイアログボックスが表示された公開先設定の右の下三角ボタンを先ほど設定したものに選択し公開をクリックする何か警告表示が出た場合は選択する部分があればチェックを入れ OK をクリックする転送設定が正しくあればサイトは契約したプロバイダーのサーバーにアップロードされる ⑧ブラウザを開き契約したプロバイダーの情報を見て自分のホームページアドレスを入力すると上手くいけば公開したホームページが表示される 38

RAYOUT

RAYOUT HOMEPAGE CREATE PACKAGE 1 HOMEPAGE CREATE PACKAGE 3 2 HOMEPAGE CREATE PACKAGE 4 5 3 HOMEPAGE CREATE PACKAGE 6 7 4 HOMEPAGE CREATE PACKAGE 8 -1 Step3 パーツ個別設定に変わりました -1 で挿入したパーツの編集を選ぶとウィンドウが開きます画面に従って内容を