Expression Web 4 Beginner's Guide

Expression Web初心者向けガイド。ステップバイステップで解説していきます。

画像を挿入するには

Section 1 画像の挿入
最終更新日時: 2019/01/28 13:32:18
  • このエントリーをはてなブックマークに追加

画像を挿入する方法は、メニューコマンドからの実行、[フォルダーリスト]パネルから画像ファイルのドラッグ&ドロップ、および、クリップボードイメージからの挿入の3通りあります。

メニューコマンドを使って画像を挿入する

  1. 画像を挿入したい場所を指定します。
  2. [挿入]メニューの[画像]をポイントして[ファイルから]をクリックするか、共通ツールバーの(ファイルから画像を挿入)ボタンをクリックします。
  3. [画像]ダイアログボックスが表示されたら、挿入する画像ファイルの場所を選択します。
  4. 画像ファイルを選択して[挿入]ボタンをクリックします。
  5. [アクセシビリティのプロパティ]ダイアログボックスが表示されたら、その画像の説明を[代替テキスト]ボックスに入力して、[OK]ボタンをクリックします。
  6. 挿入された画像ファイルがサイト内に存在しない場合、Webページ保存時に[埋め込みファイルの保存]ダイアログボックスが表示されるので、ファイルの保存場所とファイルの名前を指定します。ファイル名やフォルダー名は必ず半角英数文字を使用しましょう。
[アクセシビリティのプロパティ]ダイアログボックス

画像の表示に対応していないテキストブラウザや、視覚に障害を持つ人が利用する音声読み上げブラウザを使用している場合、何を表す画像なのかがわかるように、すべての画像にはそれぞれ画像の説明(代替テキスト)を指定する必要があります。Expression Webでは画像の挿入時に[アクセシビリティのプロパティ]ダイアログボックスが表示され、ここで設定できます。その設定内容は、alt属性で指定されます。

ただし、その画像自体に意味を持たないデザイン要素であれば、[代替テキスト]ボックスは空白のままで[OK]ボタンをクリックします。

詳しくは、富士通がまとめた「ウェブ・アクセシビリティ指針」の『54. すべての画像には、画像の内容を的確に示す alt属性をつける(画像の代替情報)』を参考にしてください。

[フォルダーリスト]パネルで画像を挿入する

  1. [フォルダーリスト]パネルから作業中のWebページに挿入する画像ファイルを選択します。
  2. そのまま編集ウィンドウの挿入先までドラッグアンドドロップします。
  3. [アクセシビリティのプロパティ]ダイアログボックスが表示されたら、その画像の説明を[代替テキスト]ボックスに入力して、[OK]ボタンをクリックします。
  4. 画像が挿入されました。

クリップボードイメージから挿入する

Expression Webは、すでに保存した画像ファイル(作業中のサイト内または外)に限らず、クリップボードにコピーされた画像でも挿入できます。クリップボードの情報は、未保存の画像データも含みます。貼り付けた時点で画像ファイルに変換されるので、事前にファイルを保存する必要はありません。その後Webページの保存を行うと[埋め込みファイルの保存]ダイアログボックスが表示されるので、そこでファイルの保存場所とファイルの名前を指定します。ファイルの名前は半角英数文字で指定しましょう。

保存する埋め込みファイルのフォルダーを変更するには

Expression Webではじめて埋め込みファイルを保存する場合は、対象とするHTMLファイルと同じ場所に保存される仕様になります。以下の手順に従って「images」フォルダーに指定することで、今後そのフォルダーに保存されるようになります。

  1. [埋め込みファイルの保存]ダイアログボックスにて、対象となるファイルを選択します。
  2. [フォルダーの変更]ボタンをクリックします。
  3. 保存するフォルダーを指定して[OK]ボタンをクリックします。
  4. フォルダーの場所が変更されたことを確認して[OK]ボタンをクリックします。

  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ