この文書は、Dreamweaver CS4/CS5/CS5.5 の基本的な使用方法を分かりやすく図解した内容となっています。

Dreamweaver CS4/CS5/CS5.5 の機能を使用して、画像を簡単に挿入することができます。

※ この文書では、使用する画像がすでに設定済みのサイト内に保存されていることを前提として手順を説明しています。Dreamweaver のサイト設定について、詳しくは文書番号 233242 [基本操作] サイトの定義と管理について(Dreamweaver CS4/CS5/CS5.5)を参照してください。

ページに画像を挿入する方法

  

サイト内の編集するファイルを開き、画像を配置する箇所にマウスカーソルを置きます。

[挿入] メニューから [イメージ] を選択します。

[イメージソースの選択] ダイアログボックスが表示されたら、配置する画像を選択して [OK] をクリックします。

[イメージタグのアクセシビリティ属性] ダイアログボックスが表示されたら、必要に応じて [代替テキスト] と [詳細] を指定し、[OK] をクリックします。

ページに画像が挿入されます。

ページの背景に画像を使用する方法

ここでは例として、ページの右上に背景画像を表示させる(リピートさせない)方法をご紹介します。

 

Dreamweaver を起動し、サイト内の編集するファイルを開きます。

[フォーマット] メニューの [CSS スタイル] をポイントし、[新規] をクリックします。

[新規 CSS ルール] ダイアログボックスが表示されたら、以下の設定を行い [OK] をクリックします。

  • [セレクタタイプ] で [タグ(HTML エレメントを再定義)] を指定します。
  • [セレクタ名] に「body」と入力します。

[body の CSS ルール定義] ダイアログボックスが表示されたら、画面左側のリストで [背景] をクリックします。

以下の設定を行い、[OK] をクリックします。

  • [Background-image] : [参照] ボタンをクリックして、背景に使用する画像を指定します。
  • [Background-repeat] : [no-repeat] を選択します。
  • [Background-position(X)] : [right] を選択します。
  • [Background-position(Y)] : [top] を選択します。

ページの右上に、太陽の画像が背景として表示されます。

ロールオーバーイメージを挿入する方法

このセクションでは、マウスを乗せた時に画像の表示が切り替わる「ロールオーバーイメージ」の挿入方法について説明します。

 

あらかじめ、Photoshop や Fireworks などの画像編集アプリケーションを使用して、以下のような「通常表示されているボタン」と「マウスをボタンに合わせると表示されるボタン」の 2 つの画像を用意しておきます。

サイト内のページを開き、画像を配置する箇所にマウスカーソルを置きます。

[挿入] メニューの [イメージオブジェクト] をポイントし、[ロールオーバーイメージ] をクリックします。

[ロールオーバーイメージの挿入] ダイアログボックスが表示されたら、以下の設定を行い [OK] をクリックします。

  • [イメージ名] : 初期設定で「ImageX」(X は数字)と入力されています。そのまま変更しないでください。
  • [元のイメージ] : [参照] ボタンをクリックし、通常表示される画像を指定します。
  • [ロールオーバーイメージ] : [参照] ボタンをクリックし、マウスを合わせると表示される画像を指定します。
  • [ロールオーバーイメージのプリロード] : チェックを入れます。
  • [代替テキスト] : 必要に応じてイメージの名前、または簡単な説明を入力します。
  • [クリック時に URL へ移動] : イメージにリンクを指定する場合、リンク先のアドレスを入力するか、または [参照] をクリックしてサイト内のページを指定します。

ページにロールオーバーする画像が配置されます。

 

プレビューで確認

デザインビュー上ではロールオーバーは動作しません。ライブビュー、またはブラウザプレビューで動作を確認してください。

アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

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

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