ドキュメントウィンドウで、デザインビューに切り替え、ドキュメントの一部を選択して、ライブラリ項目として保存します。
- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
このトピックでは、Dreamweaver でライブラリ項目を作成し、ドキュメントにライブラリ項目を挿入および編集します。
ライブラリとは、Web ページに配置するために作成した個別のアセットの集合体またはコピーが格納される、Dreamweaver の特殊なファイルです。ライブラリにあるこれらのアセットは、ライブラリ項目と呼ばれます。ライブラリに保存できる項目には、イメージ、テーブル、サウンド、 Adobe Flash で作成されたファイルなどがあります。ライブラリ項目を編集するたびに、その項目を使用しているすべてのページが自動的に更新されます。
例えば、ある企業のために大規模なサイトを構築しているとします。その企業は、各ページにスローガンを表示したいと考えています。この場合、スローガンを含んだライブラリ項目を作成し、それを各ページで使用することができます。スローガンに変更があった場合、ライブラリ項目を編集すれば、各ページにあるスローガンが自動的に更新されます。
Dreamweaver では、各サイトのローカルルートフォルダー内の Library フォルダーにライブラリ項目が保存されます。各サイトには、独自のライブラリがあります。
ライブラリ項目は、テキスト、テーブル、フォーム、Java アプレット、プラグイン、ActiveX エレメント、ナビゲーションバー、イメージなど、ドキュメントの body セクションに含まれる任意のエレメントから作成できます。
イメージなど、リンクされている項目については、項目への参照だけがライブラリに格納されます。ライブラリ項目が正常に動作するためには、元のファイルが指定位置に保存されている必要があります。
ただし、ライブラリ項目にイメージを保存しておく方が便利な場合もあります。例えば、ライブラリ項目に完全な img タグを格納すると、サイト全体を通して、イメージの alt テキストを簡単に変更したり、src 属性を変更したりすることができます(ただし、イメージの width 属性と height 属性を変更する場合は、イメージエディターを使用してイメージの実際のサイズを変更するのでない限り、この方法を使用しないでください)。
ライブラリ項目にリンクが含まれていると、リンクが新しいサイトで動作しない場合があります。また、ライブラリ項目内のイメージは、新しいサイトにはコピーされません。
ライブラリ項目を使用する場合、Dreamweaver により Web ページには、ライブラリ項目自体ではなく、ライブラリ項目へのリンクが挿入されます。つまり、Dreamweaver によりそのライブラリ項目の HTML ソースコードのコピーがドキュメントに挿入され、元の外部項目への参照を含む HTML コメントが追加されます。この外部項目への参照によって、自動更新が可能になっています。
Dreamweaver ビヘイビアーが適用されているエレメントを含むライブラリ項目を作成すると、Dreamweaver はエレメントおよびそのイベントハンドラー(onClick、onLoad、onMouseOver など、アクションのトリガーとなるイベントを指定するための属性や、イベントが発生したときに呼び出すアクション)をライブラリ項目ファイルにコピーします。Dreamweaver では、関連付けられた JavaScript 関数はライブラリ項目にコピーされません。ただし、ライブラリ項目をドキュメントに挿入すると、適切な JavaScript 関数がまだ配置されていなければ、Dreamweaver によってドキュメントの head セクションに自動的に挿入されます。
JavaScript を手作業でコーディングする(Dreamweaver のビヘイビアーを使用せずに作成する)場合は、「JavaScript の呼出し」ビヘイビアーを使用してコードを実行すると、ライブラリ項目の一部にすることができます。コードの実行に Dreamweaver のビヘイビアーを使用しない場合、コードはライブラリ項目の一部として保持されません。
ライブラリ項目のビヘイビアーを編集する場合、特別な条件があります。スタイルシートのエレメントのコードは head セクションに属するため、スタイルシートをライブラリ項目に含めることはできません。
選択に基づいたライブラリ項目の作成
-
-
ツール/ライブラリ/ライブラリにオブジェクトを追加を選択します。
-
新しいライブラリ項目名を入力し、Enter キー(Windows)または Return キー(Mac OS)を押します。
Dreamweaver により、各ライブラリ項目は、サイトのローカルルートフォルダーの Library フォルダーに、ファイル拡張子 .lbi が付いた個別のファイルとして保存されます。
空のライブラリ項目の作成
-
ドキュメントウィンドウで何も選択されていないことを確認します。
選択されているものがあると、その選択項目が新しいライブラリ項目に配置されます。
-
アセットパネルで、「ライブラリ」カテゴリーを選択します。
-
パネルの下部にある「新規ライブラリ項目」ボタン をクリックします。
-
項目が選択されている状態で、項目の名前を入力して、Enter キー(Windows)または Return キー(Mac OS)を押します。
ライブラリ項目のドキュメントへの挿入
ライブラリ項目をページに追加すると、ライブラリ項目への参照と共に実際のコンテンツがドキュメントに挿入されます。
-
ドキュメントウィンドウに挿入ポイントを配置します。
-
アセットパネルで、「ライブラリ」カテゴリーを選択します。
-
次のいずれかの操作を実行します。
- ライブラリ項目をアセットパネルからドキュメントウィンドウにドラッグします。
注意:項目への参照をドキュメントに含めずに、ライブラリ項目のコンテンツを挿入するには、Ctrl キー(Windows)または Option キー(Mac OS)を押しながら、アセットパネルのライブラリ項目をドラッグします。この方法でライブラリ項目を挿入すると、ドキュメント内でライブラリ項目を編集できます。ただし、そのライブラリ項目が使用されているページを更新しても、ドキュメントは更新されません。
ライブラリ項目を選択し、「挿入」をクリックします。
ライブラリ項目の編集とドキュメントの更新
ライブラリ項目を編集するときは、その項目が使用されているドキュメントをすべて更新できます。更新しない場合、ドキュメントはライブラリ項目に関連付けられたまま保持されます。ドキュメントは後から更新できます。
ライブラリ項目の名前を変更してドキュメントやテンプレートとの関連付けを解除したり、サイトのライブラリからライブラリ項目を削除したり、不明なライブラリ項目を再作成することができます。
ライブラリ項目の編集
-
アセットパネルで、「ライブラリ」カテゴリーを選択します。
-
ライブラリ項目を選択します。
-
「編集」ボタンをクリックするか、またはライブラリ項目をダブルクリックします。
ライブラリ項目の編集のために、Dreamweaver により、ドキュメントウィンドウに似た新しいウィンドウが表示されます。グレーの背景は、編集しているのがドキュメントではなくライブラリ項目であることを示しています。
-
変更を加えて、その内容を保存します。
-
そのライブラリ項目を使用しているローカルサイトのドキュメントを更新するかどうかを指定します。直ちに更新するには、「更新」を選択します。「更新しない」を選択すると、ツール/ライブラリ/現在のページの更新または「サイト全体の更新」を選択するまで、ドキュメントは更新されません。
すべてのライブラリ項目に最新バージョンを使用するための現在のドキュメントの更新
-
ツール/ライブラリ/現在のページを更新を選択します。
サイト全体、または特定のライブラリ項目が使用されているすべてのドキュメントの更新
-
ツール/ライブラリ/サイト全体の更新を選択します。
-
更新場所ポップアップメニューで、更新する対象を指定します。
選択したサイトのすべてのページを更新して、すべてのライブラリ項目に最新バージョンを使用するには、「サイト全体」を選択し、横のポップアップメニューでサイト名を選択します。
現在のサイトで特定のライブラリ項目を使用しているすべてページを更新するには、「次を含むファイル」を選択し、横のポップアップメニューでライブラリ項目名を選択します。
-
「更新」オプションで「ライブラリ項目」が選択されていることを確認してください。注意:
同時にテンプレートを更新する場合は、「テンプレート」も選択します。
-
「開始」をクリックします。
Dreamweaver により、指定のファイルが更新されます。「ログを表示」オプションを選択した場合、Dreamweaver はファイルが正常に更新されたかどうかなどの情報をレポートとして表示します。
ライブラリ項目の名前の変更
-
アセットパネルで、「ライブラリ」カテゴリーを選択します。
-
ライブラリ項目を選択し、間をおいてもう一度クリックします。ダブルクリックしないでください。ダブルクリックすると、編集できるようにアセットが開いてしまいます。
-
新しい名前を入力します。
-
任意の位置をクリックするか、Enter キー(Windows)または Return キー(Mac OS)を押します。
-
「更新」または「更新しない」を選択して、そのライブラリ項目を使用しているドキュメントを更新するかどうかを指定します。
ライブラリからのライブラリ項目の削除
ライブラリ項目を削除すると、Dreamweaver によりライブラリ項目はライブラリから削除されますが、そのライブラリ項目が使用されているドキュメントの内容は変更されません。
-
アセットパネルで、「ライブラリ」カテゴリーを選択します。
-
ライブラリ項目を選択します。
-
「削除」ボタンをクリックするか、または Delete キーを押し、ライブラリ項目を削除することを確認します。注意:
削除したライブラリ項目は、「取り消し」を使って元に戻すことはできません。ただし、ライブラリ項目を再作成することができます。
不明の、または削除されたライブラリ項目の再作成
-
ドキュメント内のライブラリ項目のインスタンスを選択します。
-
プロパティインスペクター(ウィンドウ/プロパティ)の「再作成」ボタンをクリックします。
ライブラリ項目のハイライト表示のカスタマイズ
「ハイライト」環境設定によって、ライブラリ項目のハイライトカラーをカスタマイズしたり、ライブラリ項目のハイライトの表示と非表示を切り替えることができます。
ライブラリ項目のハイライトカラーの変更
-
編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。
-
環境設定ダイアログボックスの左側にあるリストから「ハイライト」カテゴリーを選択します。
-
「ライブラリ項目」カラーボックスをクリックし、カラーピッカーを使用してハイライトカラーを選択します。または、テキストボックスにハイライトカラーの 16 進数値を入力します。
-
「表示」を選択して、ドキュメントウィンドウにハイライトカラーを表示します。
-
「OK」をクリックします。
ドキュメントウィンドウでハイライトの表示と非表示を切り替えるには
-
ハイライトを表示するには、表示/デザインビューのオプション/ビジュアルエイド/不可視エレメントを選択します。ハイライトを非表示にするには、「不可視エレメント」を選択解除します。
ライブラリ項目のプロパティの編集
プロパティインスペクターを使用すると、ライブラリ項目を開いて編集したり、選択したライブラリ項目をソースファイルから切り離すことができます。また、現在選択しているライブラリ項目で項目を上書きすることもできます。
-
ドキュメント内のライブラリ項目を選択します。
-
プロパティインスペクター(ウィンドウ/プロパティ)で、次のいずれかのオプションを選択します。
ソース
ライブラリ項目のソースファイルの名前と位置が表示されます。この情報は編集できません。
開く
編集用にライブラリ項目のソースファイルを開きます。これは、アセットパネルのライブラリ項目を選択して「編集」ボタンをクリックする操作と同じです。
オリジナルから切り離す
選択したライブラリ項目とそのソースファイルの間のリンクを破棄します。ドキュメント内の切り離されたライブラリ項目を編集することはできますが、既にライブラリ項目ではないので、元のライブラリ項目を変更しても更新されません。
再作成
元のライブラリ項目を現在の選択項目で上書きします。元のライブラリ項目が不明、または誤って削除された場合にこのオプションを使用すると、ライブラリ項目を再作成できます。
ドキュメント内でライブラリ項目を編集可能にする
ドキュメントに追加したライブラリ項目をそのページ用に編集する場合は、ドキュメント内の項目とライブラリとのリンクを解除する必要があります。ライブラリ項目のインスタンスを編集可能にすると、ライブラリ項目を変更してもそのインスタンスは更新されなくなります。
-
現在のドキュメント内のライブラリ項目を選択します。
-
プロパティインスペクター(ウィンドウ/プロパティ)の「オリジナルから切り離す」をクリックします。
ライブラリ項目のビヘイビアーの編集
ライブラリ項目のビヘイビアーを編集するには、項目をドキュメントに挿入して編集可能にする必要があります。変更を行った後は、ライブラリ内の項目をドキュメント内の編集済みの項目で置き換えて、ライブラリ項目を再作成することができます。
-
ライブラリ項目が含まれているドキュメントを開きます。
ライブラリ項目の名前、およびライブラリ項目に含まれる正確なタグをメモしておきます。この情報は、後で必要になります。
-
ライブラリ項目を選択し、プロパティインスペクター(ウィンドウ/プロパティ)の「オリジナルから切り離す」をクリックします。
-
ビヘイビアーが関連付けられているエレメントを選択します。
-
ビヘイビアーパネル(ウィンドウ/ビヘイビアー)で、変更するアクションをダブルクリックします。
-
表示されるダイアログボックスで変更を行い、「OK」をクリックします。
-
アセットパネルで、「ライブラリ」カテゴリーを選択します。
-
元のライブラリ項目の名前を大文字小文字の使い分けも含めて正確に記録し、元のライブラリ項目を選択し、「削除」ボタンをクリックします。
-
ドキュメントウィンドウで、ライブラリ項目を構成しているすべてのエレメントを選択します。
必ず、元のライブラリ項目にあったエレメントと同じものを選択してください。
-
アセットパネルの「新規ライブラリ項目」ボタンをクリックし、削除したライブラリ項目とスペルも大文字小文字の使い分けも同じ名前を新しいライブラリ項目に付けます。
-
そのライブラリ項目をサイト内の他のドキュメントでも更新するには、ツール/ライブラリ/サイト全体の更新を選択します。
-
更新場所ポップアップメニューで、「次を含むファイル」を選択します。
-
隣接するポップアップメニューで、作成したライブラリ項目の名前を選択します。
-
「更新」オプションで、「ライブラリ項目」が選択されていることを確認し、「開始」をクリックします。
-
更新が完了したら、「閉じる」をクリックします。