各項目の頭に○印のあるものはこのコース独自のものであり、◆ 印のあるものはテキスト・ブックからの引用した項目です。

３−１デジカメ写真のパソコンへの取り込とウェブ・ページへの挿入
　　　　（テキストの第１０章Step２）

写真、イラスト、アニメーション（動画）などのデジタル・データを「画像」または「画像ファイル」といいます。
インターネットで扱われる一般的「画像」は「ＧＩＦ形式」、「ＪＰＥＧ形式」、及び「ＰＮＧ形式」のファイルで、
世間一般でよく使われている「画像処理ソフト」である「PhotoshopElement」や「PhotoDraw」等で出力される
ファイル形式はそのままではホームページ作成には使うことが出来ません。

　　＊ＧＩＦ：色数の少ないイラストなどに適している形式で、ファイル・サイズが小さく、特定の色を透明に
　　　　することが出来ます。

　　＊ＪＰＥＧ：色数を１６７０万まで表現でき、写真やグラデーションのあるイラストなどに使うと効果的
　　　　です。

　　＊ＰＮＧ：比較的新しいファイル形式で、特定の色を透明に出来るなどGIF形式と似た特徴を持って
　　　　いながらGIF形式より多くの色を表現出来ます。しかし、古いブラウザーでは対応していない
　　　　ものもありますので注意する必要があります。

　＊　ＵＳＢ接続ケーブル：デジカメを購入すると同梱されているＵＳＢ接続ケーブルでパソコンに繋ぐと、
　　　　デジカメのメモリーがマイコンピュータに付いていている「リムーバブル・ディスク」として扱われるので、
　　　　コピー・貼り付け操作で取り込むことが出来る。

　＊　Media Ｃａｒｄ Ｒｅａｄｅｒ/writer：　ＳＤメモリー、フラッシュ・メモリー、ＸＤピクチャー・カードなどの数種
　　　　のデジカメ用メモリー・カードのデータを読み込んだり、書き込みが出来る機器を通してパソコンに
　　　　読み込むことが出来る。

デジカメ写真の取り込場所：　通常、「マイ　ピクチャー」フォルダーの中に自分で覚えやすい「デジカメ写真」の
ようなフォロダーを作っておき、デジカメから読み込む写真はそこに取り込んでおく。

　＊　「ホームページ・ビルダー１１基礎」の中のタウン情報（town.html）をスタンダード・モードで開く

　　　　メニューの挿入　→　写真　→　写真挿入ウィザード　→　「画像の指定」を「ファイルから」　→
　　　　「ファイルの場所」が「タウン情報」になっていることを確認してから　→　画像ファイル一覧から
　　　　「hanami.jpg」を選択　→　「写真を横のプリビューで確認」　→　開く　→　「次へ」　→
　　　　サイズ指定（横　４８０ｐｘｌ）　→　「次へ」　→　画像補正（ワンタッチ補正）ニチェック　→　
　　　　「次へ」　→　「縁取り効果」の一覧から「paper」を選択　→　「完了」

（１）効果の設定：　ＪＰＥＧ画像をくっきりさせたり、ぼやかしたりすることが出来ます。
　　　画像を右クリック　→　「画像の編集」　→　「画像の編集」　→　「効果」ので「シャープ」選択
　　　→　ＯＫ

（２）画像の表示サイズの変更：　ページのレイアウトに合わせて画像の表示サイズを調整する
　　　画像をクリック　→　右下の■ハンドルをポイントして、斜め矢印をドラッグして大きさを変える。

（３）表示サイズの保存
　　　画像を右クリック　→　「画像の編集」　→　「画像の編集」　→　「保存時オプション」の
　　　「表示サイズの保存」に　を入れる。　この場合、実際のファイル・サイズは変更になりません。

（４）ＧＩＦファイルの透明化
　　ＧＩＦ形式の画像ファイルは、使われている色を１色だけ透明の出来ます。
　　従って、画像ファイルの背景色を透明にして、ウェブ・ページの背景色となじませることが出来ます。
　　見出しの左端の「sakura.gif」ファイルを右クリック　→　「画像の編集」　→　「画像の編集」　→
　　「透明化」ボタンをクリック　→　「マウス・ポインター」がスポイト形に変わる　→　画像の透明化
　　する部分（背景）をクリック　→　背景部分が透明化されて、ページの背景と同じ色になる。

（５）画像の編集後のウェブ・ページと画像の保存
　　ウェブ・ページを「上書き保存」　→　「素材ファイルをコピーして保存ダイアログ」が表示される　→
　　画像ファイル名が表示される　→　「参照」ボタンをクリック　→　ウェブ・サイトのフォルダ内の所定の
　　場所（フォルダー）を指定し　→　「保存場所にファイルヲコピー」にを入れ　→　「保存」ボタン

　　《注意》素材ファイルをウェブ・サイトの外部から取り込み編集した場合は、上のように「編集後」の
　　　　　　　画像はファイルのウェブ・サイト内の保存場所を指定しておかないと、取り込元の画像
　　　　　　　ファイルが編集後の画像ファイルで置き換えられる可能性があります。

３−２　ウェブアート・デザイナーによる画像処理　（テキストの第１１章Ｓｔｅｐ１〜Ｓｔｅｐ４）

ウェブアート・デザイナーはホームページ・ビルダーに付属している画像処理のソフト・ウェアーで、
通常Photoshop Elements等で処理してい作業に代わって、次のような作業に使われます。

　＊　デジカメやスキャナーで取り込んだ写真の明るさやコントラストの調整や影をつけたりする
　＊　図形に効果を加えて、ホームページに使われるクリエーティブなボタンを作成する
　＊　文字に効果を加えたり、図形や画像などと組み合わせて、ホームページに使われるクリエーティブな
　　　ロゴを作成する。

　

「ホームページ・ビルダー」の起動中：
　　メニューの「ツール」　→　「ウェブ・ブアート・デザイナーの起動」をクリックする。

「ウェブアート・デザイナー」の「閉じる」（X）をクリックする。

　　

ウェブアート・デザイナーの画面構成

�@テンプレート・ギャラリー：

　　以下の２つのタブから２種類の素材集の素材をキャンバスに挿入出来ます。
　　　　＊　「ウェブ・アート素材」タブ：　ウェブアート・デザイナー専用の素材集から
　　　　＊　「素材」タブ：　「ホームページ・ビルダー」の素材集から

�A操作ツール・バー：

　　図形を描いたり、切り抜いたりするツールが用意されています。

�Bキャンバス

　　画像を編集する作業領域です。

�Cオブジェクト・スタック

　　編集中の素材を一覧で表示します。

　　オブジェクトには：

　　　　＊　図形（線で描かれた画像）、
　　　　＊　ロゴ（文字に効果を加えた画像）、
　　　　＊　ボタン（図形に効果を加えてボタン状にした画像）、
　　　　＊　フォトフレーム（写真などの外枠を飾る画像）、
　　　　＊　クリップ・アート（Windowsのメタ形式の画像）
　　　　＊　イメージ（その他のGIF,JPRG,TIF、BMP,PNG形式などの画像）

キャンバス以外の各々の領域は、メニューの「表示」から表示・非表示の切り替えが出来ます。

写真の編集（画像の補正・加工）

（１）画像のキャンバスへの読み込み
　　　メニューの「編集」　→　「ファイルから貼り付け」　→　「ファイルから貼り付けダイアログ」表示
　　　→　「ファイルの場所」のをクリックして、「ホームページ・ビルダー１１基礎」を選択　→
　　　「開く」　→　その中のファイル一覧から「あじさいjpg」を選択　→　「開く」　→　
　　　キャンバスに画像が貼り付きます。

　　　ファイル選択の折、「ShiftKey」を押しながら連続した複数のファイルも選択できます。
　　　　　　　　　　　　　　「CtrlKey」を押しながら連続しない複数のファイルも選択できます。

（２）画像の回転

　　対象の画像をクリックして画像の外枠とハンドル■が表示されているのを確認する　→
　　選択された画像を右クリッく　→　「ショートカット・メニュー」がプルダウン　→　「回転」ポイント
　　→　「右へ９０度」をクリック　→　画像が回転する　→　画像をポイントして、キャンバスからは
　　み出た部分が見えるようにドラッグする。

（３）画像の色調補正

　　画像の「色合い」、「明度（明るさ）」、「彩度（鮮やかさ）」、「コントラスト（明暗の差）」などを調整
　　できます。

　　対象の画像をクリックして画像の外枠とハンドル■が表示されているのを確認する　→
　　メニューの「ツール」　→　「色調補正」　→　「色調補正ダイアログ」表示　→　「プレビュー」に
　　→　「色調補正ダイアログ」のタイトル・バーをドラッグして、「キャンバス」が見えるようにする　→
　　「明るさ」の「明」を１回クリック、「色の鮮やかさ」の「濃」を４回クリック　→　OK

　　効果パレットの利用：
　　メニューの「ツール」　→　「効果」　→　「効果パレットダイアログ」表示　→　「一覧」から効果選択
　　→　「適用」

（４）画像の切り抜き

　　　「あじさい」の画像の一部を長方形に切り抜きます。
　　　操作ツール・バーの「切り抜き」ボタンの▼をクリックすると、切り抜く形状が指定できます。
　　　「切り抜き」ボタンをクリック　→　「キャンバスを含まない」と「輪郭のぼかし」０に設定　→
　　　「斜めにドラッグ」して切り抜く範囲を指定　→操作ツール・バーの最下端の「切り抜き」ボタン
　　　をクリック　→　切り抜かれた部分をドラッグ　→　切り抜かれた元の画像をクリック　→　Delete

（５）画像の影効果

　　　効果を使って画像に影を付けます。

　　　対象の画像をクリックして画像の外枠とハンドル■が表示されているのを確認する　→
　　　メニューの「ツール」　→　「影効果」　→　「影効果ダイアロ」表示　→　「X座標」「Y座標」
　　　共に「８」設定、「色」は基本色一覧から「黒」を選択　→　「透明度」を１０に、「ぼかし」を２
　　　に設定　→　「プリビュー」ボタンで確認　→　OKボタン。

（６）画像のウェブ・ページ素材への変換

　　　ウェブアート・デザイナーで編集した画像はその侭保存するとこのソフト独自の
　　　「MIF形式（拡張子が.mif）」になって、ホームページでは認識されないので、保存する際に
　　　「GIF形式」か「JPEG形式」　のファイルに変換しておかなければなりません。

　　　対象の画像をクリックして画像の外枠とハンドル■が表示されているのを確認する　→
　　　メニューの「ファイル」　→　「Ｗｅｂ用保存ウィザード」　→　「Ｗｅｂ用保存ウィザード・ダイアログ」
　　　→　「選択されたオブジェクトを保存する」　を選択　→　「次へ」　→　「ＪＰＲＧ」を選択
　　　→　「次へ」　→　「背景色」のをクリックして、「キャンバスの色」選択　→　設定前後の画像
　　　を確認して　→　「次へ」　→　「ファイルに保存」を選択　→　「名前を付けて保存ダイアログ」
　　　→　保存場所のフォルダを指定して　→　「開く」　→所期のファイル名を入力　→　「保存」

ボタンの作成

　　図形に効果を加えてボタン状にした画像ファイルを「ボタン」といい、「トップに戻る」「次に進む」
　　「前に戻る」などの「ボタン」を配置してリンクを設定しておくと、ウェブ・ページを訪問する人にとって、
　　ウェブ・サイト内の移動が容易になります。

　　メニューの「オブジェクト」　→　「ボタンの作成」　→　「ボタンの作成のウィザード（形状）」表示　→
　　「ボタンの形状一覧」から（circle02）を選択　→　「次へ」　→　「ボタンの作成のウィザード（色）」表示
　　「種類の単色」　→　「色一覧から（紺色）」を選択　→　「完了」　

　　サイズの変更には：

　　対象の画像をクリックして画像の外枠とハンドル■が表示されているのを確認する　→
　　右クリック　→　プルダウン・メニューから「オブジェクトの編集」　→　「ボタンの編集」　→　「情報タグ」
　　「幅と高さ」をピクセルで指定　→　「ボタンの編集ダイアログ」の閉じる（Ｘ）をクリック

　＊「ボタン」に文字を追加するには、「ロゴ作成ウィザード」を使います。

　　対象の画像（ボタン）をクリックして画像の外枠とハンドル■が表示されているのを確認する　→
　　メニューの「オブジェクト」　→　「ロゴの作成」　→　「ロゴの作成のウィザード（文字）」表示　→
　　ロゴにする文字（Ｔｏｐ）を入力　→　「フォント：ＭＳ　ＵＩ　Ｇｏｔｈｉｃ」、「サイズ：２０」、
　　「スタイル：ボールド」、「アンチエイリアス：チェック」　→　「次へ」→　
　　「ロゴの作成のウィザード（色）」表示　→　「単色」選択　→　色一覧から「白（）#ffffff」選択
　　→　「次へ」　→　「ロゴの作成のウィザード（縁取り）」表示　→　「種類一覧：なし選択」
　　→　「次へ」　→　「ロゴの作成のウィザード（文字効果）」表示　→　「種類一覧：なし選択」
　　→　「完了」

　＊「ボタン」に「文字」を整列させるには：
　　　「オブジェクト・スタック」状で：
　　　「ボタン」と「ロゴ」を「CTRLキー」を押しながら両方を選択　→　右クリック　→　「整列」　→
　　　「左右中央揃え」と「上下中央そろえ」

ウェブ・サイト上のボタンのデザインには統一性があったほうが美しく見えます。
例えは、「Ｔｏｐ」や「Ｎｅｘｔ」や「Ｂａｃｋ」などは、デザインが共通で文字の部分だけが異なるボタンが望ましいわけです。

このような場合は、先ず「Ｔｏｐ」のボタンを作っておいて、これを元に文字のロゴだけを「オブジェクトの編集」を利用し
て変えてゆけばよいわけです。

この場合注意を要することは、最初に作成した「Ｔｏｐ」のボタンをウェブアート・デザイナーで編集した画像をこのソフト
独自の「MIF形式（拡張子が.mif）」で保存しておいて、それを使わないと別のボタン用に再編集が出来ないことです。
一旦「ＧＩＦ」や「ＪＰＥＧ」に変換してしまったファイルは再編集に利用できないということです。

再編集には：元の「Ｔｏｐ」のボタンを「キャンバス」上で、メニューの「編集」で「コピー」→「貼り付け」で複製を作成して
おいて、その「ロゴ」の部分だけを「Ｂａｃｋ」に変えればよい訳です。

同じキャンバス上で、「ボタン」と「ロゴ」を同時に選択したり、別々に選択するには、
「ウェブ・アート・デザイナー画面」の右端の領域の「オブジェクト・スタック」を利用すると便利です。
これは、Ｐｈｏｔｏｃｈｏｐ等の「レイヤー表示領域」のようなものです。

完成されたボタンは、前に説明したように、「Ｗｅｂ用保存ウィザード」　を使って「ＧＩＦ形式」や「ＪＰＥＧ形式」に変換して、
保存しておかねばなりません。