もくじ

【はじめてのAdobe Dreamweaver⑧】パーツをライブラリに登録して繰り返し使おう!

ハウツー
ウエのicon
ウエ

こんにちは、ウエさんです。
今回はDreamweaverのライブラリの使い方についてご紹介します!

ライブラリって何?

Dreamweaverのライブラリとは、サイトで共通のコンテンツ等をパーツとして登録し、それを必要な場所で使いまわせる機能です。
例えば、バナーなどは同じコードを各ページに貼り付けたりしますが、毎回コピーしたりするのはちょっと面倒ですが、ライブラリに登録しておけば、必要な時にすぐに挿入できます。

スニペットとの違い

同じような機能でスニペットがあります。
スニペットは登録しておけばどのサイト制作でも使うことができますが、ライブラリは各サイトに依存します。
そのため、他のサイトでは使い回すことはできません。
スニペットにはどのサイトでも使える使い回しのきくもの
ライブラリにはサイト独自のもので、繰り返し使用するパーツ
このような感じで使い分けをしていくと良いです。

■ライブラリの登録方法

ライブラリへの登録方法は簡単です。

①ライブラリに登録したいパーツを作る

今回は私の猫の画像を使ってバナーもどきを作り、それをライブラリに登録しようと思います。
<div class="banner">
  <p>猫のバナー</p>
  <img src="../img/ue.png" width="371" height="371" alt=""/>
</div>
とりあえずスタイルも入れてみました。
.banner {
  border: 2px solid#676767;
  display: inline-block;
  text-align: center;
  padding: 5px
}
.banner img {
  width: 100px;
  height: auto;
}
Dreamweaverの画面上ではこのようになっています。
ライブラリ用のバナーの作成

②パーツとして、ライブラリに登録

ライブラリに登録する方法として、アセットパネルを使う方法があります。
今回はアセットパネルを使う方法で登録しようと思います!
右サイドのアセットパネルのライブラリを開きます。
ライブラリのアセットパネル
次にエディターでライブラリに登録したいコードを選択し、ライブラリアセットパネルで『新規ライブラリ項目』をクリックします。
するとスタイルシートが関連付いていないという旨のポップアップが出ますが、OKで閉じます。
ライブラリの登録方法
今回ライブラリの名前は分かりやすく「猫のバナー」としています。
さきほどのポップアップを閉じると今度は『ファイルの更新』がでますので、ライブラリを作成したファイルライブラリのリンクを更新します。
ファイルの更新
すると、下記のように登録できました!
ライブラリを登録
エディター側にはこのようにタグがコメントアウトで囲まれ、グレーアウトされました。
<!-- #BeginLibraryItem "/Library/猫のバナー.lbi" -->
   <div class="banner">
     <p>猫のバナー</p>
        <img src="img/ue.png" width="371" height="371" alt="猫"/> </div>
    <!-- #EndLibraryItem -->
グレーアウトしているので、もうこのファイルからは修正はできません。
バナーにコードを追加する場合は、登録したライブラリファイルで編集します。

■登録したライブラリを編集する

アセットパネルで、修正したいライブラリをクリックします。するとエディターにファイルが開きます。
ライブラリは.lbiという拡張子で保存されています。
登録したライブラリを編集
ライブラリファイルからであれば、登録したタグを編集することができ、このファイルを編集すると、一括で挿入先に反映することができます。
ちなみにライブラリファイルの保存先はこのようになっています。
Libraryフォルダが自動で生成され、その中に保存されています。
ライブラリファイルの保存先

①ライブラリを編集する

ではちょっと編集してみましょう!
エディターでライブラリを開き、編集します。
今回はテキストを追加しました。インデントも崩れがちなので、ここも修正しておきましょう。
ライブラリファイルの編集
これを保存します。

②編集したライブラリファイルを保存する

ファイルを保存すると下記のようなダイアログボックスが出るので、更新ボタンを押します。
ライブラリ項目の更新
次にページの更新が出ますが、更新場所を「サイト全体」に変更し、開始ボタンを押します。
これでサイト全体が更新されました。
ページの更新
💡
現在閉じているファイルについては次に開く時編集したライブラリが反映されていますが、現在開いているファイルについては反映されていません。

③現在開いているファイルに反映させる

現在エディターで開いているファイルについては個別に更新をかける必要があります。
更新をかける必要のあるファイルを選択しエディターに表示させます。
そしてライブラリアセットパネルで右クリックし、『現在のページを更新』をします。
これで更新されます!
ライブラリの反映のためページを更新

もしビューで確認した時、崩れていたら……

リロードすれば解決しますので、リロードしてみてください。
ライブラリファイル登録後、ビューで確認したら崩れていたら
💡
何やっても反映されない、またちょっと様子が変!となったら、一旦ファイルを全て閉じて、開き直してください。Dreamweaverがちょっと重くて、たまに不具合を起こすことがあります。うまく反映されない時は、一旦開き直すようにしてください。

■登録したライブラリを使う

では今度は登録したライブラリを使ってみます!
前回のテンプレートの記事で作ったpage1.htmlというファイルに、猫のバナーライブラリを挿入してみます。
ファイルを開き、表示したい箇所にライブラリを挿入します。
ライブラリの挿入のやり方
はい、挿入できました!
ライブラリを挿入したところ
このように複数のページに同じコードを簡単に挿入できるので、制作が捗ります。

まとめ

サイト内で挿入箇所は一定ではなく、好きな場所に表示したい場合はこのライブラリが便利です。
コードの変更もライブラリファイルを編集するだけで済むので、複数のページで同じコードを使うのであれば、ライブラリに登録しておくと作業もラクになります。
せっかくDreamweaverを使うのであればスニペットやテンプレートなどと併せて使うと、捗るのでぜひ使ってみてください。
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。