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

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

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

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

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

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

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

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

リンクが設定されます。 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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