イメージについて

様々なグラフィックファイル形式がありますが、Web ページでは、一般に GIF、JPEG、および PNG の 3 つのファイル形式が使用されます。GIF および JPEG 形式が最もサポートされており、大半のブラウザーで表示できます。

GIF(Graphic Interchange Format)

GIF ファイル形式は、最大 256 色を使用し、連続階調ではないイメージや、ナビゲーションバー、ボタン、アイコン、ロゴなどのカラーや階調を均一的に使用したイメージ、平板なカラーの領域を多く含むイメージの表示に最適です。

JPEG(Joint Photographic Experts Group)

JPEG ファイル形式は、約 100 万色のカラー情報を保持できるため、写真や連続階調の画像などに最適です。JPEG ファイルの画質が高いほど、ファイルサイズは大きくなり、ダウンロード時間が長くなります。イメージの画質とファイルサイズのバランスを調整するには、JPEG ファイルを圧縮します。

PNG(Portable Network Group)形式

PNG ファイル形式は、GIF ファイルのパテントフリーな代替ファイル形式で、インデックスカラー、グレースケール、および True Color イメージや、透明度のアルファチャネルをサポートしています。PNG は、Adobe® Fireworks® のネイティブファイル形式です。PNG ファイルでは、オリジナルのレイヤー、ベクター、カラー、およびドロップシャドウなどの特殊効果の情報がすべて保持されます。さらに、イメージ内のすべてのエレメントが編集可能な状態で保持されます。Dreamweaver で PNG ファイルと認識されるファイルは、.png ファイル拡張子が付いたもののみです。

イメージの挿入

Dreamweaver のドキュメントにイメージを挿入すると、HTML ソースコード内に、イメージファイルへの参照が生成されます。常に正しく参照されるようにするには、イメージファイルを現在のサイトに置く必要があります。Dreamweaver では、現在のサイトにイメージファイルがない場合、サイトにファイルをコピーするかどうかをたずねるメッセージが表示されます。

イメージを動的に挿入することもできます。動的イメージとは、頻繁に変更されるイメージのことです。例えば、バナー広告の交替表示システムでは、バナーのリストから 1 つのバナーが無作為に選択され、ページが要求されると、選択したバナーのイメージが動的に表示されます。

イメージを挿入した後、目の不自由な方のためにスクリーンリーダーにより読み取ることができるイメージタグのアクセシビリティ属性を設定できます。この属性は、HTML コードで編集できます。

イメージを挿入する方法のチュートリアルについては、「イメージの追加」を参照してください。

  1. ドキュメントウィンドウ内のイメージを表示する位置に挿入ポイントを置き、次のいずれかの操作を行います。

    • 挿入パネルの「一般」カテゴリ内で、イメージアイコン をクリックします。
    • 挿入パネルの「一般」カテゴリ内で「イメージ」ボタンをクリックし、イメージアイコンを選択します。挿入パネルに表示されているイメージアイコンを使用すると、アイコンをドキュメントウィンドウ(またはコードを扱っている場合はコードビューウィンドウ)にドラッグできます。
    • 挿入イメージを選択します。
    • アセットパネル(ウィンドウアセット)からイメージをドラッグし、ドキュメントウィンドウ内の目的の場所に配置します。次に、手順 3 に進みます。
    • ファイルパネルからイメージをドラッグし、ドキュメントウィンドウ内の目的の場所に配置します。次に、手順 3 に進みます。
    • イメージをデスクトップからドキュメントウィンドウ上の目的の場所に配置します。次に、手順 3 に進みます。
  2. ダイアログボックスが表示されたら、次のいずれかの操作を行います。
    • ファイルシステム」をクリックして、イメージファイルを選択します。
    • データソース」を選択して、動的イメージソースを選択します。
    • サイトとサーバー」ボタンをクリックして、いずれかの Dreamweaver サイトのリモートフォルダーからイメージファイルを選択します。
  3. 挿入するイメージまたはコンテンツソースが保存された場所を参照し、目的のイメージソースを選択します。

    保存していないドキュメントで作業している場合、Dreamweaver はイメージファイルへの参照 "file://" を生成します。サイト内でドキュメントを保存すると、Dreamweaver はその参照をドキュメント相対パスに変換します。

    注意:

    イメージを挿入すると、リモートサーバーにあるイメージ(ローカルハードドライブにはないイメージ)の絶対パスを使用できます。作業中にパフォーマンスが低下する場合は、コマンド/外部ファイルを表示をオフにして、デザインビューでのイメージ表示を無効にできます。

  4. 「OK」をクリックします。「環境設定」(編集環境設定)でイメージタグのアクセシビリティ属性ダイアログボックスをアクティブにしている場合は、このダイアログボックスが表示されます。

  5. 「代替テキスト」テキストボックスおよび「詳細(longdesc)」テキストボックスに値を入力して、「OK」をクリックします。
    • 「代替テキスト」ボックスに、イメージの名前または簡単な説明を入力します。スクリーンリーダーが、ここに入力した情報を読み上げます。入力文字数は 50 文字程度に制限します。説明が長い場合は、イメージについての詳細が記述されたファイルへのリンクを「詳細(longdesc)」テキストボックスに入力しておくことを検討してください。
    • 「詳細(longdesc)」ボックスには、Web ページのビジターがイメージをクリックしたときに表示されるファイルの場所を入力します。または、フォルダーアイコンをクリックして参照し、そのファイルを選択します。このテキストボックスでは、イメージに関連するファイル、またはイメージに関する詳細を記述したファイルへのリンクを指定します。

    注意:

    テキストボックスは、必要に応じて、一方のみまたは両方に入力できます。スクリーンリーダーは、イメージの代替属性を読み上げます。

    注意:

    Dreamweaver では、「キャンセル」をクリックするとイメージがドキュメント内に表示されますが、アクセシビリティタグや属性はこのイメージに関連付けられません。

  6. プロパティインスペクター(ウィンドウ/プロパティ)でイメージのプロパティを設定します。

イメージプロパティの設定

イメージプロパティインスペクターでイメージのプロパティを設定できます。イメージのプロパティが表示されない場合は、インスペクターの右下隅にある縮小の三角形をクリックします。

プロパティインスペクターで表示されたイメージのプロパティ
  1. ウィンドウプロパティを選択することにより、選択したイメージのプロパティインスペクターを表示します。

  2. サムネールイメージの下のテキストボックスを使用して、スワップイメージなどの Dreamweaver ビヘイビアーや、JavaScript、VBScript などのスクリプト言語を使用するときにイメージを参照できるような名前を入力します。
  3. 必要に応じてイメージのオプションを設定します。

    幅および高さ

    イメージの幅と高さをピクセル単位で指定します。これらのテキストボックスは、ページにイメージを挿入するときに Dreamweaver により自動的に元のサイズに更新されます。

    実際のイメージの幅および高さに一致しない「幅」および「高さ」の値を設定すると、ブラウザーでイメージが正しく表示されないことがあります (元の値に戻すには、「幅」および「高さ」テキストボックスのラベルをクリックするか、これらのテキストボックスに新しい値を入力したときに右側に表示される「イメージを元のサイズに戻す」ボタンをクリックします)。

    注意:

    これらの値を変更してイメージのインスタンスの表示サイズを調整することはできますが、ダウンロード時間は短縮されません。これは、ブラウザーはイメージのデータをすべてダウンロードしてからイメージのサイズを調整するからです。ダウンロード時間を短縮し、イメージのすべてのインスタンスが同じサイズで表示されるようにするには、イメージ編集アプリケーションを使ってイメージを拡大/縮小します。

    ソース

    イメージのソースファイルを指定します。フォルダーアイコンをクリックして、参照してソースファイルを選択するか、パスを入力します。

    リンク

    イメージのハイパーリンクを指定します。ファイルの指定アイコンをファイルパネルのファイルにドラッグするか、フォルダーアイコンをクリックし、ローカルサイトのドキュメントを参照して選択するか、URL を手動で入力します。

    代替

    テキスト専用ブラウザー、またはイメージを手動でダウンロードするように設定されたブラウザーの場合に、イメージの場所に表示される代用のテキストです。目の不自由な方がテキスト専用ブラウザーとスピーチシンセサイザを組み合わせて使用する場合には、テキストが読み上げられます。一部のブラウザーでは、ポインターをイメージの位置に置いたときにこのテキストが表示されます。

    マップ名とホットスポットツール

    ラベルを付けてクライアントサイドイメージマップを作成できます。

    ターゲット

    リンクされたページをロードするフレームまたはウィンドウを指定します。このオプションは、イメージが他のファイルにリンクされている場合にのみ使用できます。現在のフレームセットにあるすべてのフレームの名前がターゲットリストに表示されます。以下のターゲット名を選ぶこともできます。

    • _blank は、リンクされたファイルを新規のブラウザーウィンドウにロードします。

    • _parent は、リンクされたファイルを、リンクが含まれている親フレームセットまたはフレームのウィンドウにロードします。リンクを含むフレームがネストされていない場合は、リンクされているファイルは、ブラウザーウィンドウ全体にロードします。

    • _self は、リンクされたファイルを、リンクと同じフレームまたはウィンドウにロードします。このターゲットは初期設定であるため、通常は指定する必要はありません。

    • _top は、リンクされたファイルをブラウザーウィンドウ全体にロードして、すべてのフレームを削除します。

    編集

    環境設定/ファイルタイプエディターで指定したイメージエディターを起動して、選択イメージを開きます。

    オリジナルから更新

    Web イメージ(つまり Dreamweaver ページ上にあるイメージ)が元の Photoshop ファイルと一致していない場合、Dreamweaver によって元のファイルの更新が検知されると、スマートオブジェクトのアイコンの矢の部分が赤になります。デザインビューで Web イメージを選択して、プロパティインスペクターの「オリジナルから更新」ボタンをクリックするとイメージが自動的に更新され、元の Phothoshop ファイルに加えられた変更が反映されます。

    イメージの設定の編集

    イメージの最適化ダイアログボックスを開いて、イメージを最適化します。

    切り抜き

    選択したイメージから不要な領域を削除してイメージのサイズをトリミングします。

    リサンプリング

    サイズ変更したイメージをリサンプリングし、変更後のイメージのサイズや形に合わせて画質を向上させます。

    明るさとコントラスト

    イメージの明るさとコントラストの設定を調整します。

    シャープ

    イメージのシャープネスを調整します。

コード内でのイメージアクセシビリティ属性の編集

イメージのアクセシビリティ属性を挿入してあれば、HTML コードでこれらの属性値を編集できます。

  1. ドキュメントウィンドウで、イメージを選択します。
  2. 次のいずれかの操作を実行します。
    • コードビューで該当するイメージ属性を編集します。
    • 右クリックするか(Windows)、Control キーを押しながらクリック(Mac OS)し、「タグの編集」を選択します。
    • プロパティインスペクターの「代替」の値を変更します。

イメージの視覚的なサイズ変更

Dreamweaver では、イメージ、プラグイン、Shockwave ファイル、SWF ファイル、アプレット、ActiveX コントロールなどのエレメントを、画面上で確認しながら視覚的にサイズ変更できます。

Dreamweaver でイメージを視覚的にサイズ変更することにより、イメージの大きさによってレイアウトがどのように変化するか確認できます。ただし、指定した比率にイメージファイルそのものが拡大/縮小されるわけではありません。Dreamweaver でイメージの見かけ上のサイズのみ変更し、イメージファイル自体のサイズをイメージ編集アプリケーション(Adobe Fireworks など)で拡大/縮小する操作をしない場合は、該当するページをロードする際にユーザーのブラウザー側でイメージの拡大/縮小処理が実行されます。このため、ページのダウンロード時間が長くなると共に、ユーザーのブラウザーにイメージが正しく表示されない可能性があります。ダウンロード時間を短縮し、イメージのすべてのインスタンスが同じサイズで表示されるようにするには、イメージ編集アプリケーションを使ってイメージを拡大/縮小します。

Dreamweaver でイメージのサイズを変更するとき、新しい寸法に収まるようにイメージをリサンプリングできます。リサンプリングでは、サイズ変更する JPEG および GIF イメージファイルに対しピクセルを追加または減らすことで、元のイメージの表示に可能な限り合わせることができます。イメージのリサンプリングを行うと、イメージのファイルサイズが縮小し、ダウンロードのパフォーマンスが向上します。

エレメントの視覚的なサイズ変更

  1. ドキュメントウィンドウでエレメント(イメージまたは SWF ファイルなど)を選択します。

    エレメントの下部と右側、および右下隅にサイズ変更ハンドルが表示されます。サイズ変更ハンドルが表示されない場合は、エレメント以外の場所をクリックして選択解除してから、もう一度エレメントを選択するか、タグセレクターの該当するタグをクリックして選択します。

  2. 以下のいずれかの操作を行って、エレメントのサイズを変更します。
    • エレメントの幅を調節するには、右辺の選択ハンドルをドラッグします。
    • エレメントの高さを調節するには、下辺の選択ハンドルをドラッグします。
    • エレメントの幅と高さを同時に調節するには、角の選択ハンドルをドラッグします。
    • Shift キーを押しながら角の選択ハンドルをドラッグすると、縦横比(その幅:高さの比率)を保持したまま、エレメントのサイズを変更できます。
    • エレメントの幅と高さを特定サイズ(例えば、1 x 1 ピクセル)に調整するには、プロパティインスペクターを使って数値を入力します。エレメントをドラッグ操作でサイズ変更する場合は、最小 8 x 8 ピクセルまで縮小できます。
  3. 元のサイズに戻すには、プロパティインスペクターで「幅」および「高さ」テキストボックスの値を削除するか、イメージプロパティインスペクターで「サイズのリセット」ボタンをクリックします。

イメージを元のサイズに戻す

  1. イメージのプロパティインスペクターで「サイズのリセット」ボタン をクリックします。

サイズ変更したイメージのリサンプリング

  1. 上記の手順で、イメージをサイズ変更します。
  2. イメージのプロパティインスペクターで「リサンプリング」ボタン をクリックします。

    注意:

    ビットマップ以外のエレメントや、イメージプレースホルダーはリサンプリングできません。

イメージプレースホルダーの挿入

イメージプレースホルダーは、最終的なイメージを Web ページに追加できるようになるまでの間使用するグラフィックです。プレースホルダーのサイズと色を設定し、さらにテキストラベルを付けることができます。

  1. ドキュメントウィンドウ内のイメージプレースホルダーを挿入する位置に、挿入ポイントを置きます。
  2. 挿入イメージオブジェクトイメージプレースホルダーを選択します。

  3. 「名前」(オプション)には、イメージプレースホルダーのラベルとして表示するテキストを入力します。ラベルを表示しない場合は、テキストボックスを空白のままにしてください。名前には、先頭を英字、先頭以下は英字と数字のみを使用できます。スペースや日本語は使用できません
  4. 「幅」および「高さ」(必須)には、イメージサイズをピクセル単位で入力します。
  5. 「カラー」(オプション)には、次のいずれかの操作を行ってカラーを適用します。
    • カラーピッカーを使用してカラーを選択します。
    • カラーの 16 進数値(例えば、#FF0000)を入力します。
    • Web 対応のカラー名(例えば、赤)を入力します。
  6. 「代替テキスト」(オプション)に、テキスト専用ブラウザーを使用するビジター用の説明文を入力します。

    注意:

    空の src 属性を含むイメージタグが自動的に HTML コードに挿入されます。

  7. 「OK」をクリックします。

    プレースホルダーのカラー、サイズ属性、およびラベルは、以下のように表示されます。

    属性のあるイメージプレースホルダー

    ブラウザーに表示したときにはラベルおよびサイズテキストは表示されません。

イメージプレースホルダーの置き換え

イメージプレースホルダーは、ブラウザーにイメージを表示しません。サイトをパブリッシュする前に、追加したイメージプレースホルダーを GIF や JPEG などの Web 対応イメージファイルに置き換える必要があります。

Fireworks を使用している場合は、Dreamweaver のイメージプレースホルダーから新しいグラフィックを作成できます。作成されるイメージは、プレースホルダーイメージと同じサイズに設定されます。イメージを編集してから、Dreamweaver で置き換えます。

  1. ドキュメントウィンドウで、次のいずれかの操作を行います。
    • イメージプレースホルダーをダブルクリックします。
    • イメージプレースホルダーをクリックして選択し、プロパティインスペクター(ウィンドウプロパティ)の「ソース」テキストボックスの横にあるフォルダーアイコンをクリックします。
  2. イメージソースダイアログボックスで、イメージプレースホルダーと置き換えるイメージに移動します。

イメージプレースホルダーのプロパティの設定

イメージプレースホルダーのプロパティを設定するには、まずドキュメントウィンドウでプレースホルダーを選択します。次に、ウィンドウプロパティを選択し、プロパティインスペクターを表示します。すべてのプロパティを表示するには、右下隅にある縮小の三角形をクリックします。

プロパティインスペクターを使用して、プレースホルダーイメージの名前、幅、高さ、イメージソース、代替テキストの説明、整列、およびカラーを設定します。

イメージプレースホルダーのプロパティインスペクター

プレースホルダーのプロパティインスペクターで灰色表示されているテキストボックスと「行揃え」テキストボックスは使用不可になっています。これらのプロパティは、プレースホルダーをイメージに置き換えるときに、プロパティインスペクターで設定できます。

  1. 次のいずれかのオプションを設定します。

    幅および高さ

    イメージプレースホールダーの幅と高さをピクセル単位で設定します。

    ソース

    イメージのソースファイルを指定します。プレースホルダーイメージの場合、このテキストボックスは空です。「参照」ボタンをクリックして、プレースホルダーグラフィックを置き換えるイメージを選択します。

    リンク

    イメージのハイパーリンクを指定します。ファイルの指定アイコンをファイルパネルのファイルにドラッグするか、フォルダーアイコンをクリックして参照し、ローカルサイトのドキュメントを選択するか、URL を入力します。

    代替

    テキスト専用ブラウザー、またはイメージを手動でダウンロードするように設定されたブラウザーの場合に、イメージの場所に表示される代用のテキストです。目の不自由な方がテキスト専用ブラウザーとスピーチシンセサイザを組み合わせて使用する場合には、テキストが読み上げられます。一部のブラウザーでは、ポインターをイメージの位置に置いたときにこのテキストが表示されます。

    作成

    Fireworks を起動して、代替イメージを作成します。「作成」ボタンは、Fireworks がコンピューターにインストールされていない場合は使用できません。

    オリジナルから更新

    Web イメージ(つまり Dreamweaver ページ上にあるイメージ)が元の Photoshop ファイルと一致していない場合、Dreamweaver によって元のファイルの更新が検知されると、スマートオブジェクトのアイコンの矢の部分が赤になります。デザインビューで Web イメージを選択して、プロパティインスペクターの「オリジナルから更新」ボタンをクリックするとイメージが自動的に更新され、元の Phothoshop ファイルに加えられた変更が反映されます。

    Color

    イメージプレースホルダーのカラーを指定します。

Dreamweaver でのイメージの編集

Dreamweaver では、イメージのリサンプリング、切り抜き、最適化およびシャープ処理を実行できます。また、イメージの明るさとコントラストを調整することもできます。

イメージ編集機能

Dreamweaver には基本的なイメージ編集機能が用意されています。この機能を使用すると、Fireworks や Photoshop などの外部イメージ編集アプリケーションを使用せずに、イメージを修正できます。Dreamweaver のイメージ編集ツールを使用すると、Web サイトで使用するイメージファイルの作成を担当するコンテンツデザイナーとの共同作業が容易になります。

注意:

Dreamweaver のイメージ編集機能は、Fireworks やその他のイメージ編集アプリケーションをコンピューターにインストールしていなくても利用できます。

  1. 修正イメージを選択します。必要に応じて Dreamweaver の以下のイメージ編集機能を設定します。

    リサンプリング

    サイズ変更する JPEG および GIF イメージファイルに対しピクセルを追加または減らすことで、元のイメージの表示に可能な限り合わせることができます。イメージのリサンプリングを行うと、イメージのファイルサイズが縮小し、ダウンロードのパフォーマンスが向上します。

    Dreamweaver でイメージのサイズを変更するとき、新しい寸法に収まるようにイメージをリサンプリングできます。ビットマップオブジェクトのリサンプリングでは、イメージのサイズを大きくする場合はピクセル数を増やし、サイズを小さくする場合はピクセル数を減らします。高い解像度にイメージをリサンプリングした場合、通常、画像品質はほとんど低下しません。低い解像度にリサンプリングした場合は、データの損失が必ず生じ、通常、画質は低下します。

    切り抜き

    イメージの領域を減らしてイメージを編集します。典型的な例では、イメージの主要部分を強調するためにイメージを切り抜き、その周囲にある不要な部分を削除します。

    明るさとコントラスト

    イメージのピクセルのコントラストや明るさを修正できます。これは、イメージのハイライト部、シャドウ部、ハーフトーン部に影響を与えます。「明るさ/コントラスト」は通常、暗すぎたり明るすぎたりするイメージを修正する場合に使用します。

    シャープ

    イメージのエッジのコントラストが明確になり、イメージの焦点を調整できます。イメージをスキャンする場合やデジタル写真を撮影する場合、大半のイメージキャプチャソフトウェアは、初期設定の処理でイメージのオブジェクトのエッジをソフトにします。これにより、きわめて微細な箇所からイメージを構成するピクセルが失われるのを防いでいます。その一方で、デジタルイメージファイルの細部を引き出すために、エッジのコントラストを上げてイメージをシャープにすることがしばしば必要になります。

    注意:

    Dreamweaver のイメージ編集機能は、JPEG、GIF および PNG のイメージファイル形式にのみ適用されます。これらのイメージ編集機能を使用して、他の形式のビットマップイメージファイルを編集することはできません。

イメージの切り抜き

Dreamweaver では、ビットマップファイルイメージの切り抜き(トリミング)ができます。

注意:

イメージを切り抜くと、ディスク上のソースイメージファイルも変更されます。このため、元のイメージに戻す場合に備えて、イメージファイルのバックアップコピーを保管することをお勧めします。

  1. 切り抜くイメージを含むページを開いてイメージを選択し、以下のいずれかの操作を行います。
    • イメージのプロパティインスペクターで切り抜きツールアイコン
    • 修正イメージ切り抜きを選択します。
    • 選択したイメージを囲む切り抜きハンドルが表示されます。
  2. 切り抜きハンドルを調節して、イメージの中で必要な領域を境界ボックスで囲みます。
  3. 境界ボックスの内側でダブルクリックするか、Enter キーを押して選択範囲を切り抜きます。
  4. 切り抜こうとしているイメージファイルがディスク上で変更されることを知らせるダイアログボックスが表示されます。「OK」をクリックします。選択しているビットマップで境界ボックスの外側にあるすべてのピクセルが削除されます。イメージ内の他のオブジェクトは保持されます。
  5. イメージをプレビューして目的の表示になっているかを確認します。目的の表示と異なる場合は、編集取り消し 切り抜きを選択し、元のイメージに戻します。

    注意:

    Dreamweaver を終了する前、または外部のイメージ編集アプリケーションでファイルが編集される前であれば、切り抜きコマンドの効果を取り消して元のイメージファイルに戻すことができます。

イメージの最適化

Dreamweaver から Web ページのイメージを最適化することができます。

  1. 最適化するイメージを含むページを開いてイメージを選択し、以下のいずれかの操作を行います。
    • イメージのプロパティインスペクターで「イメージ設定の編集」ボタン をクリックします。
    • 修正イメージ最適化を選択します。
  2. イメージの最適化ダイアログボックスで編集を行い、「OK」をクリックします。

イメージをシャープにする

シャープ機能を使用すると、オブジェクトの縁を囲むピクセル間のコントラストが上がり、高い鮮明度やシャープネスを持つイメージになります。

  1. シャープにするイメージを含むページを開いてイメージを選択し、以下のいずれかの操作を行います。
    • イメージのプロパティインスペクターで「シャープ」ボタン をクリックします。
    • 修正イメージシャープを選択します。
  2. スライダーコントロールをドラッグするか、テキストボックスに 0 から 10 までの値を入力して、Dreamweaver でイメージをどの程度シャープにするか指定します。シャープダイアログボックスを使用してイメージのシャープネスを調整しながら、イメージの変化をプレビューできます。
  3. イメージが適切に補正されたら、「OK」をクリックします。
  4. ファイル保存を選択して変更を保存します。イメージを変更する前の状態に戻すには、編集編集/取り消し シャープを選択します。

    注意:

    イメージを含むページを保存する前であれば、シャープコマンドの効果を取り消して元のイメージファイルに戻すことができます。ページを保存すると、イメージの変更が保存され、元に戻せなくなります。

イメージの明るさとコントラストの調整

明るさとコントラスト機能を使用すると、イメージのピクセルのコントラストや明るさを修正できます。これは、イメージのハイライト部、シャドウ部、ハーフトーン部に影響を与えます。「明るさ/コントラスト」は通常、暗すぎたり明るすぎたりするイメージを修正する場合に使用します。

  1. 調整するイメージを含むページを開いてイメージを選択し、以下のいずれかの操作を行います。
    • イメージのプロパティインスペクターで「明るさとコントラスト」ボタン をクリックします。
    • 修正イメージ明るさとコントラストを選択します。
  2. 明るさスライダーおよびコントラストスライダーをドラッグして設定を調整します。値は -100 ~ +100 の範囲で入力します。
  3. 「OK」をクリックします。

ロールオーバーイメージの作成

ページにロールオーバーイメージを挿入することができます。ロールオーバーとは、ブラウザーで表示したときにポインターを置くと変化するイメージのことです。

ロールオーバーを作成するには、2 つのイメージが必要です。1 つ目は、ページを最初にロードしたときに表示されるイメージのプライマリイメージで、2 つ目は、ポインターをプライマリイメージ上に移動すると表示されるイメージのセカンダリイメージです。2 つのイメージは同じサイズにする必要があります。Dreamweaver では、ロールオーバーイメージのプロパティがプライマリイメージに一致するように調整されます。

ロールオーバーイメージは、onMouseOver イベントに反応するように自動的に設定されます。別のイベント(マウスクリックなど)に反応するようにイメージを設定したり、ロールオーバーイメージを変更したりできます。

  1. ドキュメントウィンドウのロールオーバーを 表示したい場所に、挿入ポイントを置きます。
  2. 以下のいずれかの方法でロールオーバーを挿入します。
    • 挿入パネルの「一般」カテゴリ内で「イメージ」ボタンをクリックし、ロールオーバーイメージアイコンを選択します。挿入パネルにロールオーバーイメージアイコンを表示して、そのアイコンをドキュメントウィンドウにドラッグします。
    • 挿入イメージオブジェクトロールオーバーイメージを選択します。
  3. オプションを設定して、「OK」をクリックします。

    イメージ名

    ロールオーバーイメージの名前。

    元の画像

    ページのロード時に表示するイメージ。テキストボックスにパスを入力するか、または「参照」をクリックしてイメージを選択します。

    ロールオーバーイメージ

    ポインターを元のイメージに合わせたときに表示するイメージ。パスを入力するか、または「参照」をクリックしてイメージを選択します。

    ロールオーバーイメージのプリロード

    ビジターがイメージにポインターを置いたときに遅延が発生しないようにブラウザーのキャッシュにイメージをプリロードします。

    代替テキスト

    (オプション)テキスト専用ブラウザーを使用するビジター用の説明文を入力します。

    クリック時に URL へ移動

    ユーザーがロールオーバーイメージをクリックしたときに開くファイルです。パスを入力するか、または「参照」をクリックしてファイルを選択します。

    注意:

    イメージへのリンクを設定しないと、Dreamweaver では、ロールオーバービヘイビアーが添付されている HTML ソースコードにヌルリンク(#)が自動的に挿入されます。ヌルリンクを削除すると、ロールオーバーイメージは無効になります。

  4. ファイルブラウザーでプレビューを選択するか、F12 キーを押します。

  5. ブラウザーで、プライマリイメージ上にポインターを移動し、ロールオーバーイメージを表示します。

    注意:

    デザインビューではロールオーバーイメージの効果を見ることはできません。

外部イメージエディターの使用

Dreamweaver で作業中に、選択したイメージを外部イメージエディターで開くことができます。外部イメージエディターでイメージファイルを保存し Dreamweaver に戻ると、編集内容を反映したイメージがドキュメントウィンドウに表示されます。

Fireworks をプライマリ外部エディターとして設定することができます。エディターで開くファイルタイプを設定することもできます。また、複数のイメージエディターを選択することもできます。例えば、GIF ファイルを編集する場合は Fireworks を起動し、JPG または JPEG ファイルを編集する場合は別のイメージエディターを起動するように環境設定を変更できます。

外部イメージエディターの起動

  1. 次のいずれかの操作を実行します。
    • 編集するイメージをダブルクリックします。
    • 編集するイメージを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、エディターを指定して編集参照選択してエディターを選択します。
    • 編集したいイメージを選択して、プロパティインスペクターで「編集」をクリックします。
    • ファイルパネルでイメージファイルをダブルクリックし、プライマリイメージエディターを起動します。イメージエディターが指定されていない場合、Dreamweaver では、そのファイルタイプに対して初期設定されているエディターが起動します。

    注意:

    ファイルパネルからイメージを開くと、Fireworks の統合機能を使用できません。したがって、Fireworks はオリジナルの PNG ファイルを開きません。Fireworks の統合機能を使うには、ドキュメントウィンドウからイメージを開きます。

    Dreamweaver ウィンドウに戻ってもイメージが更新されない場合は、イメージを選択してプロパティインスペクターの「更新」ボタンをクリックしてください。

既存のファイルタイプに対する外部イメージエディターの設定

グラフィックファイルを開いて編集するためのイメージエディターを選択できます。

  1. 次のいずれかの操作を実行して「ファイルタイプ/エディター」の環境設定ダイアログボックスを開きます。
    • 編集環境設定 (Windows) または Dreamweaver環境設定(Mac OS) を選択して、左にあるカテゴリリストの「ファイルタイプ/エディター」を選択します。
    • 編集エディターを指定して編集 外部エディターを選択し、「ファイルタイプ/エディター」をクリックします。
  2. 拡張子リストから、外部イメージエディターを設定するファイル拡張子を選択します。
  3. エディターリストの上にある「+」ボタンをクリックします。
  4. 外部エディターの選択ダイアログボックスで、選択したファイルタイプを編集するときに起動するアプリケーションの保存場所まで移動します。

  5. そのアプリケーションをこのファイルタイプのプライマリエディターとして設定する場合は、環境設定ダイアログボックスの「プライマリエディターに設定」をクリックします。

  6. このファイルタイプに、追加のエディターを設定する場合は、手順 3 ~ 4 を繰り返します。

    Dreamweaver は、このタイプのイメージを編集するときに自動的にプライマリエディターを使います。ドキュメントウィンドウのイメージには、コンテキストメニューに一覧表示される他のエディターを選択できます。

拡張子リストへの新規ファイルタイプの追加

  1. 次のいずれかの操作を実行して「ファイルタイプ/エディター」の環境設定ダイアログボックスを開きます。

    • 編集環境設定 (Windows) または Dreamweaver環境設定(Mac OS) を選択して、左にあるカテゴリリストの「ファイルタイプ/エディター」を選択します。
    • 編集エディターを指定して編集 外部エディターを選択し、「ファイルタイプ/エディター」をクリックします。
  2. ファイルタイプ/エディター」の環境設定ダイアログボックスで、拡張子リストの上の「+」をクリックします。

    テキストボックスが拡張子リスト内に表示されます。

  3. 追加するファイルタイプのファイル拡張子を入力します。
  4. 追加したファイルタイプで起動する外部エディターを設定するには、エディターリストの上の「+」ボタンをクリックします。
  5. 表示されるダイアログボックスで、この種類のイメージファイルを編集するのに使用するアプリケーションを選択します。
  6. このエディターをその種類のイメージのプライマリエディターにする場合は、「プライマリエディターに設定」をクリックします。

既存エディターの環境設定の変更

  1. 次のいずれかの操作を実行して「ファイルタイプ/エディター」の環境設定ダイアログボックスを開きます。

    • 編集環境設定 (Windows) または Dreamweaver環境設定(Mac OS) を選択して、左にあるカテゴリリストの「ファイルタイプ/エディター」を選択します。
    • 編集エディターを指定して編集 外部エディターを選択し、「ファイルタイプ/エディター」をクリックします。
  2. ファイルタイプ/エディター」の環境設定ダイアログボックスの拡張子リストで、既存のエディターを表示するために変更するファイルタイプを選択します。

  3. 「エディター」リストで、起動するエディターを選択し、次のいずれかの操作を行います。
    • エディターリストの上の「+」または「–」ボタンをクリックし、エディターを追加または削除します。
    • 「プライマリエディターに設定」ボタンをクリックし、初期設定で起動する編集用エディターを変更します。

イメージへのビヘイビアーの適用

イメージやイメージホットスポットに使用できるビヘイビアーを適用できます。ホットスポットにビヘイビアーを適用すると、Dreamweaver では area タグに HTML ソースコードが挿入されます。イメージに適用できるビヘイビアーは 3 種類あります。「プリロードイメージ」、「スワップイメージ」、「スワップイメージの復元」 の 3 つです。

イメージのプリロード

すぐにはページに表示されないイメージ(ビヘイビアー、AP エレメント、JavaScript とスワップされるイメージなど)をブラウザーキャッシュにロードします。これにより、ダウンロード時にイメージの表示が遅れるのを防ぐことができます。

スワップイメージ

SRC 属性(img タグの)を変更して、イメージを別のイメージとスワップさせます。このアクションを使用して、ボタンロールオーバー、その他のイメージ効果(複数のイメージを同時にスワップさせることなど)を作成します。

スワップイメージの復元

最後にスワップされた一式のイメージが前のソースファイルに戻ります。このアクションは、初期設定では、「スワップイメージ」アクションをオブジェクトに割り当てると、自動的に追加されます。これを手動で選択する必要はありません

ビヘイビアーを使用すると、ジャンプメニューのような、さらに洗練されたナビゲーションシステムを作成できます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー