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

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

  1. Dreamweaver を起動し、編集するファイルを開きます。

  2. リンクを指定するテキストをドラッグして選択します。

    ※ 画像をクリックして、画像にリンクを設定することもできます。

  3. 編集/リンク/リンクの作成 を選択します。

    注意:

     

    プロパティウィンドウが表示されていないと、「リンクの作成」を選択できません。プロパティウィンドウが表示されていない場合は、ウィンドウ/プロパティ を選択し、画面下部に移動します。

  4. ファイルの選択ダイアログボックスが表示されます。以下のいずれかの操作を行い、「OK」をクリックします。

    • サイト内の他のページにリンクする場合は、該当するファイルを選択します。
    • 外部サイトにリンクする場合は、「URL」テキストフィールドに、リンク先サイトのアドレスを「http://」からすべて入力します。
  5. リンクが設定されます。

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

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

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

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

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

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

    以下のような、すでにリンクを含むページに対してスタイルを設定します。

  2. プロパティパネルの「CSS」をクリックして「ページプロパティ」をクリックします。

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

    ※ 「ページプロパティ」が表示されない場合は、デザインビューまたはコードビューで本文部分を一度クリックすると、表示されます。

  3. ページプロパティダイアログボックスが表示されたら、カテゴリから「リンク(CSS)」を選択します。

  4. ページプロパティダイアログボックスの「リンク(CSS)」でリンクのスタイルを設定することができます。

    ここでは、「リンクカラー」を変更し、アンダーラインを「下線を付けない」に設定します。

  5. 設定が完了したら、「OK」をクリックします。

  6. 設定したスタイルが適用されます。

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

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

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

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

    ここでは例として、上記の手順で赤色のリンクを設定したページを使用し、スタイルを変更していきます。

  2. CSS デザイナーパネルを開きます。プラスアイコンで表示されている「CSS ソースを追加」をクリックし、「ページで定義」を選択します。

    ※ CSS デザイナーパネルが表示されていない場合は、ウィンドウ/CSS デザイナー を選択します。

  3. 「<style>」ソースが作成されます。

  4. プラスアイコンで表示されている「セレクターの追加」をクリックし、セレクターの名前を入力します。

    ここでは「.brown a」と入力しています。
    ※ 先頭に .(ドット)を入力します。

  5. 作成したセレクターが選択されていることを確認し、プロパティセクションの「テキスト」を選択します。

    任意のテキストカラーを設定します。

  6. スタイルを変更するテキストの箇所にカーソルを置きます。

  7. ウィンドウ左下に表示されているタグセレクタまたはソースコード上で リンクを囲むタグをクリックします。

    ここでは、 <h4> を選択します。

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

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

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

  9. 特定のリンクのみ設定した色に変更されます。

アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー