Webページを作っても、Webサイト内の各ページでリンクされていなかったらページの行き来をすることができません。Dreamweaverで簡単に効率よくリンクを設定しましょう。

リンク設定のキホン

Dreamweaverでリンクを設定するには、テキストリンクでも画像に対するリンクでもすべて以下の手順になります。

  1. リンクを設定したい箇所を選択します(テキストの場合ドラッグで選択。画像の場合は画像をクリックして選択)。
  2. [プロパティインスペクター]の[リンク]テキストボックスに、リンク先を指定します。

とはいえ、リンク先を[リンク]テキストボックスに直接入力するのは、スペルミスやフォルダー(パス)違いをしてしまう可能性が高いのでおすすめしません。Dreamweaverなら効率よく正確にリンクを設定できます!

同じWebサイト内のファイルの場合はドラッグで

リンク先に同じWebサイト内のWebページを指定するときは、あらかじめリンク先のページを作成しておくと、さらに効率よくリンクを設定できます。ページが作成されているということは、[ファイル]パネルに保存済みのファイルが表示されている、ということです。

ここまで準備ができたら、以下の手順で設定します。

  1. リンクを設定したい箇所を選択します。
  2. [プロパティインスペクター]の[リンク]テキストボックスの右にある[ファイルの指定]ボタンをクリックしてドラッグします。そうすると、なんと矢印がビヨーンと出てきます。
  3. マウスを[ファイル]パネルまで引っ張り、リンク先として指定するファイル名の上でドロップ(マウスの指を離す)します。

リンク先が相対指定になっているのは、Dreamweaverの作業前に「サイト設定」をしているからです(サイト設定については、「第1回 サイト設定がDreamweaverのカナメです」を参照)。

ある日、リンク先のファイル名を変更しなくてはいけなくなった時(そんなことは起こってほしくないけど)、「ファイル名が変更になる=リンク先が変わってしまう→リンク切れを起こす」という悲劇が引き起こされてしまいます。ですが、Dreamweaverなら大丈夫!

[ファイル]パネル内でファイル名を変更すると、関連するファイルのリンク先がすべて新しいファイル名に書き換わります。こちらの方法は「第1回 サイト設定がDreamweaverのカナメです」に掲載しているのでぜひ確認してみてください。

リンク先が合っているか確認したいよね

Dreamweaverの[デザインビュー]でリンクをクリックしてもリンク先に飛ばないよねぇ。と思っている方が多いんじゃないでしょうか?

ぜひ、[デザインビュー]上のリンク設定した箇所を[Ctrl](Mac OSは[Command])+ダブルクリックしてみてください。なんと、リンク先に指定したファイルが開くのでリンクの設定が合っているかを確認できます。この操作は、[サイト設定]している同一Webサイト内のファイルのみに対応しています。

外部URLの場合はコピペで

外部URLをリンク先に指定する場合は、同様にリンクを設定したい箇所を選択し、[プロパティインスペクター]の[リンク]テキストボックスにリンク先のURLを指定します。このとき直接URLを入力するとスペルをミスしたりすることもあるので、できるだけURLはコピー&ペーストで指定するとよいでしょう。

ちなみに「テキスト選択時」と「画像選択時」では、[プロパティインスペクター]の[リンク]テキストボックスの位置が若干違いますが使い方は全く同じです。

別ウィンドウで開く設定もクリックひとつ

外部URLやPDFファイルをリンク先に指定する場合、リンクをクリックしたときに「別のウィンドウ(別のタブ)」で開くように設定できます。リンク設定をしたときに[プロパティインスペクター]の[ターゲット]プルダウンメニューから[_blank]を指定するだけです。

別ウィンドウで開けるのってとても便利そうですが、同一サイト内のリンクに指定すると「同じWebサイトが複数のウィンドウで開いてしまう」ことになって、閲覧ユーザに混乱を招いてしまうかもしれないので気をつけましょう。

ちなみに、[ターゲット]ボックスも「テキスト選択時」と「画像選択時」で場所が若干違いますが操作は全く同じです。

メールアドレスは[挿入]パネルで

Webブラウザーでリンクをクリックすると、メールソフトが起動してメール作成の画面が開いた、という経験を持つ方は多いと思います。

このようなリンクは、以下の手順で設定します。

  1. リンクを設定したい箇所を選択します。
  2. [挿入]パネルにある[電子メールリンク]ボタンをクリックします。
  3. [電子メールリンク]ダイアログボックスが開くと、[テキスト]ボックスには[デザインビュー]で選択した文字列が表示されています。あとは[電子メール]テキストボックスに送信先となるメールアドレスを入力し[OK]ボタンをクリックします。

「mailto:」が付いたリンクをWebブラウザーでクリックすると、メールソフトが起動してメール作成画面が表示される仕組みになっています。ただ、ネットカフェなどにある公に使えるパソコンのような環境ではメール送信ができないこともあるので、メールだけでなく他の方法でもお問い合せできるようにしておくとよいでしょう。

リンク先を変更したいときもあるよね

ある程度リンク設定ができたあとに「リンク先の指定が変更になった!」ってことが起こることもあります(ないことを祈ります)。1箇所だけなら単にリンク先を指定しなおせばいいですが、何ページにも渡って変更しないといけないときは大変です。

そういうときは、以下の手順で変更します。

  1. [サイト]メニュー→[サイト全体のリンクの変更]をクリックし、[サイト全体のリンクの変更]ダイアログボックスを開きます。
  2. [変更するリンク先]ボックスの右側にある[ファイルの参照]ボタンから、変更前のリンク先を指定します。
  3. [変更後のリンク先]ボックスには変更したいリンク先を指定します。

そうすると、[サイト設定]をしているファイル内の該当するリンク先がすべて自動的に書き換わります。これすごいですね! もちろん、これができるのは[サイト設定]をしっかりやっているからです。

ということで、Dreamweaverでリンク設定をするときには「サイト設定」が重要すぎるのでぜひ再確認しててみてください。