マニュアルキャンセル

アセットを使用した作業

検索

最終更新日 : 2021年4月28日

現在のサイトのアセットを管理するには、Dreamweaver のアセットパネルを使用します。

Adobe Dreamweaver を使用すると、イメージ、ムービー、カラー、スクリプト、リンクなど、サイトに保存されているアセットを管理およびプレビューすることができます。またアセットは、現在のドキュメントのページに直接ドラッグして挿入することができます。

アセットは様々なソースから取得します。例えば、Adobe Photoshop や Adobe Animate CC などのアプリケーションでアセットを作成したり、共同作業者からアセットを受け取ることができます。また、クリップアートの CD からアセットをコピーしたり、グラフィック Web サイトからイメージをコピーすることも可能です。

Dreamweaver では、ライブラリとテンプレートという 2 つの特殊なアセットにもアクセスできます。いずれもリンクされたアセットなので、Dreamweaver ライブラリ項目またはテンプレートを編集すると、はこれらのアセットを使用しているすべてのドキュメントを更新します。通常、ライブラリ項目は、サイトロゴや著作権表示など、小さなデザインアセットを表しています。大きなデザイン領域を制御する場合は、ライブラリ項目ではなくテンプレートを使用します。

現在のサイトのアセットを管理するには、アセットパネル（ウィンドウ／アセット）を使用します。アセットパネルには、ドキュメントウィンドウ内のアクティブなドキュメントに関連しているサイトのアセットが表示されます。

注意：

アセットパネルにアセットを表示するには、ローカルサイトを定義しておく必要があります。

アセットパネルでは、様々な方法でアセットを表示できます。

サイトリスト

サイト内のドキュメントに使用されているカラーや URL など、サイト内のすべてのアセットが表示されます。

お気に入りリスト

明示的に選択したアセットだけが表示されます。

この 2 つのリスト表示を切り替えるには、プレビュー領域の上にある「サイト」または「お気に入り」ラジオボタンを選択します。この 2 つのリスト表示は、「テンプレート」カテゴリーおよび「ライブラリ」カテゴリーでは使用できません。

注意：

いずれのリストでも、アセットパネルでの操作はほとんど同じです。ただし、お気に入りリストでしか実行できないタスクがいくつかあります。

いずれのリストでも、アセットは次のいずれかのカテゴリーに分類されます。

イメージ

GIF、JPEG、または PNG 形式のイメージファイルです。

カラー

テキスト、背景、リンクの色など、ドキュメントおよびスタイルシートで使用する色です。

URL

現在のサイトドキュメントにある外部リンクです。FTP、gopher、HTTP、HTTPS、JavaScript、電子メール（mailto）、ローカルファイル（file://）の各リンクがあります。

メディア

Adobe Flash（SWF のみ）ファイル、Adobe Shockwave ファイル、QuickTime、MPEG ファイルなどのメディアファイルです。

スクリプト

JavaScript ファイルまたは VBScript ファイルです。アセットパネルには、HTML ファイル内のスクリプト（独立した JavaScript ファイルまたは VBScript ファイル内のスクリプトではありません）は表示されません。このカテゴリーは、コードビューとデザインビューでのみ使用できます。

テンプレート

複数のページで使用するマスターページレイアウトです。テンプレートを修正すると、テンプレートに関連付けられているすべてのページが自動的に修正されます。このカテゴリーは、コードビューとデザインビューでのみ使用できます。

ライブラリ項目

複数のページで使用するデザインエレメントです。ライブラリ項目を変更すると、そのライブラリ項目が含まれているすべてのページが更新されます。このカテゴリーは、コードビューとデザインビューでのみ使用できます。

注意：

アセットパネルに表示されるファイルは、このいずれかのカテゴリーに分類されるものだけです。他のタイプのファイルをアセットと呼ぶこともありますが、このパネルには表示されません。

初期設定では、各カテゴリー内のアセットは名前のアルファベット順に表示されますが、タイプなどの基準に従って並べ替えることもできます。また、アセットのプレビューや、列およびプレビュー領域のサイズ変更もできます。

「タイプ」列の Creative Cloud アイコンは、対応するアセットが Creative Cloud ライブラリから読み込まれていることを示します。Creative Cloud アイコンをダブルクリックすることで、対応するアセットをリサンプリングすることもできます。CC ライブラリのアセットの再利用について詳しくは、Dreamweaver での Creative Cloud ライブラリを参照してください。

プレビュー領域でのアセットの表示

アセットパネル内でアセットを選択します。

カテゴリー内のアセットの表示

アセットパネルの左側のカテゴリーアイコンをクリックします。

アセットの並べ替え

列見出しをクリックします。

例えば、すべての GIF イメージをひとまとめにし、すべての JPEG イメージをひとまとめにするといったように、イメージをタイプ別に並べ替えるには、「タイプ」列見出しをクリックします。

列のサイズ変更

2 つの列見出しを分割する線をドラッグします。

プレビュー領域のサイズ変更

プレビュー領域とアセットリストの間の分割バーを、上または下にドラッグします。

アセットパネルの更新

サイトリストの作成には数秒かかります。Dreamweaver で、最初にサイトキャッシュを読み取る必要があるからです。

次のような変更は、アセットパネルにすぐには反映されません。例えば、サイトにアセットを追加したり、サイトからアセットを削除した場合、その変更は、「更新サイトリスト」ボタンをクリックしてサイトリストを更新するまでアセットパネルに反映されません。Dreamweaver ではなく、Windows エクスプローラーや Finder などでアセットを追加または削除した場合は、サイトキャッシュを再構築して、アセットパネルを更新する必要があります。

サイト内の特定のカラーや URL のインスタンスだけを削除した場合、またはこれまでサイトで使用されていなかったカラーや URL が含まれる新規ファイルを保存した場合は、その変更は、サイトリストを更新するまでアセットパネルに反映されません。

サイトリストを手動で更新するには、「更新サイトリスト」ボタンをクリックします。Dreamweaver では、必要に応じてサイトキャッシュが作成または更新されます。
サイトリストを更新して手動でサイトキャッシュを再構築するには、アセットリスト内で右クリック（Windows）するか、または Command キーを押しながらクリック（Mac OS）し、「更新サイトリスト」を選択します。

ドキュメントへのアセットの追加

一般的なアセットは、ドキュメントウィンドウのライブビュー、コードビューおよびデザインビューにドラッグするか、パネルの「挿入」ボタンを使用して、ドキュメントに挿入できます。アセットパネルのリストビューとプレビューペインの両方からアセットをドラッグできます。

注意：プレビューペインからのドラッグは Mac でのみサポートされています。

デザインビューまたはライブビューでカラーや URL を挿入できます。デザインビューでは、選択したエレメントにカラーと URL を適用できます。

ドキュメントで、アセットを表示する場所に挿入ポイントを置きます。
アセットパネルで、左側のアセットカテゴリーボタンから選択します。

注意：

テンプレート以外のカテゴリーを選択します。テンプレートはドキュメント全体に対して適用されます。ドキュメントに挿入することはできません。
パネルの上部の「サイト」または「お気に入り」を選択し、アセットを選択します。

ライブラリ項目にはサイトリストおよびお気に入りリストはありません。ライブラリ項目を挿入する場合は、この手順を省略します。
次のいずれかの操作を実行します。
- アセットをパネルからドキュメントにドラッグします。リストビューから、また、プレビューペインからもドラッグできます。
  
  注意：Windows では、アセットをプレビューペインからドラッグできません。
  
  スクリプトはドキュメントウィンドウのヘッドコンテンツ領域にドラッグできます。この領域が表示されていない場合は、表示／ヘッドコンテンツを選択してください。
- パネルでアセットを選択し、「挿入」をクリックします。
  
  挿入されたアセットがカラーの場合、挿入ポイントの後に表示されるテキストに適用されます。

アセットパネルを使用したテキストへのカラーの適用

アセットパネルには、テキスト、テーブルボーダー、背景などの様々なエレメントに既に適用されているカラーが表示されます。

デザインビューで、次の手順を実行します。
1. ドキュメント内のテキストを選択します。
2. アセットパネルで、「カラー」カテゴリーを選択します。
3. 目的のカラーを選択し、「適用」をクリックします。
ライブビューで、次の手順を実行します。
1. アセットパネルで、「カラー」カテゴリーを選択します。
2. 次のいずれかの操作を実行します。
  
  アセットパネルでカラーを右クリックし、「カラーの値をコピー」をクリックします。カラーの値がクリップボードにコピーされます。CSS デザイナーにカラーの値をペーストできるようになりました（Ctrl+V キー、Command+V キー）。
  
  プレビューからカラーをドラッグし、ライブビューのエレメントをマウスでポイントします。カラーをドロップすると、新規 CSS ルールダイアログが表示されます。「OK」をクリックすると、選択したエレメントにカラーが適用されます。
  
  アセットパネルで「適用」をクリックします。新規 CSS ルールダイアログが表示され、「OK」をクリックすると、選択したエレメントにカラーが適用されます。

画像またはテキストに URL を割り当てる

デザインビューで、次の手順を実行します。
1. テキストまたは画像を選択します。
2. アセットパネルで、URL が格納されている場所に応じてサイトビューまたはお気に入りビューで「URL」カテゴリーを選択します。
  
  注意：
  
  初期設定では、サイトのファイルの URL はサイトビューに格納されます。お気に入りビューには、ユーザーが追加した URL が格納されます。
3. URL を選択します。
4. 次のいずれかの操作を実行します。
  
  パネル内の URL をデザインビュー内の選択範囲にドラッグします。
  
  URL を選択して、「挿入」をクリックします。
ライブビューで、次の手順を実行します。
1. アセットパネルで、URL が格納されている場所に応じてサイトビューまたはお気に入りビューで「URL」カテゴリーを選択します。
2. 次のいずれかの操作を実行します。
  
  プレビューまたはリストビューから URL をドラッグします。ライブビューでエレメント上にマウスポインターを置きます。URL をドロップすると、ライブビューでハイライト表示されたエレメントが <a> で囲まれます。
  
  ライブビューで目的のエレメントをクリックします。アセットパネルで URL を選択し、「適用」をクリックします。選択したエレメントが <a> タグで囲まれます。

アセットの選択と編集

アセットパネルでは、複数のアセットを一度に選択することができます。これは、アセットの編集を迅速に開始する方法でもあります。

複数のアセットの選択

アセットパネルでアセットを選択します。
以下のいずれかの方法でその他のアセットを選択します。
- Shift キーを押しながらクリックし、連続して表示されている複数のアセットを選択します。
- Ctrl キー（Windows）または Command キー（Mac OS）を押しながら個々のアセットをクリックして、選択範囲に追加します（既存の選択範囲に隣接しているかいないかは関係ありません）アセットの選択を解除するには、Ctrl キーまたは Command キーを押しながら、選択されているアセットをクリックします。

アセットの編集

アセットパネルでアセットを編集する場合、アセットタイプによってビヘイビアーが異なります。イメージなどの特定のアセットには外部エディターを使用します。そのアセットタイプで使用する外部エディターを定義済みの場合は、その外部エディターが自動的に起動します。カラーと URL を編集できるのは、お気に入りリストでだけです。テンプレートおよびライブラリ項目を編集する場合は、Dreamweaver で変更を行います。

アセットパネルで、次のいずれかの操作を行います。
- アセットをダブルクリックします。
- アセットを選択し、「編集」ボタンをクリックします。
注意：

外部エディターでアセットを編集する必要がある場合で、外部エディターが自動的に起動しないときは、編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択して「ファイルタイプ/エディター」カテゴリーを選択し、そのアセットタイプに使用する外部エディターが定義されていることを確認します。
変更を加えます。
最後に、次のいずれかの操作を行います。
- ファイルベースのアセット（カラーや URL 以外のアセット）の場合は、使用したエディターでアセットを保存して閉じます。
- アセットが URL の場合は、URL の編集ダイアログボックスで「OK」をクリックします。
注意：

アセットがカラーの場合は、カラーを選択すると、カラーピッカーが自動的に閉じます。カラーを選択しないでカラーピッカーを閉じるには、Esc キーを押します。

別のサイトでのアセットの再利用

アセットパネルには、現在のサイト内の認識されているタイプのすべてのアセットが表示されます。現在のサイトのアセットを別のサイトで使用するには、そのアセットを別のサイトにコピーする必要があります。個別アセット、複数の個別アセット、またはお気に入りフォルダー全体を一度にコピーできます。

リモートサイトとの間でアセットをやり取りするには、まずアセットパネル内のアセットに対応するファイルをファイルパネルで見つける必要があります。

注意：

アセットパネルに表示されているサイトとは違うサイトがファイルパネルに表示されることがあります。これは、アセットパネルがアクティブドキュメントに関連付けられているためです。

ファイルパネルでのアセットファイルの検索

アセットパネルで、検索するアセットのカテゴリーを選択します。
アセットパネルでアセットの名前またはアイコンを右クリック（Windows）するか、または Control キーを押しながらクリック（Mac OS）して、コンテキストメニューから「サイトで表示」を選択します。

注意：

「サイトで表示」は、サイト内のファイルに対応していないカラーおよび URL では使用できません。

アセットファイルを選択した状態でファイルパネルが表示されます。「サイトで表示」コマンドで見つけることができるのは、アセット自体に対応しているファイルです。そのアセットを使用するファイルではありません。

アセットパネルから別のサイトへのアセットのコピー

アセットパネルで、コピーするアセットのカテゴリーを選択します。
サイトリストまたはお気に入りリストで、アセットを右クリック（Windows）するか、または Control キーを押しながらクリック（Mac OS）し、「サイトにコピー」を選択して、定義済みのすべてのサイトが一覧表示されたサブメニューからコピー先のサイト名を選択します。

注意：

お気に入りリストでは、個別のアセットの他に、お気に入りフォルダーもコピーできます

アセットは、コピー先のサイト内の対応する場所にコピーされます。Dreamweaver では、必要に応じて、コピー先のサイトの階層内に新しいフォルダーが作成されます。アセットは、コピー先のサイトのお気に入りリストにも追加されます。

注意：

コピーしたアセットがカラーまたは URL の場合は、コピー先のサイトの「お気に入り」サイトにだけ表示されます。カラーと URL はファイルに対応していないので、他のサイトにコピーするファイルがありません。