アセットパネル内でアセットを選択します。
最終更新日 :
2024年4月25日
現在のサイトのアセットを管理するには、Dreamweaver のアセットパネルを使用します。
Adobe Dreamweaver を使用すると、イメージ、ムービー、カラー、スクリプト、リンクなど、サイトに保存されているアセットを管理およびプレビューすることができます。 またアセットは、現在のドキュメントのページに直接ドラッグして挿入することができます。
アセットは様々なソースから取得します。 例えば、Adobe Photoshop や Adobe Animate などのアプリケーションでアセットを作成したり、同僚から受け取ったり、クリップアート CD やグラフィック web サイトからコピーしたりできます。
Dreamweaver では、ライブラリとテンプレートという 2 つの特殊なアセットにもアクセスできます。 いずれもリンクされたアセットなので、Dreamweaver ライブラリ項目またはテンプレートを編集すると、 はこれらのアセットを使用しているすべてのドキュメントを更新します。 通常、ライブラリ項目は、サイトロゴや著作権表示など、小さなデザインアセットを表しています。 大きなデザイン領域を制御する場合は、ライブラリ項目ではなくテンプレートを使用します。
現在のサイトのアセットを管理するには、アセットパネル（ウィンドウ／アセット）を使用します。 アセットパネルには、ドキュメントウィンドウ内のアクティブなドキュメントに関連しているサイトのアセットが表示されます。
メモ
アセットパネルにアセットを表示するには、ローカルサイトを定義しておく必要があります。
Assetsパネルでは、アセットをさまざまな方法で表示できます：
サイトリスト
サイト内のすべてのアセット（サイト内の任意のドキュメントで使用されている カラーや 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 アイコンをダブルクリックすることで、対応するアセットをリサンプリングすることもできます。 Creative Cloud ライブラリでのアセットの再利用について詳しくは、Dreamweaver の Creative Cloud ライブラリを参照してください。
プレビュー領域でのアセットの表示
カテゴリー内のアセットの表示
アセットパネルの左側にある
カテゴリアイコンをクリックします。
アセットの並べ替え
列見出しをクリックします。
例えば、画像のリストをタイプ別に並べ替える（すべての GIF 画像、すべての JPEG 画像などをまとめる）には、 タイプ列の見出しをクリックします。
列のサイズ変更
2つの列見出しを区切る線をドラッグします。
プレビュー領域のサイズ変更
分割バー（プレビュー
エリアとアセットのリスト間）を上下にドラッグします。
アセットパネルの更新
Dreamweaver は最初にサイトキャッシュを読み取る必要があるため、サイトリストの作成に数秒かかる場合があります。
次のような変更は、アセットパネルにすぐには反映されません。 例えば、サイトにアセットを追加したり、サイトからアセットを削除した場合、その変更は、「更新サイトリスト」ボタンをクリックしてサイトリストを更新するまでアセットパネルに反映されません。 Dreamweaver の外部で（Windows エクスプローラーや Finder などを使用して）アセットを追加または削除した場合は、Assets パネルを更新するためにサイトキャッシュを再構築する必要があります。
サイト内の特定のカラーや URL のインスタンスだけを削除した場合、またはこれまでサイトで使用されていなかったカラーや URL が含まれる新規ファイルを保存した場合は、その変更は、サイトリストを更新するまでアセットパネルに反映されません。
- サイトリストを手動で更新するには、「サイトリストを更新」ボタン
をクリックします。Dreamweaver はサイトキャッシュを作成するか、
必要に応じて更新します。 - サイトリストを更新してサイト キャッシュを手動で再構築するには、アセットリストで右クリック（Windows）または Command キーを押しながらクリック（Macintosh）してから、「サイトリストを更新」を選択します。
ドキュメントへのアセットの追加
一般的なアセットは、ドキュメントウィンドウのライブビュー、コードビューおよびデザインビューにドラッグするか、パネルの「挿入」ボタンを使用して、ドキュメントに挿入できます。 アセットパネルのリスト表示とプレビューペインの両方からアセットをドラッグできます。
注意：プレビューペインからのドラッグは Mac でのみサポートされています。
デザインビューまたはライブビューでカラーや URL を挿入できます。 デザインビューでは、選択した要素にカラーとURLを適用することができます。
ドキュメント内で、アセットを表示したい場所に挿入ポイントを配置します。
アセットパネルで、左側のアセットカテゴリボタンから選択します。
メモ
テンプレート以外のカテゴリーを選択します。 テンプレートはドキュメント全体に適用されます。ドキュメントに挿入することはできません。
パネルの上位でサイトまたはお気に入りのいずれかを選択し、アセットを選択します。
ライブラリ項目にはサイトまたはお気に入りのリストがありません。ライブラリ項目を挿入する場合は、この手順をスキップしてください。
次のいずれかの操作を実行します。
アセットをパネルからドキュメントにドラッグします。 リスト表示およびプレビューペインからドラッグすることができます。
注意：Windows では、プレビューペインからアセットをドラッグできません。
スクリプトはドキュメントウィンドウのヘッドコンテンツ領域にドラッグできます。この領域が表示されていない場合は、表示／ヘッドコンテンツを選択してください。
パネルでアセットを選択し、「挿入」をクリックします。
挿入されたアセットがカラーの場合、挿入ポイントの後に表示されるテキストに適用されます。
アセットパネルを使用してテキストにカラーを適用する
アセットパネルには、テキスト、テーブルボーダー、背景などの様々な要素に既に適用したカラーが表示されます。
デザインビューで、次の手順を実行します。
ドキュメント内のテキストを選択します。
アセットパネルで、カラーカテゴリを選択します。
目的のカラーを選択し、「適用」をクリックします。
ライブビューで、次の手順を実行します。
アセットパネルで、カラーカテゴリを選択します。
次のいずれかの操作を実行します。
- アセットパネルでカラーを右クリックし、「カラーの値をコピー」をクリックします。 カラーの値がクリップボードにコピーされます。 CSS Designer でカラー値をペースト（Ctrl+V、Cmd+V）できるようになります。
- プレビューからカラーをドラッグし、ライブビューのエレメントをマウスでポイントします。カラーをドロップすると、新しい CSS ルールダイアログが表示され、「OK」をクリックすると、選択した要素にカラーが適用されます。
- アセットパネルで「適用」をクリックします。 新しい CSS ルールダイアログが表示され、「OK」をクリックすると、選択した要素にカラーが適用されます。
画像またはテキストに URL を割り当てる
デザインビューで、次の手順を実行します。
テキストまたは画像を選択します。
アセットパネルで、URL が保存されている場所に応じて、サイトまたはお気に入りビューの URL カテゴリを選択します。
メモ
サイトのファイルの URL は、デフォルトでサイトビューに保存されます。お気に入り表示には、自分で追加した URL が保存されています。
URL を選択します。
次のいずれかの操作を実行します。
パネルからデザインビューの選択範囲に URL をドラッグします。
URL を選択して、「挿入」をクリックします。
ライブビューで、次の手順を実行します：
アセットパネルで、URL が保存されている場所に応じて、サイト表示またはお気に入り表示のいずれかで URL カテゴリを選択します。
次のいずれかの操作を実行します。
- プレビューまたはリストビューから URL をドラッグします。 ライブビューでエレメント上にマウスポインターを置きます。 URL をドロップすると、<a> タグがライブビューでハイライト表示された要素を囲みます。
- ライブビューで目的のエレメントをクリックします。 アセットパネルで URL を選択し、「適用」をクリックします。 選択した要素が <a> タグで囲まれます。
アセットの選択と編集
アセットパネルでは、複数のアセットを一度に選択できます。これは、アセットの編集を迅速に開始する方法でもあります。
複数のアセットの選択
アセットパネルでアセットを選択します。
以下のいずれかの方法でその他のアセットを選択します。
Shift キーを押しながらクリックして、連続するアセットの範囲を選択します。
Ctrl キー（Windows）または Command キー（Mac）を押しながらクリックして、個別のアセットを選択に追加します（既存の選択に隣接しているかどうかに関係なく）。Ctrl キーまたは Command キーを押しながら選択済みのアセットをクリックして選択を解除します。
アセットの編集
アセットパネルでアセットを編集する場合、動作はアセットタイプによって異なります。画像などの一部のアセットでは、外部エディターを使用します。そのアセットタイプ用のエディターを定義している場合は、自動的に開きます。カラーとURLはお気に入りリストでのみ編集することができます。テンプレートやライブラリアイテムを編集する場合は、Dreamweaver 内で変更を行います。
アセットパネルで、以下のいずれかを実行します：
アセットをダブルクリックします。
アセットを選択してから、編集ボタンをクリックします。
メモ
外部エディターでアセットを編集する必要がある場合で、外部エディターが自動的に起動しないときは、編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択して「ファイルタイプ/エディター」カテゴリを選択し、そのアセットタイプに使用する外部エディターが定義されていることを確認します。
変更を加えます。
最後に、次のいずれかの操作を行います。
ファイルベースのアセット（カラーや URL 以外のアセット）の場合は、使用したエディターでアセットを保存して閉じます。
アセットが URL の場合は、URL の編集ダイアログボックスで「OK」をクリックします。
メモ
アセットがカラーの場合は、カラーを選択すると、カラーピッカーが自動的に閉じます。 カラーを選択しないでカラーピッカーを閉じるには、Esc キーを押します。
別のサイトでのアセットの再利用
Assetsパネルには、現在のサイト内のすべてのアセット（認識可能なタイプ）が表示されます。現在のサイトのアセットを別のサイトで使用するには、そのアセットを他のサイトにコピーする必要があります。個別のアセット、個別のアセットのセット、またはお気に入りフォルダー全体を一度にコピーできます。
アセットをリモートサイトに転送したり、リモートサイトから転送したりする前に、アセットパネルのアセットに対応するファイルパネル内のファイルを見つける必要がある場合があります。
メモ
ファイルパネルには、アセットパネルとは異なるサイトが表示される場合があります。これは、アセットパネルがアクティブなドキュメントに関連付けられているためです。
ファイルパネルでアセットファイルを検索
アセットパネルで、検索するアセットのカテゴリを選択します。
アセットパネルでアセットの名前またはアイコンを右クリック（Windows）またはControlキーを押しながらクリック（Mac）してから、コンテキストメニューから「サイト内で検索」を選択します。
メモ
「サイト内で検索」は、サイト内のファイルに対応していないカラーやURLでは使用できません。
ファイルパネルが開き、アセットファイルが選択された状態になります。「サイト内で検索」コマンドは、アセット自体に対応するファイルを検索します。そのアセットを使用するファイルは検索しません。
アセットパネルから別のサイトにアセットをコピーする
アセットパネルで、コピーするアセットのカテゴリを選択します。
サイトリストまたはお気に入りリストで1つ以上のアセットを右クリック（Windows）またはControlキーを押しながらクリック（Macintosh）し、「サイトにコピー」を選択して、定義済みのすべてのサイトが表示されるサブメニューからターゲットサイト名を選択します。
メモ
お気に入りリストでは、お気に入りフォルダーと個人アセットをコピーできます。
アセットは、ターゲットサイトの対応する場所にコピーされます。Dreamweaverは、必要に応じてターゲットサイトの階層に新しいフォルダーを作成します。アセットは、ターゲットサイトのお気に入りリストにも追加されます。
メモ
コピーしたアセットがカラーまたはURLの場合、ターゲットサイトのお気に入りリストにのみ表示されます。カラーとURLはファイルに対応していないため、他のサイトにコピーするファイルがありません。
