スライスオプションダイアログボックスの表示

次のいずれかの操作を行います。

  • スライス選択ツール を使用して、スライスをダブルクリックします(このツールが表示されていない場合は、切り抜きまたはスライスツールを押し続けます)。
  • スライス選択ツールをアクティブにして、オプションバーのスライスオプションボタン をクリックします。この方法は、Web およびデバイス用に保存ダイアログボックスでは使用できません。

スライスのコンテンツの種類の指定

HTML ファイルと共に書き出したときに Web ブラウザーでスライスデータをどのように表示するかを指定できます。設定できるオプションは、選択したスライスの種類によって異なります。

  • 画像データが含まれる画像スライス。これは初期設定の種類です。

  • テキストまたはベタ塗り用の空のテーブルセルを作成できる画像なしスライス。画像なしスライスには HTML テキストを入力できます。Web およびデバイス用に保存ダイアログボックスで「テキストを HTML に」オプションを設定している場合、ブラウザーで表示したときにテキストは HTML として解釈されます。スライスの種類が「画像なし」の場合は、ブラウザーでプレビューできるイメージとして書き出されません。

注意:

自動スライスのオプションを設定すると、スライスはユーザー定義スライスに変更されます。

  1. スライスを選択します。Photoshop を使用している場合は、スライス選択ツールでスライスをダブルクリックし、スライスオプションダイアログボックスを表示します。
  2. スライスオプションダイアログボックスで、種類ポップアップメニューから種類を選択します。

スライス名の変更

画像にスライスを追加するとき、コンテンツに応じてスライスの名前を変更すると便利です。初期設定では、ユーザー定義のスライスは出力設定ダイアログボックスの設定に基づいて名前が付けられます(Web グラフィックの出力設定を参照してください)。

  1. スライスを選択し、スライス選択ツールでスライスをダブルクリックして、スライスオプションダイアログボックスを表示します。スライスオプションダイアログボックスで、「名前」テキストボックスに新しい名前を入力します。

    注意:

    画像なしスライスのコンテンツでは、「名前」テキストボックスは使用できません。

スライスの背景色の選択

スライスの透明部分(画像スライスの場合)、またはスライス全体(画像なしスライスの場合)の背景色を選択できます。

Photoshop には、選択した背景色は表示されません。選択した背景色の効果を確認するには、ブラウザーで画像をプレビューする必要があります。

  1. スライスを選択します。Photoshop の Web およびデバイス用に保存ダイアログボックスを使用している場合は、スライス選択ツールでスライスをダブルクリックし、スライスオプションダイアログボックスを表示します。
  2. スライスオプションダイアログボックスの背景色ポップアップメニューから背景色を選択します。(Adobe カラーピッカーを使用して)「なし」、「マット」、「白」または「その他」を選択します。

スライスに URL を割り当てると、スライス領域全体がリンクになります。ユーザーがリンクをクリックすると、Web ブラウザーは指定された URL とターゲットフレームへジャンプします。このオプションは、画像スライスのみに設定できます。

  1. スライスを選択します。Photoshop を使用している場合は、スライス選択ツールでスライスをダブルクリックし、スライスオプションダイアログボックスを表示します。
  2. スライスオプションダイアログボックスで、「URL」テキストボックスに URL を入力します。相対パスと絶対(フル)パスのどちらでも入力できます。URL を絶対パスで入力する場合は、プロトコルも指定する必要があります(例えば、www.adobe.com ではなく http://www.adobe.com と入力します)。絶対パスと相対パスを使用した URL について詳しくは、HTML について記載されている参考書等を参照してください。
  3. 必要に応じて、「ターゲット」テキストボックスにターゲットフレームの名前を入力します。

    _blank

    元のブラウザーウィンドウが開いたままの状態で、リンク先のファイルが新しいウィンドウに表示されます。

    _self

    元のファイルと同じフレームに、リンク先のファイルが表示されます。

    _parent

    それ自体の親フレームセットに、リンク先のファイルが表示されます。このオプションは、HTML ドキュメントにフレームが含まれており、現在のフレームが子フレームの場合に使用してください。リンク先のファイルは、現在の親フレームに表示されます。

    _top

    現在のすべてのフレームを削除して、リンク先のファイルのあるブラウザーウィンドウ全体を置き換えます。名前は、HTML ファイルでドキュメント用に以前定義されたフレーム名と一致する必要があります。ユーザーがリンクをクリックすると、指定したファイルが新しいフレームに表示されます。

    注意:

    フレームについて詳しくは、HTML に関する参考書等を参照してください。

ブラウザーメッセージと Alt テキストの指定

ブラウザーに表示するメッセージを指定できます。これらのオプションは画像スライスでのみ使用でき、書き出した HTML ファイルにしか表示されません。

  1. スライスを選択します。Photoshop を使用している場合は、スライス選択ツールでスライスをダブルクリックし、スライスオプションダイアログボックスを表示します。
  2. スライスオプションダイアログボックスで、必要なテキストを入力します。

    メッセージテキスト

    スライスにブラウザーのステータス領域に表示されるメッセージを設定できます。空白の場合はスライスの URL フィールドに設定した文字が表示されます。

    Alt

    選択したスライスに対して、Alt タグを指定できます。Alt テキストは、グラフィックに対応していないブラウザーを使用した場合に、スライス画像の代わりに表示されるものです。また、一部のブラウザーでは、画像のダウンロード中にも、ツールチップとして画像の代わりに表示されます。

スライスへの HTML テキストの追加

スライスに「画像なし」タイプを選択すると、目的の Web ページのスライス領域に表示するテキストを入力できます。プレーンテキストまたは標準 HTML タグで書式設定されたテキストを入力できます。垂直方向および水平方向の整列オプションも選択できます。特定の HTML タグについて詳しくは、HTML に関する参考書等を参照してください。

Photoshop のドキュメントウィンドウには、HTML テキストは表示されません。テキストをプレビューするには、Web ブラウザーを使用します。様々なブラウザー、設定およびオペレーティングシステムを使用して HTML テキストをプレビューし、テキストが Web に正常に表示されることを確認してください。

注意:

書き出すページのレイアウトによって、画像なしのスライスで表示できるテキストの量は変わります。

  1. スライスを選択します。スライス選択ツールでスライスをダブルクリックして、スライスオプションダイアログボックスを表示します。Web およびデバイス用に保存ダイアログボックスでスライスをダブルクリックすると、追加の書式設定オプションも設定できます。
  2. スライスオプションダイアログボックスで、スライスの種類メニューから、「画像なし」を選択します。
  3. テキストボックスに、必要なテキストを入力します。
  4. Web およびデバイス用に保存ダイアログボックスのみ)テキストに HTML 形式のタグが含まれている場合は、「テキストを HTML に」オプションを選択します。このオプションを選択しないと、HTML タグは無視され、すべてのテキストは書式設定されていないプレーンテキストとして Web ページに表示されます。
  5. Web およびデバイス用に保存ダイアログボックスのみ)必要に応じて、ダイアログボックスの「HTML テキストの行揃え」セクションからオプションを選択します。

    初期設定

    ブラウザーの初期設定の水平方向の整列設定が使用されます。

    左端揃え

    テキストがスライス領域の左端に揃えられます。

    中心

    テキストがスライス領域の中心に揃えられます。

    右端揃え

    テキストがスライス領域の右端に揃えられます。

    初期設定

    ブラウザーの初期設定の垂直方向の整列設定が使用されます。

    上端揃え

    テキストがスライス領域の上に揃えられます。

    ベースライン揃え

    HTML テーブルの同じ列に存在するセルの最初のテキスト行に、共通ベースライン揃えが設定されます。同じ列に存在する各セルに、「ベースライン揃え」オプションを適用する必要があります。

    中央揃え

    テキストがスライス領域の中央に垂直に揃えられます。

    下端揃え

    テキストがスライス領域の下に揃えられます

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

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