リンクの設定方法（Dreamweaver CC）

検索

最終更新日 : 2021年4月28日 | 次にも適用 : Adobe Dreamweaver CC (2014), Adobe Dreamweaver CC (2015)

Dreamweaver

アプリを開く

Adobe Dreamweaver CC で作成したページ内のテキストや画像に、他のページへのリンクを設定する方法を説明します。

A. リンクを設定する方法

Dreamweaver を起動し、編集するファイルを開きます。
リンクを指定するテキストをドラッグして選択します。

※　画像をクリックして、画像にリンクを設定することもできます。
編集／リンク／リンクの作成を選択します。

注意：

プロパティウィンドウが表示されていないと、「リンクの作成」を選択できません。プロパティウィンドウが表示されていない場合は、ウィンドウ／プロパティを選択し、画面下部に移動します。
ファイルの選択ダイアログボックスが表示されます。以下のいずれかの操作を行い、「OK」をクリックします。
- サイト内の他のページにリンクする場合は、該当するファイルを選択します。
- 外部サイトにリンクする場合は、「URL」テキストフィールドに、リンク先サイトのアドレスを「http://」からすべて入力します。
リンクが設定されます。

プレビューでリンクを確認する

デザインビューやライブビューでは、リンクをクリックしてもリンク先のページは開かれません。リンクが正しく設定されているか、実際にプレビューして確認してみましょう。外部サイトの URL や、指定ファイルの誤りなど、思わぬミスが見つかるかもしれません。

プレビューは、ファイル／リアルタイムプレビューから任意のブラウザを選択して行うことができます。

B. リンクのスタイルを変更する方法

スタイルを何も指定していない場合、リンクテキストはブルーになり、下線が表示されます。このリンクのスタイルは自由に変更することができます。

Dreamweaver を起動し、ページを開きます。

以下のような、すでにリンクを含むページに対してスタイルを設定します。
プロパティパネルの「CSS」をクリックして「ページプロパティ」をクリックします。

※ プロパティパネルが表示されていない場合は、ウィンドウ／プロパティを選択して表示します。

※ 「ページプロパティ」が表示されない場合は、デザインビューまたはコードビューで本文部分を一度クリックすると、表示されます。
ページプロパティダイアログボックスが表示されたら、カテゴリから「リンク（CSS）」を選択します。
ページプロパティダイアログボックスの「リンク（CSS）」でリンクのスタイルを設定することができます。

ここでは、「リンクカラー」を変更し、アンダーラインを「下線を付けない」に設定します。
設定が完了したら、「OK」をクリックします。
設定したスタイルが適用されます。

※ ここでは、下線が消え、テキストのカラーが赤くなりました。

特定のリンクのみ個別のスタイルを指定

上記の手順を行うと、ページ内のリンクすべてに同じスタイルが適用されますが、特定の箇所に異なるスタイルを適用することも可能です。

Dreamweaver を起動し、複数のリンクを含むページを開きます。

ここでは例として、上記の手順で赤色のリンクを設定したページを使用し、スタイルを変更していきます。
CSS デザイナーパネルを開きます。プラスアイコンで表示されている「CSS ソースを追加」をクリックし、「ページで定義」を選択します。

※ CSS デザイナーパネルが表示されていない場合は、ウィンドウ／CSS デザイナーを選択します。
「<style>」ソースが作成されます。
プラスアイコンで表示されている「セレクターの追加」をクリックし、セレクターの名前を入力します。

ここでは「.brown a」と入力しています。
※ 先頭に .（ドット）を入力します。
作成したセレクターが選択されていることを確認し、プロパティセクションの「テキスト」を選択します。

任意のテキストカラーを設定します。
スタイルを変更するテキストの箇所にカーソルを置きます。
ウィンドウ左下に表示されているタグセレクタまたはソースコード上でリンクを囲むタグをクリックします。

ここでは、 <h4> を選択します。
プロパティパネルで「HTML」を選択し、「クラス」のプルダウンをクリックします。

手順 4. で設定した名前のセレクターを選択します。

※ プロパティパネルが表示されていない場合は、ウィンドウ／プロパティを選択します。
特定のリンクのみ設定した色に変更されます。