もくじ

【はじめてのAdobe Dreamweaver⑥】アセットって何?画像やカラーなどを管理するアセットの使い方

ハウツー
ウエのicon
ウエ

こんにちは、ウエさんです。
今回はDreamweaverのアセットパネルについて解説します!

アセットって何?

Illustratorにもアセットという項目があるのですが、Dreamweaverの場合とはちょっと使い方が異なります。
Dreamweaverのアセットは、サイトで使い回すための素材パーツなどを格納するもので、ここに登録してあるものはワンクリックで挿入することができます。

アセットで管理できるもの

現段階では、イメージ、ムービー、カラー、スクリプト、リンク、テンプレート、ライブラリがアセットで管理できます。
イメージ:画像関連
カラー:CSSで使う色
URL:サイトのドキュメントに記述された外部リンクのURL
メディア:動画ファイル
テンプレート:複数のページで利用する共有のレイアウト
ライブラリ:複数のページで利用する共有のスタイル
この説明だけではちょっと分かりづらいので、どのように表示されるのか、どうやって使うかを解説したいと思います。

●画像のアセット

こちらはサイトで使うために用意した画像ファイルを管理できます。
GIF、JPEG、または PNG 形式の画像ファイルであればアセットに表示されます。
今回はこの私のプロフィール画像を使ってみようと思います!
プロフィール用の画像
今制作しているサイトのフォルダの中に画像を格納するフォルダを作ります。
今回はimgという名前のフォルダを作ってみました。この中に用意した画像を入れます。
フォルダーに画像を追加
そのあとアセットパネルのイメージアイコンをクリックし、イメージアセットパネルにて更新をします。
アセットパネルを更新
アセットパネルに反映されました!!
アセットパネルに反映された

登録された画像を使ってみる

今度は登録された画像を使ってみようと思います!
まず、画像を挿入する予定のファイルを開きます。
そして挿入したい位置にカーソルをおき、アセットパネルで使いたい画像を選択して挿入ボタンを押すだけ。
登録した画像を挿入してみる
はい!挿入されました!!
画像がHTMLに挿入された
<img>タグが挿入されています!すごく便利!!!
altには何も入っていませんので、あとから自分で記述してください。
いちいち画像フォルダを確認しなくても済む上、サイズもタグに自動で記載されるのでとてもラクですね!!

●カラーのアセット

サイトで設定した背景色やテキストカラーなどの色をアセットで管理できます。
では色を設定してみましょう!
今回は<h2>タグに色を付けてみました。
そしてアセットパネルのカラーアセットを開きます。
カラーアセットパネルを使う
アセットパネルで右クリックをして、『サイトリストを更新』をします。
カラーアセットパネルでサイトリストの更新
すると、さっきh2で設定した色が表示されました!
カラーアセットパネルに色が追加された
💡
CSSファイルで色を設定したら必ずファイルを保存してからアセットを更新してください。ファイルを保存せずに更新しても、アセットには表示されません。

アセットに追加した色を他で使ってみる

アセットパネルで選択した色をドロップするとカラーコードがペーストされます。

もしアセットに追加した色が不要になったら

CSSファイルで色を削除した場合、アセットで『サイトリストの更新』もしくは『サイトリストの再作成』をすれば削除した色は消えます。
アセットに追加した色が不要になった時の削除のしかた

●URLのアセット

このアセットには、aタグ等で使用したURLが登録されます。
下記のようにリンクタグを記述します。
HTMLに記述したリンク
そしてアセットのURLパネルでサイトリストの更新を行います。
HTMLに記述したリンク先をURLのアセットパネルに追加
そうするとファイルにリンクタグで記述したURLが登録されました!
これで他のファイルでもリンク先のURLをすぐに挿入できます。
URLアセットパネルに追加完了
ファイルからリンクを削除し、アセットから不要になった場合は、また『サイトリストの更新』をすればアセットからも削除されます。

●メディアのアセット

こちらは動画用のアセットです。
<video>タグにセットした動画がアセットに登録されます。
登録方法もイメージのアセット同様に、サイトのフォルダーに使用する動画を保存し、メディアアセットパネルで『サイトリストの更新』すると登録されます。
ちなみに<video>タグは『挿入パネル』に『HTML5 Video』という名称で用意されているので簡単に挿入ができます。
メディアのアセットパネル

●スクリプトアセット

このアセットは、Javascriptファイルを追加すると登録されます。
jsファイルが少数の場合は使い勝手が良いのですが、nodeなどを使うようになった場合など、大量のjsファイルを管理するようになった時は、ファイルが全て表示されるためちょっと使い勝手はよくありません。
スクリプトのアセットパネル
ちなみにファイルを挿入すると下記のようなタグが挿入されます。一番最初に設置する時には便利ですが、あまり使わないかもですね。
<script type="text/javascript" src="node_modules/core-js/library/modules/_fix-re-wks.js">

●テンプレートのアセット

Dreamweaverにはテンプレートという機能があり、テンプレートを作成するとアセットに登録されます。
テンプレートとは、ページの雛形を作ってやることで同じレイアウトのページを量産することができます。
例えばheaderやfooterをどのページも共通にしたい場合、テンプレート化させることで、同じheaderやfooterのページを簡単に増やすことができます。
テンプレートの使い方についてはまた違う記事でご紹介したいと思います。

●ライブラリのアセット

こちらもテンプレートと似た機能です。
テンプレートはファイル単位でしたが、こちらはパーツを共有する形です。
サイトによってはバナー広告やテキストなど同じものを繰り返し使ったりすることがあります。その時、いちいちコピペせずに、ライブラリに登録し、必要な箇所に挿入して使うと非常に便利です。
スニペットと似た機能ですが、こちらはサイト独自のものを作成し登録して使っていきます。
ライブラリについても、また違う記事で詳しく解説したいと思います。

まとめ

アセットはサイトの制作にて使用する画像や色などを見やすく使いやすく管理するためのパネルです。
使わなくても困りませんが、色や画像、ライブラリなどはいちいちどこにいれたかなと確認する手間が省けて、時短につながります。
また似たものを作ってしまうといった重複防止にもなりますので、使い慣れれば非常に便利だと思います。
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。