ホームページ復習ノート No38 2008.02.26 日ウエブアートデザイナーで作る[見出し(タイトルバナー)] フアイルの中で[見出し]は、大変大きな役割を持っています。ビルダーでは見出しとして[ロゴの作成]が出来ますが、単にロゴだけでなく、枠を決めて作る見出し(タイトルバナー)の方が、インパクトも強くフアイルの印象度を強めます。見出しは、色々なソフトを使って作成出来ますが、今回はホームページビルダーの[ウェブアートデザイナー] を使って作成する方法を説明します。ホームページのタイトルを決めた後色々と試作品を作成して見てください。タイトルの他にも[背景色]などを含めたフアイル全体像とのバランスなども考慮しながら進めてください。尚、画像を背景にした[見出し]については、セミナーでも取り上げた三上久美子さんのレシピを参考にしてお試し下さい。図1 ① ホームページビルダーを起動してメニューバーの[ツール]→[ウエブアートデザイナーの起動]をクリックします。 ② 白い画面(キャンバスと呼びます)が表示されますが、この画面が小さい場合はメニ 1 ューバーの[編集]→[キャンバスの設定(下から二番目)を選択してクリックしてください。 [キャンバスの設定]画面が表示されます。今回は 720×120 ピクセルのタイトルを ③ 作りますのでキャンバスの[幅]を 800、[高さ]を 480 としてください。数字を書き込むと画面が大きくなります ★ ご自分が作る大きさを決めてください。720×120 は例示です。 ④ 左サイドの[操作ツールバー]の中から[四角(右列の上から三番目)] をクリックしてマウスでキャンバス上に長四角の枠を作ります。(図 1 参照) 図2 ⑤ キャンバス上に書かれた長四角の枠を[右クリック]して、表示された画面の[オブジェクトの編集](一番上にあります)を選択します。 (註) オブジェクトの編集の左頭にアイコンが表示されていますが、これと同じアイコンが上段のツールバーの中にあります。これをクリツクしても結果は同じです。 ⑥ オブジェクトの編集を選択すると[図形の編集]画面が表示されます。ここには左側から[線][線の色][塗り潰しの色][影][情報]という項目が並んでいます。最初に[情報] を選択します。[位置とサイズ]で[幅]を 720、[高さ]を 120 とします。位置の XY 座標は関係ありません。 *[縦、横比保持のチェックをはずします。][透明度は 0 のままとします] 2 ⑦ 次に[塗り潰しの色]を選択します。(図 2 参照)。ここには色の種類として左側から[単色][グラデーション][テクスチャー]の三種類がありますのでお好きな種類を選択してください。因みに[グラデーション]を選択すると[autumn]から[yellow04]まで多数のパターンが表示されますのでここからパターンを選択します。選択したパターンをクリツクするとキャンバスの背景色が指定の色に変わります。オリジナルな背景を希望する時は、一覧の下にある[その他]を選択してください。ここをクリツクすると[グラデーションの作成]画面が表示されます。この画面の上段に[色の設定]があり、左側が[始点色]、右側が[終点色]です。此処をクリツクして色を選択して調整します。色が決まったら、左サイドにある[形状]からお好きなパターンを選択してください。 [OK]を押すと選択した色と形状が表示されます。 ⑧ 次は[文字の挿入]です。(図 3 参照)左サイドの[操作ツールバー]の中の[A]を選択すると下に二つの四角(上は全景色、下は背景色)が表示されますので、上の四角を押して文字色を決め、下の[フオントフエイス]の三角ボタンを押してお好きな書体を選択、更に[フオントサイズ]の三角ボタンでサイズを決めます。下にある[B]は太字、[I]は斜体字の表示に使います。 3 図3 ⑨ 上の設定に従い文字を書き込みますが、これを編集する場合は文字列を右クリックしてください。表示された画面の[オブジェクトの編集(一番上)]をクリックします。そうすると｛ロゴ編集｝画面が表示されますので、この画面の[フオント名][サイズ] を設定し、この後必要に応じて[縁取り][効果]を操作して編集してください。 4 ⑩ 出来上がったバナーの保存はメニユーバー[フアイル]→[Web 用保存ウイザード]を使って行います。(ツールバーのアイコンからも結果は同じです)。 ⑪ [Web 用保存ウイザード]が表示されます。上段にある[選択されたオブジェクトを保存する]に○を付けます。[指定]ボタンを押します。次へ進みます。 ⑫ [オブジェクトの選択]画面が表示されます。この画面で[オプションで重なっているものをまとめて表示]に○を付けて次に進みます。 ⑬ 保存形式では[GIF]を選択して次へ進みます。次の画面もそのまま次に進みます。 ⑭ [ホームページビルダーに貼り付ける][フアイルに保存する]の中からフアイルを選択して完了ボタンを押します。保存方法として[保存する場所][ファイル名]を書いて保存します。この場合ファイル名は英数半角でお願いします。この保存した gif を貼り付けてすべて完了です。 ★ マイドキュメントの中に専用のフオルダ(名前は作成するホームページの名前など)を作り、html フアイル、使用する画像などと一緒に保存してください。 ★ おわかりにならない点がありましたらご遠慮なくお問い合わせください。文責今井 5