初心者のためのホームページ・ビルダーネット学院 =講習マニュアル、実例リンク集、サンプルページ、アフィリエイト、入門通信講座=
ホームページ・ビルダー12 ホームページ・ビルダーネット学院
最新版!IBM ホームページ・ビルダー12で、あなたもいっそう進化した楽しいホームページ&ブログライフを楽しみましょう♪NEW!
講習マニュアル実例リンク集サンプルページアフィリエイト入門通信講座

「初心者向け【ホームページ・ビルダー】の楽しい使い方〜ラクラク入門通信講座〜」 無料体験有

ネット講座 受講者募集中!ネットで
学べる!
ネット講座


ホームページ・ビルダー12
ホームページ・ビルダー11


ホームページの意味とは?
おすすめをする訳は?
あなたのご希望テーマは?


WEBビジネスの可能性は?
権利収入を得る方法は?
新しい活用方法とは?


テキスト・ガイドブック
イーラーニング、通信講座
ひな形、テンプレート
商用動画マニュアル
アクセスアップ、SEO


ナレッジサーブ 入門検定
IBM 検定試験
IBM 認定試験

講師:藤田晋也

■講師:藤田晋也
出身:兵庫県神戸市
ホームページ・ビルダー歴:8年
詳しいプロフィールはこちら。


ネット講座 講師募集中!あなたの知識でネットに講座が開けます!

■更新情報■






Just MyShop(ジャストシステム)
> ホーム > 講習マニュアル 【ホームページビルダー12 初級編】

 ホームページ・ビルダークイック | ホームページ・ビルダーウェブアートデザイナー |

ホームページ・ビルダークイックを使って講習マニュアル用に作成したのは
mixiの楽しい使い方』です。 新たな発見も多々あり!(2008.03.05)

作成の手順を下記のステップにあわせて、画像解説
併記しながら、これからご紹介してゆきたいと思います。

<1>デザインの選択

<2>レイアウトの選択

<3>ページ内容の入力


実際の手順の中では、<1><2>は、(2)テンプレートを選ぶの段階で
ほぼ同時に選択されますので、あえて変更することをしない場合には
さっそく、<3>に進むことができて、特に初心者の方には手順に迷いが
ほとんどない点が、非常に便利だと思います。

ちなみに、ホームページ・ビルダークイックの、ようこそ画面では
下記の4つのステップが紹介されていますので、この流れを元に
まとめてみました。

(1)サイトに名前をつける ・・・ ホームページをひとつの集合体として考えます

(2)テンプレートを選ぶ ・・・ <1>デザインの選択 <2>レイアウトの選択

(3)ページを編集する ・・・  <3>ページ内容の入力

(4)公開する ・・・ ホームページのインターネットデビュー! :サイト転送活用!

さらに、実際のサイト運用では必須のステップとして、更新があります。

(5)更新する ・・・ ホームページの内容の追加、修正、削除 :サイト転送活用!

スタート⇒すべてのプログラム⇒
ホームページ・ビルダークイックを
選択して、クリックします。
ホームページ・ビルダークイックへ
ようこそ画面が表示されます。
OKをクリックします。

(1)サイトに名前をつける
(2)テンプレートを選ぶ
(3)ページを編集する
(4)公開する

ホームページ・ビルダークイックは
まずサイトを新規に作成します。

(1)サイトに名前をつける

サイト名を入力します。
例:mixiの楽しい使い方
転送時に転送設定をするので
ここでは省略して先に進みます。
完了をクリック。

(2)テンプレートを選ぶ

サンプルテンプレートの選択
例:テーマ ブログ風
テンプレート 今日の出来事
サンプルテンプレートが
無事に開きました。
目次でページを確認をします。

(3)ページを編集する

ヘッダーとなるホームページのタイトルを編集します。
例:mixiの楽しい使い方
のように入力をします。
上書き保存してよいか確認されますので、はいをクリックします。
写真の挿入と表示されているところへ、希望の写真を入れてみましょう。
ダミーで挿入されていたグレーの四角い画像を削除しておきます。

今回は、デジカメ写真の挿入をクリックしてみましょう。
写真挿入ウィザードが開きますので、パソコンの中に保存してある希望の写真を、ファイルから指定します。
こちらは、ホームページ・ビルダー12が届いたときの様子です。
画像の大きさですが、この場所では
大きさを指定して、を選択し例として
幅180、高さ180のダミー画像の大きさに合わせてみましょう。
縦横比はそのまま保持する、に
チェックが入っている状態にして
次へをクリックします。
画像の補正は今回はしていませんが、希望のよってチェックを入れて
行うことができます。
次へをクリックします。
画像の特殊効果選択は、今回は選択しませんので、飾り効果なしを選択して、完了をクリックします。
無事に画像が挿入されました。
写真の説明文もワープロの感覚で、隣に入力してゆきます。
ここでいったんページを上書き保存しましょう。もともとパソコンの中に
あった画像を、ホームページ・ビルダークイックで作るページの、保存場所にファイルをコピーする、上書き時に自動的にファイル名を変更する、にチェックが入っていることを確認して、保存ボタンをクリックします。
下の写真も上の写真と同様に入れ替えてみましょう。今度はダミーの画像をダブルクリックしてみましょう。
写真挿入ウィザードが同じように表示されました。今回は、ホームページ・ビルダーの素材集から挿入をしてみます。
素材集から開く、の中に表示された各ジャンルの中から、お好きな画像を選択してみましょう。
今回は、写真の空と海の中から、
風見鶏?!の写真を選びました。
選択した画像をプレビューで確認しておきます。
サイズの指定は、属性の大きさを選択してみました。こうすると細かいサイズを指定しなくても良いようです。
画像の補正は特にせずに、そのまま次へをクリックします。
画像の特殊効果も特に付けずに、
飾り効果なしを選択します。
完了をクリック。
写真がうまく挿入されたかを確認します。大丈夫のようですね。写真の右側のコメントも挿入しておきましょう。
ここで上書き保存をします。
けっこうまめに保存しておいた方が良さそうですね。
ページ下部のフッターを編集します。
上書き保存の確認が開きますので、
はいをクリック。
フッターの文字も確定しました。
これでまずは、トップページの基本ができあがりましたね。
では、ページを追加してみましょう。
目次に追加、をクリックします。
テーマ:ブログ風
テンプレート:お知らせ
をクリックして選択します。
目次に追加されました。
これでページが自動的に作成
できるというのは便利ですね〜!
トップページと同様に、画像と文字を
それぞれの場所に挿入してみます。
mixiやってます、バナーの右下に、
バナーを提供してくださっている
ブログへのリンクを張ります。

HTML部品の挿入のなかから、
リンクの挿入、をクリックします。
リンク作成ウィザードが開くので、
ページやURLへのリンクを作成する
をクリックして選択してから、次へ
をクリック。
そのまま、次へ、をクリックします。
リンク先とターゲットを指定します。
ターゲットは、リンク先の窓について
開き方を指定するところです。
URLをブラウザより取得を選択。
あらかじめ、リンクしたいところの
ホームページを開いておきます。
リンク先と、ターゲットには
新しいウィンドウを指定します。
リンクが挿入されました。
では、インターネット上に公開した時の状態を、ためしにプレビューで見てみましょう。
再編集用のフォルダについて、は
そのまま閉じる、をクリックします。
後で、画像を再編集したい場合等に
とても便利です。
ページタイトルの設定をクリック。
このホームページのキーワードを
入力し、登録をクリックします。
キーワード欄に表示されました。
ホームページの説明を文章で入力して、OKをクリックします。

後ほど、インターネット上にファイル転送して他の方にもホームページを見てもらえるようにします。(4)へ

感動の瞬間まであと少しですね!


(4)公開する

当講習では、無料でホームページが公開できる、とても便利なFC2を使用したいと思います。

まずは、FC2に無料の会員登録をしますので、新規ユーザー登録をクリックします。
あなたのメールアドレス
(そちらに確認メールが届きます)
例:info@hpb-edu.com

画像認証=数字の入力
次へ、をクリックします。
確認メールが送付されましたので、さっそく確認してみましょう。
FC2ID 会員登録用メール
というタイトルのメールを開いて
仮登録の内容を確認します。

確認できたら本登録用の長い
URLのリンクをクリックします。
ニックネーム
パスワード、パスワード確認を
それぞれ入力してから
性別を選択します。
性別は例では男性を選択。
そして登録ボタンを押します。
登録が完了しましたので、内容の詳細をメールで確認しましょう。
FC2ID・登録完了のお知らせ
というタイトルのメールを開いて
本登録の内容を確認します。
まだFC2のサービスは申し込んでいません。

まずはサービス追加ボタンをクリックします。
今回は講習で使用する
FC2ホームページを選択します。

続いて、このサービスを追加
をクリックします。
あなたはログインしていません、
と表示されましたら、いったん
FC2IDに戻りましょう。
メールアドレス
パスワードを入力し、
ログインボタンをクリックします。

ログインしようとすると、警告が表示される場合がありますが、特に気にせずそのまま先へと進んでゆきましょう。
無料ホームページ登録、をクリックします。
利用規約が表示されますので、ひととおり目を通してから、同意する、をクリックしましょう。
希望アカウント名
ホームページのカテゴリー
ホームページのタイトル
ホームページの詳細を
それぞれ記入してゆきます。
希望のアカウントが使えるかどうか、アカウントチェックをクリックして確認してみましょう。(万一、他の人が既に取得している場合には、少し文字を追加してアレンジしたり、別のアカウントを選びましょう)

例:hpbedu
希望アカウント名
ホームページのカテゴリー
ホームページのタイトル
ホームページの詳細が記入
し終わったら、
以上の内容で登録する、を
クリックしましょう。
登録内容確認画面が表示されますので、内容を確認できたら、OKをクリックしましょう。
サービスを追加しました、とありますので無事に、登録できましたね。

登録内容の確認メールの方も念のために見てみましょう。
【FC2WEB】登録内容の確認
というメールの内容が届きました。

FTPには以下の情報でログインしてください、という部分は特に重要になりますので、しっかり確認しておきましょう。
さて、ホームページ・ビルダークイックに戻りましょう。

まずページの公開をクリックし、続いて転送設定をクリックします。
新規作成をクリックします。
プロバイダ指定が大きく二つに分かれています。
Just MyStageを使用する
その他のプロバイダを使用する。

ここでは、無料でホームページの公開スペースをいくつでも自由自在に持てるよう、後者を選択します。
そして転送にも名前をつけて他の
転送との区別をしておきます。
プロバイダの選択をクリックします。
有名なプロバイダが、まさに目白押しですね。
さらに下へと画面を動かしてみると、
一番下に、その他がありますので、
選択してクリックしましょう。
FTPサーバー名
FTPアカウント名
FTPパスワードを
それぞれ入力するシーンです。
転送設定の新規作成については、
今回は下記のように入力しましょう。

プロバイダの選択=その他
FTPサーバ名=ホスト名
FTPアカウント名=ユーザ名
FTPパスワード=パスワード

良く似た用語が多いですね。
プロバイダの選択=その他
FTPサーバ名=ホスト名
FTPアカウント名=ユーザ名
FTPパスワード=パスワード

それぞれを入力し終わりましたら、
次へ、をクリックします。
転送先フォルダの指定は、今回はしませんので、そのまま完了ボタンを
クリックしましょう。
転送設定が追加されました。

例では、これ以外の転送設定を
ひとまず省略いたします。
サービス名にFC2ホームページ、
と表示されるようになりました。

無事にホームページの申込が
完了しましたね。

いよいよ、パソコンの中にあるホームページのデータを、FC2の方へ転送してみましょう。

管理画面をクリックしましょう。
待望のホームページURLが
割り当てられました。

例:http://hpbedu.web.fc2.com/

参考:FTP設定方法はこちら
さっそく、ホームページURLに
アクセスしてみると・・・
ただいま、準備中です。

という表示だけですね(笑)
パソコンの中のホームページデータをまとめて、FC2ホームページ公開スペースへ送ることができます。

まず、サイト転送をクリックします。
転送設定は、さきほど指定した
転送設定の名前が表示されて
います。

転送対象のファイル一覧が表示されていますが、第一回目の転送はすべてのファイルになります。

さぁ、待ちに待った転送ボタンをクリックしてみましょう!
ファイル転送中、です。
うまく転送が完了しますように!
無事に転送が完了しました!

終了ボタンをクリックしましょう。
ちなみに、転送予約設定とは
どのような内容なのでしょうか?

ちょっと垣間見てみましたが、
今回は使わずにすみそうです。
FC2ホームページの完成です!

きちんと表示されているかどうか
チェックしておきましょう。

ホームページ・ビルダークイックを
使ったホームページの完成です!

デビュー!おめでとうございます!
自分のホームページをインターネット上に、無事公開できた感想はいかがでしょうね?!(笑)

では、閉じるボタンをクリックし、
ホームページ・ビルダークイック
を終了、をクリックしておきましょう。

お疲れ様でした!


(5)更新する

いったん完成したホームページを
今度は更新してみましょう。

ホームページ・ビルダークイックを
立ち上げます。
ホームページ・ビルダークイックの
ようこそ画面が開いたら、
OKをクリック。
以前に作成したサイトの一覧が表示
されます。

更新希望のサイトをクリックして、
開くをクリック。
ホームページ・ビルダークイックで
編集ができる状態になります。

例では、mixiの楽しい使い方
トップページが表示されています。

今回はこのページの中にある文章を
一部修正してみましょう。
きょうの出来事 トップニュース
⇒今日の出来事 嬉しいニュース

このように修正してみました。

このとき、画面上部のページタイトル横には、*マークが表示されていて
まだ保存されていないことを表しています。
上書き保存をクリックします。
上書き保存が完了すると、先ほど
画面上部のページタイトル横に、
表示されていた、*マークは消えて
なくなっています。

これでいま編集しているファイルが無事保存されたことがわかります。

このようにひと目で確認できますね。
今、更新したホームページの内容をインターネット上にも、反映するために、ページの公開をクリック。
ひきつづき、サイト転送をクリック
します。

一番最初にホームページのファイルをサーバーに転送するときと、更新を行う手順とはほとんど同じです。
ページ/サイト転送ウィンドウが
開き、転送ファイルの一覧を確認。

前回の転送以降に更新されたファイルのみが、転送対象一覧に表示されています。

転送をクリック。
ファイル転送中ウィンドウが開き、
転送中のファイルが確認できます。

緑のバーが左から右へだんだんと伸びてゆきます。
転送が完了しました、とのメッセージが表示されたら、更新完了です!
さっそく、インターネットで更新がされたことを確認してみましょう。

”今日の出来事 嬉しいニュース”

と予定通りに更新されています。
更新を終えるときには、閉じるボタンをクリックします。
ホームページ・ビルダークイックを
終了をクリックします。

すると、ホームページ・ビルダークイックのウィンドウがすべて閉じます。

自分の好きな時にホームページを自由に更新できる楽しさを、ぜひあなたにも味わっていただけますように・・・♪


 ホームページ・ビルダークイック | ホームページ・ビルダーウェブアートデザイナー |

> ホーム > 講習マニュアル 【ホームページビルダー12 初級編】



 ホーム | ホームページ・ビルダーネット学院 ブログ | ホームページ・ビルダー12 新機能リクエストブログ
 | ホームページビルダーブログレポート | ホームページビルダー 入門検定 | ChatRoom Pensse(パンセ) | 
旧ホーム


(Yahoo!JAPAN ホームページ・ビルダー カテゴリー登録サイト様一覧  敬意を表し掲載させていただきます。
ホームページ作成ソフトホームページビルダー10,9,8,7の使い方
ホームページビルダー・グレート初心者講座
ホームページビルダー作成報告
イプシロン-ホームページの作り方
3日間 ホームページビルダー
ホームページ・ビルダーで作るはじめてのWebページ

ホームページビルダーv12・11・10・9・8の使い方講座

ホームページ・ビルダー」は日本IBM社の商標または登録商標です。

Copyright (C) 2005-2008 hpb-edu.com. All Rights Reserved.
ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院