「旅日記」

IBM ホームページ・ビルダーVo.15

「旅日記」

「サムネイル」でアルバム作成

2015/03/01

目 次

1、ホームページ・ビルダーの起動とフ

ォルダの作成

1

〔1〕保存フォルダの作成

1

〔2〕スタートからの起動

2

〔3〕画面の表示調整

4

〔4〕素材ビューの表示

4

〔5〕

「新規ページ」の種類

5

2、フレームのないページの作成

と保存

6

〔1〕フレームのないページを作成

6

〔2〕フレームの保存

7

3、ＴＯＰ「index」ページの作成

8

〔1〕

「サムネイル」の挿入

8

〔2〕タイトル文字の挿入

11

〔3〕リンクボタンの作成

〔4〕リンクの設定

16

１、ＩＢＭホームページ・ビルダーの起動と保存フォルダの作成

作成前に、ページや画像を保存するための「フォルダ」（入れ物）を作成しておきます。 〔1〕 保存フォルダの作成 ① デスクトップまたは、「コンピュータ」から「ローカルディスク(Ｄ)」をクリックして開きます。 ② 「ローカルディスク(Ｄ)」が表示されましたら、画面左の「新しいフォルダを作成する」をクリ ック。 ③ 「新しいフォルダ」が青く反転した形で表示されました。

④ 反転されたままの状態または「Back Space」キーで削除し、「旅日記」と名前を入力し ます。 ⑤ 次に、このホームページ作成に使用する画像も同じ場所に保存をしておくと便利です。 ・フォルダ名を「旅日記画像」とします。 ・これから作成するホームページのファイルや画像はすべてこのフォルダに保存します。 ・右上の をクリックして、ダイアログを閉じます。

〔2〕 スタートからの起動

ＩＢＭホームページ・ビルダーの起動。 ① 「デスクトップ」の をクリックします。（またはは、スタート画面の「タイル」 から「ホームページ・ビルダー」をクリックします。

② ホームページ・ビルダー15 へようこそ」ダイアログが表示。

・「スタンダード」スタイルを選択し、「ＯＫ］をクリック。「スタンダード」はもっとも標準的な スタイル。

〔3〕 画面の表示調整 ① 今回は作業をし易くするため、青い「簡単ナビ」を閉じ、ページ編集領域を広くします。 作業はメニューバーとツールバーで進めていきます。 ・メニューバーの「表示」をクリック ⇒ 下に表示されたリストの「かんたんナビ」のチェックを はずします。 ② 続いて、同じく「表示」をクリック ⇒ 「ツールバー」を選択 ⇒ 右に表示されたリストの「標 準」、「書式」、「表示」、「挿入」、「表」をクリックしてチェックを入れます（１つ１つチェックの設定を繰り 返します）。 〔４〕素材ビューの表示 ① 右に「素材ビュー」を表示させておきます。 ・ 「素材ビュー」が表示されていない場合 → 「表示」 ⇒ 「素材ビュー」をクリックします。 ② 右側が［素材ビュー］に変わりました。

③ 「素材ビュー」が所定の場所に収まりました。 ・まれに、「ページ編集領域」の上に表示される場合があります。そのような場合は、「素材」の最上部 （グレイの部分）にマウスポインタを置き、右へ移動、または「ダブルクリック」します。 〔５〕 「新規ページ」の種類 ① 新しいページには、代表的なものを挙げて見ます。 ・メニューバーの「ファイル」 をクリック ・表示された「新規作成」の中に、よく使われる「ページ」として、以下の種類があります。 ・この２つの「新規作成」について以下に説明をしておきます。

◆ 「標準モード」とは ・画像の配置、文字の配置が Word のような入力方法、移動、設置が特徴となります。 ・画像が常に中央に移動、文字列は折り返し表示されます。 ・画像や「タイトル」をページの中央に挿入し、ページを縮小しながら試して見ましょう。 ◆ 「どこでも配置モード」とは ・画像、文字の配置、移動は、「テキストボックス」と同じような働きが特徴となります。 ・画像、文字列ともに折り返しがなく画面に隠れた状態で表示されます。 ・画像や「タイトル」をページの中央に挿入し、ページを縮小しながら試して見ましょう。 ② 今回は、「標準ページで新規作成」を使っていきます。

２、フレームのないページの作成と保存

〔1〕フレームのないページを作成 ① 「ファイル」 ⇒「標準モードで新規作成」をクリック ② 「標準モード」のページが開きました。まずこのページを、最初に作成しておいた保存フィルダに 保存しておきます。

４、ＴＯＰ「index」ページの作成

このページは、インターネットを開いたとき、最初に表紙として表示されるページです。 〔1〕「サムネイル」の挿入 「サムネイル」とは、画像をクリックリすると画像が大きく表示されます。 ① メニューバーの「挿入」を選択 ⇒ 「画像の効果」をポイントし、右に表示された「サムネイル」 をクリックします。

② 「Web フォトギャラリー」が表示 ⇒ 画像保存ファイルを開きます。 ・「マイコンピュータ」を開き、「ローカルディスク（D）」左の「 」をクリック。表示された「旅日 記画像」をクリックして開きます。 ・サムネイルで表示予定の順にクリックしていきます。（４列３行の予定の場合は１２枚必要） ※ サムネイル写真のサイズの目安 ・この場合、横に４枚なので、「写真の表示サイズ」を順にクリックして、プレビューに表示され るのを、大きさの目安にしてみましょう。最初に表示されているのは「９６×９６」です。 ③ 「サムネイル作成ウィザード(大きさと位置)」ダイアログが表示 ・「自分で設定する」にチェックを入れ、その下の「設定」をクリッ

④「サムネイル作成ウィザード(大きさと位置のオプション)」ダイアログが表示

・「サムネイルの数＝「4」に、大きさ＝「96」、「幅を揃える」にチェックを入れ、「OK」をクリック。

⑤ 元の画面に戻るので、「中央揃え」にチェックを入れ、「次へ」をクリック

⑥ 「サムネイル作成ウィザード(リック先の設定)」ダイアログが表示

〔２〕「サムネイル」に「列」の挿入 「サムイネル」に「列」を挿入していきます。 これから「サムネイル」中へ「タイトル」と「リンクボタン」を挿入していきます。 「リンクボタン」の個数により「サムネイル」の幅の丌足が予測されます。列の追加をしておきます。 ① 「サムネイル」に列を左右に１列ずつ追加挿入します。 ・左に１列挿入します。 左端の画像を選択 ⇒ ツールバーの「列の挿入」の▼をクリック ⇒ 「左へ追加」をクリック。 ② 左に列が追加されました。 ・続いて、右端の画像を選択 ⇒ ツールバーの「列の挿入」の▼をクリック ⇒ 「右へ追加」をク リック。 〔３〕「サムネイル」に「行」の挿入 「列」が挿入がされました。続いて、サムネイルの「１行目」と「2 行目」に間へ「行」を挿入し、 します。 ① 「１行目」の画像(任意)の上を選択 ⇒ ツールバーの「行の挿入」の▼をクリック ⇒ 「下へ追 加」をクリック。

② 行が挿入されました。挿入された行を結合して、「タイトル」と「リンクボタン」を挿入します。 ・挿入した「行」全体をドラッグして選択 ⇒ ツールバーの「選択セルの結合」をクリックします。 〔４〕タイトル文字の挿入 ① タイトル名を半角英数で「Travel Gyarally」と入力 ⇒ 文字列をドラッグして選択 ⇒ ツールバーの「フォントの変更をクリックします。 ② 「フォント」のダイアログが表示します。 ・「色指定」＝「赤」(任意で)。 「サイズ」＝「７」位に。

⑤ 「タイトル」が拡大されました。 ・左右の列を拡張しておきましょう（リンクボタン挿入のため）。 〔３〕 リンクボタンの作成 ※ 「リンク」とは、ボタンをクリックすると、ボタンの表示先のページが現れる機能のことです。 ① まず、リンク先から「ＴＯＰページ」へ戻るボタン「ＨＯＭＥ」を「素材集」で作成します。 ・カーソルを「タイトル」の下２段目に移動し、中央の設定しておきます。 ・ 右「素材集」の「ウェブアート」グループから「ボタン」をクリック ⇒ 下画像ファイルの「btn132b.mif」 を選択 ⇒ 右下の「挿入」をクリックします。 ②「ボタン」が挿入されました。ボタンの文字を変更します。 ・ボタンの上で右クリック ⇒ 「ボタンの編集」をクリックしま

③「ボタンの作成」ダイアログが表示

・文字欄に表示されていた文字を削除して、「ＨＯＭＥ」と入力し直します。 ・右下の「詳細設定」をクリック(文字の編集をします)。

④ 「ボタン」を削除します。

⑤ 続いて、「ボタン」を選択 ⇒

・中央下の「整列」をリック ⇒ 「左右中央揃え」と「上下中央揃え」をクリックします。

⑥ 文字を「太文字」にします。

⑦ 「ロゴ作成ウィザード（文字の指定・1/4）」が表示

・「スタイル」グループの「ボールド」にチェックを入れ、「次へ」をクリック ⇒ 「完了」 のページが表示されるまで「次へ」をクリックします。

・「完了」のページが表示されたら「完了」をクリックします。

⑨ 「ボタンの作成」のダイアログに戻ったら、「完了」をクリック。

⑩ ボタンの文字が変更されました。

⑪ その他の「ボタン」を同じ手順で挿入してみましょう。

・ボタンが横に並びきれない場合は、左右の列をドラッグして拡張します、

〔４〕 画像の編集 ① 画像の「枠線」を削除します。 画像の上で右クリック ⇒ 表示された一覧から「属性の変更」をクリック。 ② 「属性」の画面が表示しました。 ・画面下の「枠」グループより、「枠表示」の枠を「非表示」にします。 ③ その他の画像も同じ手順で「枠」を非表示にしましょう。 ・「プレビュー」で確認してみましょう。

〔６〕 画像に名前を入れる 画像の下へ次の順で観光地の名前をいれます。 ① 「銀閣寺」を入力します。左１行１列目の画像をクリック ⇒ [Enter]を押します ⇒ 画像の下にカーソルが移動します。 ・カーソルの位置へ「銀閣寺」と入力します。「銀閣寺」が表示されました。 ② その他の画像にも名前を入力しましょう。 銀閣寺 箱根 鎌倉 京都北野天神 倉敷 奈良長谷寺 小樽 富良野 東京スカイツリー _{哲学の道 京都東寺 東京バスツアー}

〔７〕 文字の編集 文字が入力されました。 ・文字の色を「黒」 ・「フォントの種類」を「HGP 行書体」 ・「フォントサイズ」を「２」に設定します。 ・「Ctrl」を押しながら、各画像を選択 ⇒ ツールバーの「フォントの変更」をクリックします。 ④ 「フォント」のダイアログが表示。 ・「色指定」を「黒」、「サイズ」を「２」、「書体」を「ＨＧＰ行書体」に設定し、 ・「ＯＫ」をクリックします。

⑤ 「プレビュー」で確認しましょう。 〔５〕 フレームの保存 ① ページの左上にカーソルが点滅しているのを確認します。 ・「名前を付けて保存」をクリック ②「名前を付けて保存」ダイアログが表示 ・保存先の「コンピュータ」から「ローカルディス(D)」を開きます ⇒ (保存フォルダ「旅日記」を ダブルクリックして開きます。 ・「ファイル名」欄に半角英数で「index」と入力 →「保存」をクリックします。