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 TOP index ページの作成 8 1 サムネイル の挿入 2 タイトル文字の挿入 11 3 リンクボタンの作成 16 4 リンクの設定 8 ]
1 IBM ホームページ ビルダーの起動と保存フォルダの作成 作成前に ページや画像を保存するための フォルダ ( 入れ物 ) を作成しておきます 1 保存フォルダの作成 1 デスクトップまたは コンピュータ から ローカルディスク (D) をクリックして開きます 2 ローカルディスク (D) が表示されましたら 画面左の 新しいフォルダを作成する をクリック 3 新しいフォルダ が青く反転した形で表示されました 1
4 反転されたままの状態または Back Space キーで削除し 旅日記 と名前を入力します 5 次に このホームページ作成に使用する画像も同じ場所に保存をしておくと便利です フォルダ名を 旅日記画像 とします これから作成するホームページのファイルや画像はすべてこのフォルダに保存します 右上のをクリックして ダイアログを閉じます 2 スタートからの起動 IBM ホームページ ビルダーの起動 1 デスクトップ の をクリックします ( またはは スタート画面の タイル から ホームページ ビルダー をクリックします Windows7 の場合は スタート から ホームページ ビルダー をクリックします 2
2 ホームページ ビルダー 15 へようこそ ダイアログが表示 スタンダード スタイルを選択し OK] をクリック スタンダード はもっとも標準的なスタイル 3 ページが開きました 画面をこれから使用する設定に替えてみましょう 3
3 画面の表示調整 1 今回は作業をし易くするため 青い 簡単ナビ を閉じ ページ編集領域を広くします 作業はメニューバーとツールバーで進めていきます メニューバーの 表示 をクリック 下に表示されたリストの かんたんナビ のチェックをはずします 2 続いて 同じく 表示 をクリック ツールバー を選択 右に表示されたリストの 標準 書式 表示 挿入 表 をクリックしてチェックを入れます (1 つ 1 つチェックの設定を繰り返します ) 4 素材ビューの表示 1 右に 素材ビュー を表示させておきます 素材ビュー が表示されていない場合 表示 素材ビュー をクリックします 2 右側が [ 素材ビュー ] に変わりました 4
3 素材ビュー が所定の場所に収まりました まれに ページ編集領域 の上に表示される場合があります そのような場合は 素材 の最上部 ( グレイの部分 ) にマウスポインタを置き 右へ移動 または ダブルクリック します 5 新規ページ の種類 1 新しいページには 代表的なものを挙げて見ます メニューバーの ファイル をクリック 表示された 新規作成 の中に よく使われる ページ として 以下の種類があります この 2 つの 新規作成 について以下に説明をしておきます 5
標準モード とは 画像の配置 文字の配置が Word のような入力方法 移動 設置が特徴となります 画像が常に中央に移動 文字列は折り返し表示されます 画像や タイトル をページの中央に挿入し ページを縮小しながら試して見ましょう どこでも配置モード とは 画像 文字の配置 移動は テキストボックス と同じような働きが特徴となります 画像 文字列ともに折り返しがなく画面に隠れた状態で表示されます 画像や タイトル をページの中央に挿入し ページを縮小しながら試して見ましょう 2 今回は 標準ページで新規作成 を使っていきます 6
2 フレームのないページの作成と保存 1 フレームのないページを作成 1 ファイル 標準モードで新規作成 をクリック 2 標準モード のページが開きました まずこのページを 最初に作成しておいた保存フィルダに保存しておきます 4 TOP index ページの作成 このページは インターネットを開いたとき 最初に表紙として表示されるページです 1 サムネイル の挿入 サムネイル とは 画像をクリックリすると画像が大きく表示されます 1 メニューバーの 挿入 を選択 画像の効果 をポイントし 右に表示された サムネイル をクリックします 7
2 Web フォトギャラリー が表示 画像保存ファイルを開きます マイコンピュータ を開き ローカルディスク (D) 左の をクリック 表示された 旅日記画像 をクリックして開きます サムネイルで表示予定の順にクリックしていきます (4 列 3 行の予定の場合は 12 枚必要 ) サムネイル写真のサイズの目安 この場合 横に 4 枚なので 写真の表示サイズ を順にクリックして プレビューに表示されるのを 大きさの目安にしてみましょう 最初に表示されているのは 96 96 です 3 サムネイル作成ウィザード ( 大きさと位置 ) ダイアログが表示 自分で設定する にチェックを入れ その下の 設定 をクリッ 8
4 サムネイル作成ウィザード ( 大きさと位置のオプション ) ダイアログが表示 サムネイルの数 = 4 に 大きさ = 96 幅を揃える にチェックを入れ OK をクリック 5 元の画面に戻るので 中央揃え にチェックを入れ 次へ をクリック 6 サムネイル作成ウィザード ( リック先の設定 ) ダイアログが表示 リンク先の設定 では 画像 にチェックが入っているのを確認し 完了 をクリックします 9
2 サムネイル に 列 の挿入 サムイネル に 列 を挿入していきます これから サムネイル 中へ タイトル と リンクボタン を挿入していきます リンクボタン の個数により サムネイル の幅の丌足が予測されます 列の追加をしておきます 1 サムネイル に列を左右に 1 列ずつ追加挿入します 左に 1 列挿入します 左端の画像を選択 ツールバーの 列の挿入 の をクリック 左へ追加 をクリック 2 左に列が追加されました 続いて 右端の画像を選択 ツールバーの 列の挿入 の をクリック 右へ追加 をクリック 3 サムネイル に 行 の挿入 列 が挿入がされました 続いて サムネイルの 1 行目 と 2 行目 に間へ 行 を挿入し します 1 1 行目 の画像 ( 任意 ) の上を選択 ツールバーの 行の挿入 の をクリック 下へ追加 をクリック 10
2 行が挿入されました 挿入された行を結合して タイトル と リンクボタン を挿入します 挿入した 行 全体をドラッグして選択 ツールバーの 選択セルの結合 をクリックします 4 タイトル文字の挿入 1 タイトル名を半角英数で Travel Gyarally と入力 文字列をドラッグして選択 ツールバーの フォントの変更をクリックします 2 フォント のダイアログが表示します 色指定 = 赤 ( 任意で ) サイズ = 7 位に 書体 = AR Script3 Bold に設定し OK をクリックします 11
5 タイトル が拡大されました 左右の列を拡張しておきましょう ( リンクボタン挿入のため ) 3 リンクボタンの作成 リンク とは ボタンをクリックすると ボタンの表示先のページが現れる機能のことです 1 まず リンク先から TOP ページ へ戻るボタン HOME を 素材集 で作成します カーソルを タイトル の下 2 段目に移動し 中央の設定しておきます 右 素材集 の ウェブアート グループから ボタン をクリック 下画像ファイルの btn132b.mif を選択 右下の 挿入 をクリックします 2 ボタン が挿入されました ボタンの文字を変更します ボタンの上で右クリック ボタンの編集 をクリックしま 12
3 ボタンの作成 ダイアログが表示 文字欄に表示されていた文字を削除して HOME と入力し直します 右下の 詳細設定 をクリック ( 文字の編集をします ) 4 ボタン を削除します オブジェ一覧 のボタン を選択 右下の 削除 をクリック 13
5 続いて ボタン を選択 中央下の 整列 をリック 左右中央揃え と 上下中央揃え をクリックします 6 文字を 太文字 にします オブジェ一覧の ロゴ を選択 右下の 編集 をクリックします 14
7 ロゴ作成ウィザード ( 文字の指定 1/4) が表示 スタイル グループの ボールド にチェックを入れ 次へ をクリック 完了 のページが表示されるまで 次へ をクリックします 完了 のページが表示されたら 完了 をクリックします 8 元のページへ戻ったら OK をクリックします 15
9 ボタンの作成 のダイアログに戻ったら 完了 をクリック 10 ボタンの文字が変更されました 11 その他の ボタン を同じ手順で挿入してみましょう ボタンが横に並びきれない場合は 左右の列をドラッグして拡張します JR 東日本 空のご案内 空港行きバス 高速バス 16
4 画像の編集 1 画像の 枠線 を削除します 画像の上で右クリック 表示された一覧から 属性の変更 をクリック 2 属性 の画面が表示しました 画面下の 枠 グループより 枠表示 の枠を 非表示 にします 3 その他の画像も同じ手順で 枠 を非表示にしましょう プレビュー で確認してみましょう 17
6 画像に名前を入れる画像の下へ次の順で観光地の名前をいれます 銀閣寺 箱根 鎌倉 京都北野天神 倉敷 奈良長谷寺 小樽 富良野 東京スカイツリー 哲学の道 京都東寺 東京バスツアー 1 銀閣寺 を入力します 左 1 行 1 列目の画像をクリック [Enter] を押します 画像の下にカーソルが移動します カーソルの位置へ 銀閣寺 と入力します 銀閣寺 が表示されました 2 その他の画像にも名前を入力しましょう 18
7 文字の編集文字が入力されました 文字の色を 黒 フォントの種類 を HGP 行書体 フォントサイズ を 2 に設定します Ctrl を押しながら 各画像を選択 ツールバーの フォントの変更 をクリックします 4 フォント のダイアログが表示 色指定 を 黒 サイズ を 2 書体 を HGP 行書体 に設定し OK をクリックします 19
5 プレビュー で確認しましょう 5 フレームの保存 1 ページの左上にカーソルが点滅しているのを確認します 名前を付けて保存 をクリック 2 名前を付けて保存 ダイアログが表示 保存先の コンピュータ から ローカルディス (D) を開きます ( 保存フォルダ 旅日記 をダブルクリックして開きます ファイル名 欄に半角英数で index と入力 保存 をクリックします 20
2 画像の保存を聞いてきます 保存 をクリックします IBM ホームページ ビルダーで 旅日記 ( サムネイル ) 作成 2011 07 20 作成 2015 7 4 修正 西川君江 21