注意:

最新の Dreamweaver をご利用の場合は、以下の文書をご覧ください。

リンクの設定方法(Dreamweaver CC)

この文書は、Dreamweaver CS4/CS5/CS5.5 の基本的な使用方法を分かりやすく図解した内容となっています。

作成したページ内のテキストや画像に、他のページへのリンクを設定してみましょう。Dreamweaver の機能を使用して、テキストリンクのスタイルを簡単に設定することができます。

リンクを設定する方法

 

Dreamweaver を起動し、編集したいファイルを開きます。

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

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

[修正] メニューの [リンクの作成] をクリックします。

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

  • サイト内の他のページにリンクする場合は、該当するファイルを選択します。
  • 外部サイトにリンクする場合は、[URL] テキストフィールドに、リンク先サイトのアドレスを「http://」からすべて入力します。
エラーメッセージが表示されたら
「このファイルはサイトのルートフォルダ 'サイト名' の外にあるため、サイトをパブリッシュした際、アクセスできない可能性があります。」と表示されることがあります。これはサイトに指定したフォルダの外のファイルを選択すると表示されます。サイトで使用するファイルは、あらかじめサイトフォルダ内に保存しておいてください。または、このメッセージで [はい] を選択すると、ファイルがサイトフォルダ内にコピーされます。

リンクが設定されます。 

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

デザインビューでは、リンクをクリックしてもリンク先のページは開かれません。リンクが正しく設定されているか、実際にプレビューして確認してみましょう。

外部サイトの URL や、指定ファイルの誤りなど、思わぬミスが見つかるかもしれません。

プレビューは、[ファイル] メニューの [ブラウザでプレビュー] から任意のブラウザを選択して行うことができます。

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

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

 

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

[フォーマット] メニューの [CSS スタイル] をポイントし、[新規] をクリックします。

以下の操作を行い、[OK] をクリックします。

  • 画面最上部のポップアップメニューから [タグ(HTML エレメントを再定義)] を選択します。
  • セレクタ名に「a」と入力します。

[a の CSS ルール定義] ダイアログボックスが表示されます。[カテゴリ] リスト内の [タイプ] をクリックします。

右下のカラーピッカーを使用して、任意のカラーを選択します。ここでは例として赤を選択しています。

 

[Text-decoration] で [none] にチェックを入れ、[OK] をクリックします。

スタイルが適用されます。下線が消え、テキストのカラーが赤に変更されます。

 

一括ではなく特定のリンクに個別のスタイルを指定

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

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

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

     
  2. [フォーマット] メニューの [CSS スタイル] をポイントし、[新規] をクリックします。



     
  3. 以下のように設定し、[OK] をクリックします。

    ●  [セレクタタイプ] で [複合(選択に基づく)] を選択します。

    ●  [セレクタ名] に [.green a](頭にドットが入ります)と入力します。



     
  4. [.green a の CSS ルール定義] ダイアログボックスが表示されます。右下のカラーピッカーで任意のカラーを選択します。ここでは例として緑を選択しています。



     
  5. [OK] をクリックします。

     
  6. デザインビューで、スタイルを変更するテキストの箇所にカーソルを置きます。



     
  7. デザインビューの左下に表示されているタグセレクタで <p> をクリックします。



     
  8. [HTML] の [クラス] プルダウンメニューから [green] を選択します。



     
  9. リンクのカラーが変更されます。

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

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

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

リーガルノーティス   |   プライバシーポリシー