3. 動 きのあるページを 作 成 する アニメーション 文 字 や 画 像 (アニメーション GIF ) 画 像 のロールオーバー 効 果 などの 動 きがあるものを 挿 入 して 見 る 人 を 楽 しませるようなページを 作 成 してみましょう アニメーション GIF とは GIF 形 式 の 画 像 ファイルの 一 種 で いくつかの 画 像 を 組 み 合 わせてパラパラ 漫 画 のように 動 かすものです アニメーション GIF は 普 通 の GIF と 同 じようにページに 貼 り 付 けることができます 3.1.アニメーション 文 字 を 作 成 して 挿 入 する 文 字 をアニメーション GIF にしてページに 挿 入 しましょう アニメーション 文 字 は ウェブ アニメーター というホームページ ビルダー 付 属 のアニメーション GIF 作 成 プログラ ムでも 作 成 できますが ここではホームページ ビルダー 本 体 で 作 成 してみましょう 1.ページを 開 き アニメーション 文 字 を 挿 入 したい 位 置 にカーソル を 移 動 します 2.ナビメニューから[ロゴ( 飾 り 文 字 )の 挿 入 -アニメーション 文 字 ] を 選 択 します [ 文 字 アニメーションのサイズ 指 定 ]ダイアログボックスが 表 示 さ れます 3.[ 規 定 サイズから 選 択 ]を 選 択 し 右 端 の をクリックして アニメ ーション 文 字 のサイズを 選 択 します ここでは[ 横 長 - 中 (224x33 ピクセル)]を 選 択 します 4.[ OK ]をクリックします [ 文 字 アニメーションの 作 成 ]ダイアログボックスが 表 示 されま す 5.アニメーションにしたい 文 字 列 を[ 文 字 ]に 入 力 します 必 要 に 応 じて フォント 名 文 字 サイズ 文 字 の 色 などを 指 定 します 文 字 の 色 を 変 更 するには [ 色 ]の 右 横 のボタンをクリックして 表 示 され るダイアログボックスで 色 の 種 類 ( 単 色 グラデーション またはテクスチ ャ)を 選 択 します 縁 取 りや 文 字 効 果 などを 利 用 してさらに 凝 った 文 字 にするには [ 文 字 の 装 飾 ]をクリックして 設 定 します 6.[ 効 果 の 種 類 ]から 効 果 を 選 択 し 必 要 に 応 じて 効 果 の 設 定 を 行 います ここでは[グラデーション]を 選 択 します [ 効 果 の 種 類 ]に 表 示 された 画 像 の 上 にポインターを 置 くと 動 きを 確 認 できます [ 効 果 の 種 類 ]を 選 択 すると その 効 果 に 対 して 設 定 できる 内 容 が[ 効 果 の 設 定 ]に 表 示 されます この 設 定 は 自 由 に 変 更 することができま す つづく -13-
7.できあがったら[ OK ]をクリックします ページにアニメーション 文 字 が 挿 入 されます 画 像 の 左 上 には アニメーションを 表 す マークが 表 示 されます! 注 意 [ページ 編 集 ] タブでは アニメーションの 動 きは 確 認 できません 8.かんたんナビバーの[ページの 保 存 ]をクリックして 上 書 き 保 存 または 名 前 を 付 けて 保 存 します ここでは town フォルダーに cover.html というファイル 名 で 保 存 しています 9.[プレビュー]タブをクリックして アニメーション 文 字 の 動 きを 確 認 します 10. 確 認 が 終 わったら[ページ 編 集 ]タブをクリックして 画 面 を 戻 し ておきます -14-
3.2.アニメーション 画 像 を 作 成 して 挿 入 する アニメーション 画 像 を 作 成 してページに 挿 入 しましょう アニメーション 画 像 の 作 成 には ウェブ アニメーター というホームページ ビルダー 付 属 のアニメーション GIF 作 成 プログラムを 使 います 1.ホームページ ビルダーのメニューバーから[ツール-ウェブ ア ニメーターの 起 動 ]を 選 択 します ウェブ アニメーターが 起 動 し [スタートアップ]ダイアログボック スが 表 示 されます 2.[アニメーション ウィザード]を 選 択 します [アニメーション ウィザード (アニメーションの 選 択 )]ダイアログ ボックスが 表 示 されます 3.[ 複 数 の 画 像 ファイルを 使 用 してアニメーションを 作 成 ]を 選 択 して [ 次 へ]をクリックします [アニメーション ウィザード (ファイルの 指 定 )]ダイアログボックス が 表 示 されます 4.[ 画 像 の 追 加 ]をクリックして [ファイルを 開 く]ダイアログボックス でアニメーションに 使 いたい 画 像 ファイルを 選 択 し [ 開 く]をクリ ックします [アニメーション ウィザード (ファイルの 指 定 )]ダイアログボックス に 戻 ります 選 択 した 画 像 ファイルの 名 前 が 一 覧 に 表 示 されて いることを 確 認 します 5. 操 作 4.を 繰 り 返 して アニメーションに 使 いたい 画 像 ファイルを すべて 追 加 します 必 要 に 応 じて 画 像 ファイルの 並 び 順 を 変 更 することができます 並 び 順 を 変 更 するには 画 像 ファイル 名 を 選 択 し [ 最 初 ] [ 上 ] [ 下 ] [ 最 後 ] などをクリックします 6.[ 次 へ]をクリックします [アニメーション ウィザード ボックスが 表 示 されます (フレーム 位 置 の 指 定 )]ダイアログ つづく -15-
7.アニメーションに 使 用 する 画 像 の 位 置 合 わせを 指 定 し [ 次 へ] をクリックします ここでは 中 央 揃 えにしたいので 中 央 のアイコンをクリックします [アニメーション ウィザード ( 繰 り 返 し/ 表 示 時 間 の 指 定 )]ダイア ログボックスが 表 示 されます 8.アニメーションの 繰 り 返 し 回 数 と アニメーションを 構 成 する 各 画 像 (これを フレーム と 呼 びます)の 表 示 時 間 を 指 定 して [ 次 へ]をクリックします ここでは[ 無 限 ]を 選 択 します フレームの 表 示 時 間 は[ 500 ]ミ リ 秒 のままにしておきます [アニメーション ウィザード (アニメーションのプレビュー)]ダイア ログボックスが 表 示 されます 9. をクリックしてアニメーションをプレビューで 確 認 します 10.[ 完 了 ]をクリックします フレームの 表 示 時 間 などを 変 更 したい 場 合 は [ 戻 る]をクリックして 前 の 画 面 に 戻 り 変 更 します newimage というタイトルのアニメーション ウィンドウが 表 示 され アニメーションを 構 成 する 画 像 が 一 覧 表 示 されます 11.メニューバーから[ファイル- 名 前 を 付 けて 保 存 ]を 選 択 します [ 名 前 を 付 けて 保 存 ]ダイアログボックスが 表 示 されます 12.アニメーション GIF ファイルを 保 存 する 場 所 とファイル 名 を 指 定 して [ 保 存 ]をクリックします ここまででウェブ アニメーターの 作 業 はいったん 終 わりなので ウェブ アニメーターを 終 了 します 13.メニューバーから[ファイル-アプリケーションの 終 了 ]を 選 択 し ます 次 に 作 成 したアニメーション 画 像 をホームページに 挿 入 してみ ましょう 操 作 14. 以 降 の 操 作 はホームページ ビルダーで 行 い ます 14.ページを 開 き アニメーション 画 像 を 挿 入 したい 位 置 にカーソ ルを 移 動 します 15.ナビメニューから[ 写 真 や 画 像 の 挿 入 -ファイルから]を 選 択 し ます [ 開 く]ダイアログボックスが 表 示 されます つづく -16-
16. 作 成 したアニメーション GIF ファイルのファイル 名 を 選 択 し [ 開 く]をクリックします アニメーション GIF ファイルが 挿 入 されます 画 像 の 左 上 には アニメーションを 表 す マークが 表 示 されます! 注 意 [ページ 編 集 ] タブでは アニメーションの 動 きは 確 認 できません 17.かんたんナビバーの[ページの 保 存 ]をクリックして 上 書 き 保 存 または 名 前 を 付 けて 保 存 します 18.[プレビュー]タブをクリックして アニメーションの 動 きを 確 認 し ます 19. 確 認 が 終 わったら[ページ 編 集 ]タブをクリックして 画 面 を 戻 し ておきます -17-
3.3.Flash タイトルを 作 成 して 挿 入 する New! 画 像 や 音 声 さまざまな 効 果 を 組 み 合 わせた Flash タイトルを 使 うと ページが 華 やかで 目 を 引 くものになります ここでは 複 数 の 画 像 がスライドショーのように 切 り 替 わるバナーを 作 成 して ページに 挿 入 してみましょう! 注 意 Flash タイトルを 表 示 するには Adobe Flash Player 10 以 上 が 必 要 です Flash タイトルとは ホームページ ビルダーの Flash タイトル 機 能 を 使 って 作 成 した Flash 形 式 のコンテンツのことです Flash 形 式 のコンテンツは Adobe 社 が 提 供 するインターネット コンテンツおよびアプリケーション 開 発 用 のプログラム Flash を 使 って 作 成 したファイルの 形 式 です 独 自 のファイル 形 式 を 持 っており 画 像 音 声 さまざまな 効 果 を 組 み 合 わせて 表 現 力 豊 かなコンテンツを 作 成 することができます Flash タイトルを 作 成 すると 作 成 されるファイル Flash タイトルを 作 成 すると flashcontents という 名 前 の swf 形 式 ファイル/ xml 形 式 ファイルが 作 成 されます ファイル 名 は 編 集 中 のページを 保 存 するときに 表 示 される[ 素 材 ファイルをコピーして 保 存 ]ダイアログボックスで 変 更 することができま す 1.ページを 開 き Flash タイトルを 挿 入 したい 位 置 にカーソルを 移 動 します 2.ナビメニューから[ 写 真 や 画 像 の 挿 入 -Flash タイトル]を 選 択 し ます [ Flash タイトルの 挿 入 ]ダイアログボックスが 表 示 されます 3.[ 画 像 ]タブをクリックし [ 追 加 ]をクリックして 表 示 されるメニュ ーから[ファイルから]を 選 択 します [ファイルを 開 く]ダイアログボックスが 表 示 されます [ 素 材 集 から]を 選 択 して ファイルを 指 定 することもできます 4. 表 示 する 画 像 を 選 択 して [ 開 く]をクリックします 一 覧 に 選 択 した 画 像 が 表 示 されます 5. 操 作 3.~ 4.を 繰 り 返 して Flash タイトルに 使 うすべての 画 像 を 追 加 します つづく -18-
6.[ 効 果 ]タブをクリックして [ 効 果 ]から Flash タイトルの 画 像 効 果 を 選 択 します 必 要 に 応 じて [ 効 果 パターン]の 右 端 の をクリックし 効 果 のパターン を 選 択 します [ 効 果 ]で[ 効 果 なし]を 選 択 した 場 合 は 淡 色 表 示 され ます 最 初 に 表 示 される 画 像 には 効 果 はかかりません 2 番 目 以 降 の 画 像 が 表 示 されるときに 設 定 した 効 果 がかかります 7.[ 効 果 時 間 ]で 効 果 をかける 時 間 を 設 定 します 8.[ 画 像 表 示 時 間 ]で Flash タイトルの 画 像 を 静 止 して 表 示 す る 時 間 を 設 定 します 9.[リンク BGM ]タブをクリックし [リンク]に Flash タイトルをクリ ックしたときのリンク 先 URL を 設 定 します 10.[ 表 示 設 定 ]タブをクリックし [ 表 示 サイズ]で Flash タイトル のサイズを 選 択 します ここでは[ 画 像 の 最 大 サイズに 合 わせる]を 選 択 します [サイ ズを 指 定 する]を 選 択 した 場 合 幅 と 高 さを 指 定 します [プレビュー]で[ 実 際 のサイズで 確 認 ]をクリックすると ページに 挿 入 される Flash タイトルのサイズを 確 認 できます 11.[ 繰 り 返 し 再 生 する]をオンにします 12. 右 側 の[プレビュー]で[ 再 生 ]をクリックして Flash タイトルの 動 作 を 確 認 します 13.[ OK ]をクリックします ページのカーソル 位 置 に Flash タイトルが 挿 入 されます 14.[プレビュー]タブをクリックして Flash タイトルの 動 作 を 確 認 します Flash タイトルを 編 集 する Flash タイトルを 選 択 して かんたんナビバーの[ Flash タイトルの 編 集 ]をクリックします -19-
Flash タイトルに 文 字 を 表 示 する Flash タイトルの 画 像 上 に 文 字 を 表 示 するには 次 の 操 作 を 行 います ここでは すでにページに Flash タイトルが 挿 入 され ているものとして 説 明 します 1. Flash タイトルを 選 択 して かんたんナビバーの[ Flash タイトルの 編 集 ]をクリックします [ Flash タイトルの 編 集 ]ダイアログボックスが 表 示 されます 2.[ 画 像 ]タブの 一 覧 から 文 字 を 表 示 したい 画 像 を 選 択 して[ 編 集 ]をクリックします [ 画 像 の 効 果 設 定 ]ダイアログボックスが 表 示 されます 3.[ 文 字 ]タブをクリックして [ 文 字 枠 の 追 加 ]をクリックします [プレビュー]に 文 字 枠 が 追 加 されます 4.[ 文 字 枠 ]に 文 字 を 入 力 します 必 要 に 応 じて 大 きさやスタイル 文 字 色 を 設 定 します 5.[ 効 果 ]の 一 覧 から 文 字 に 付 ける 効 果 を 選 択 します 必 要 に 応 じて [ 効 果 パターン]の 右 端 の をクリックし 効 果 のパターンを 選 択 します [ 効 果 ]で[ 効 果 なし]を 選 択 した 場 合 は 淡 色 表 示 されます 6.[ 効 果 時 間 ]で 効 果 をかける 時 間 を 設 定 します 7.[ 開 始 時 間 ]で 画 像 が 表 示 されてから 何 ミリ 秒 後 に 文 字 の 効 果 を 開 始 するのかを 設 定 します 8.[ OK ]をクリックします [ Flash タイトルの 編 集 ]ダイアログボックスに 戻 ります 9.[ OK ]をクリックします 複 数 の 画 像 にそれぞれ 別 のリンク 先 を 設 定 する Flash タイトルで 使 っている 複 数 の 画 像 にそれぞれ 別 のリンク 先 を 設 定 したい 場 合 は 次 の 操 作 を 行 います ここでは すでに ページに Flash タイトルが 挿 入 されているものとして 説 明 します 1. Flash タイトルを 選 択 して かんたんナビバーの[ Flash タイトルの 編 集 ]をクリックします [ Flash タイトルの 編 集 ]ダイアログボックスが 表 示 されます 2.[ 画 像 ]タブの 一 覧 から リンク 先 を 設 定 したい 画 像 を 選 択 して[ 編 集 ]をクリックします [ 画 像 の 効 果 設 定 ]ダイアログボックスが 表 示 されます 3.[リンク BGM ]タブをクリックして [リンク]にリンク 先 の URL を 設 定 します 4.[ OK ]をクリックします [ Flash タイトルの 編 集 ]ダイアログボックスに 戻 ります 5.[ OK ]をクリックします -20-
3.4.iPhone/iPad タイトルを 作 成 して 挿 入 する New! iphone や ipad でページを 見 たときに 表 示 できる 動 画 のようなバナーやタイトルを 作 成 します ここでは 複 数 の 画 像 がスライドショーのように 切 り 替 わるバナーを 作 成 して ページに 挿 入 しましょう iphone/ipad タイトルとは ホームページ ビルダーの iphone/ipad タイトル 機 能 を 使 って 作 成 したコンテンツで JavaScript のライブラリーである JQuery で 作 成 されています 華 やかな 効 果 のバナーはページに 欠 かせないものです iphone/ipad タイトルは JQuery 形 式 で 画 像 や 効 果 をさまざまに 組 み 合 わせているため iphone や ipad でも 動 画 のようなバナーやタイトルが 表 示 できます 1.ページを 開 き iphone/ipad タイトルを 挿 入 したい 位 置 にカーソ ルを 移 動 します 2.ナビメニューから[ 写 真 や 画 像 の 挿 入 -iphone/ipad タイトル] を 選 択 します [ iphone/ipad タイトルの 挿 入 ]ダイアログボックスが 表 示 されま す 3.[ 画 像 ]タブをクリックし [ 追 加 ]をクリックして 表 示 されるメニュ ーから[ファイルから]を 選 択 します [ファイルを 開 く]ダイアログボックスが 表 示 されます [ 素 材 集 から]を 選 択 して ファイルを 指 定 することもできます 4. 表 示 する 画 像 を 選 択 して [ 開 く]をクリックします 一 覧 に 選 択 した 画 像 が 表 示 されます 5. 操 作 3.~ 4.を 繰 り 返 して iphone/ipad タイトルに 使 うすべて の 画 像 を 追 加 します 6.[ 効 果 ]タブをクリックして [ 効 果 ]の 一 覧 から iphone/ipad タ イトルの 画 像 効 果 を 選 択 します 最 初 に 表 示 される 画 像 には 効 果 はかかりません 2 番 目 以 降 の 画 像 が 表 示 されるときに 設 定 した 効 果 がかかります 7.[ 効 果 時 間 ]で 効 果 をかける 時 間 を 設 定 します 8.[ 画 像 表 示 時 間 ]で iphone/ipad タイトルの 画 像 を 静 止 して 表 示 する 時 間 を 設 定 します つづく -21-
9.[リンク]タブをクリックし [リンク]に iphone/ipad タイトルをクリ ックしたときのリンク 先 URL を 設 定 します 10.[ 表 示 設 定 ]タブをクリックし [ 表 示 サイズ]で iphone/ipad タイトルのサイズを 選 択 します ここでは[ 画 像 の 最 大 サイズに 合 わせる]を 選 択 します [サイ ズを 指 定 する]を 選 択 した 場 合 幅 と 高 さを 指 定 します [プレビュー]で[ 実 際 のサイズで 確 認 ]をクリックすると ページに 挿 入 される iphone/ipad タイトルのサイズを 確 認 できます 11.[ 繰 り 返 し 再 生 する]をオンにします 12. 右 側 の[プレビュー]で[ 再 生 ]をクリックして iphone/ipad タ イトルの 動 作 を 確 認 します 13.[ OK ]をクリックします ページのカーソル 位 置 に iphone/ipad タイトルが 挿 入 されま す 14.[プレビュー]タブをクリックして iphone/ipad タイトルの 動 作 を 確 認 します! 注 意 ページに 挿 入 した iphone/ipad タイトルの 設 定 内 容 は 編 集 できません 編 集 したい 場 合 は iphone/ipad タイトルを 削 除 し 作 成 しなおします 複 数 の 画 像 にそれぞれ 別 のリンク 先 を 設 定 する iphone/ipad タイトルで 使 っている 複 数 の 画 像 にそれぞれ 別 のリンク 先 を 設 定 したい 場 合 は [ iphone/ipad タイトルの 挿 入 ] ダイアログボックスの[ 画 像 ]タブの 一 覧 から リンク 先 を 設 定 したい 画 像 を 選 択 して[ 編 集 ]をクリックします [ 画 像 のリンク 編 集 ]ダイアログボックスで [リンク]にリンク 先 の URL を 設 定 します iphone/ipad タイトルで 作 成 されるファイル iphone/ipad タイトルを 作 成 すると 以 下 のファイルが 自 動 的 に 作 成 されます 実 行 ファイル: jquery.min.js jquery.cycle.all.min.js hpb_iptitle.js 設 定 ファイル: iptitle.xml *1 *1 実 際 のファイル 名 は 格 納 先 のフォルダー 内 で 重 複 しない 名 前 に 変 更 されます 上 記 のファイルや 指 定 した 画 像 ファイル*2 の 保 存 先 は 編 集 中 のページを 保 存 するときに 表 示 される[ 素 材 ファイルをコピー して 保 存 ]ダイアログボックスで 変 更 することができます *2 [ iphone/ipad タイトルの 挿 入 ]ダイアログボックスの 一 覧 で 一 番 上 に 追 加 した 画 像 は [ 素 材 ファイルをコピーして 保 存 ]ダ イアログボックスで 2 つ 表 示 されます -22-
3.5. 画 像 にロールオーバー 効 果 を 加 える ロールオーバー 効 果 とは ブラウザーに 表 示 された 画 像 の 上 にポインターを 置 くと 別 の 画 像 に 置 き 換 わり ポインター を 画 像 の 外 に 出 すと 元 の 画 像 に 戻 る 効 果 です ロールオーバー 効 果 を 加 えた 画 像 をページに 挿 入 してみましょう 1.ページを 開 き ロールオーバー 画 像 を 挿 入 したい 位 置 にカーソ ルを 移 動 します 2.ナビメニューから[ 写 真 や 画 像 の 挿 入 -ロールオーバー 効 果 ]を 選 択 します [ 画 像 のロールオーバー 効 果 ウィザード ( 通 常 時 の 画 像 の 指 定 )]ダイアログボックスが 表 示 されます 3.まず 通 常 時 の 画 像 を 指 定 します ここでは[ 素 材 集 から]をクリ ックします [ 素 材 集 から 開 く]ダイアログボックスが 表 示 されます 4. 使 いたい 画 像 を 選 択 して [ 開 く]をクリックします アニメーションは 選 択 できません ここでは[ボタン]フォルダーにある 封 筒 の 画 像 を 選 択 します 選 択 した 画 像 がダイアログボックスに 表 示 されます 5.[ 次 へ]をクリックします [ 画 像 のロールオーバー 効 果 ウィザード (ポインターが 上 にきた ときの 画 像 の 指 定 )]ダイアログボックスが 表 示 されます つづく -23-
6.ポインターを 上 に 置 いたときの 画 像 を 指 定 します 指 定 には 2 とおりの 方 法 があります 1 つは 通 常 時 の 画 像 とは まったく 別 の 画 像 を 使 用 する 方 法 で もう 1 つは 通 常 時 の 画 像 に 特 別 な 効 果 を 加 えた 画 像 を 作 成 して 使 用 する 方 法 です ここでは[ 通 常 時 の 画 像 に 効 果 を 加 えたものを 使 用 する] を 選 択 し [ 効 果 の 選 択 ] をクリックします [ 効 果 の 選 択 ]ダイアログボックスが 表 示 されます 7. 画 像 に 加 えたい 効 果 を 選 択 します [ 効 果 ]から 効 果 の 種 類 を 選 択 し [プレビュー]の 画 像 の 上 にポインタ ーを 置 くと ロールオーバーの 効 果 を 確 認 することができます 8.[ OK ]をクリックします 操 作 6. のダイアログボックスに 戻 ります 9.[ 次 へ]をクリックします 画 像 のロールオーバー 効 果 ウィザード (その 他 の 設 定 )]ダイア ログボックスが 表 示 されます 10.ロールオーバー 画 像 にリンクを 設 定 します ここでは 封 筒 の 画 像 をクリックするとのメールを 送 れるようにす るので [リンクの 指 定 ]に mailto: ( はメールア ドレス)と 入 力 します 通 常 のページへのリンクも 設 定 できます またメールリンクは ロールオ ーバー 画 像 を 作 成 後 ナビメニューから[リンクの 挿 入 ]を 選 択 して リン ク 作 成 ウィザードで[メールを 送 れるリンクを 作 成 する]を 選 択 しても 作 成 することができます 11. 通 常 時 の 画 像 とポインターを 上 に 置 いたときの 画 像 を 入 れ 替 えたい 場 合 は [ 入 れ 替 え]をクリックします 左 右 の 画 像 が 入 れ 替 わります 12.[ 次 へ]をクリックします [ 画 像 のロールオーバー 効 果 ウィザード ( 他 の 場 所 の 画 像 の 交 換 )]ダイアログボックスが 表 示 されます 13.そのまま[ 完 了 ]をクリックします -24-
14.ロールオーバー 画 像 がページに 挿 入 されます 画 像 の 左 上 には ロールオーバー 画 像 を 示 す マークが 表 示 されます! 注 意 挿 入 されたロールオーバー 画 像 は [ページ 編 集 ] タブでは 動 作 しま せん 15.ページを 上 書 き 保 存 します 16. 画 像 の 動 きを 確 認 します [プレビュー]タブをクリックして ロールオーバー 画 像 の 上 にポイ ンターを 置 き 画 像 が 置 き 換 わることを 確 認 します さらに 画 像 をクリックすると メールソフトが 起 動 することを 確 認 します 17.プレビューでの 確 認 が 終 わったら [ページ 編 集 ]タブに 戻 して おきます -25-