Dreamweaver入門 第5回 サイト内のリンクもメールアドレスのリンクもとても簡単
Dreamweaver入門
Webページを作っても、各ページがリンクされていなかったらページの行き来をすることができません。本記事では、Dreamweaverでソースコードをさわらなくても簡単に効率よくリンクを設定する方法を解説します。
※サンプルファイルとして、本連載を通して解説するテクニックを使って制作できるWebサイトの例（完成例）と、本記事の内容を試すための素材データを用意しています。ダウンロードしたサイトフォルダーを、まず「サイト設定」をしてからご利用ください。サイト設定の詳細については、「第1回 サイト設定がDreamweaverのカナメです」を参考にしてください。
リンクの種類
リンクには大きくわけて3種類のリンク先があります。
- 同じサイト内の別のページへリンク
- 外部URLにリンク
- メールアドレスにリンク
そして、「テキスト（文字）」「画像」どちらにもリンクを設定することができます。
Dreamweaverでのリンク設定のキホン
Dreamweaverでリンクを設定するには、テキストリンクでも画像に対するリンクでもすべて以下の手順になります。
設定前に［プロパティインスペスター］をあらかじめ表示させておきます。［プロパティインスペクター］については「第2回：効率的にテキスト原稿やオフィス文書を利用してHTMLファイルを作成する方法」を参照してください。
- リンクを設定したい箇所を選択します（テキストの場合ドラッグで選択。画像の場合は画像をクリックして選択）。
- ［プロパティインスペクター］の［リンク］テキストボックスに、リンク先を指定します。
1. 同じサイト内の別のページへリンク
リンク先に同じWebサイト内のWebページを指定するときは、あらかじめリンク先のWebページを作成しておくと、さらに効率よくリンクを設定できます。ページが作成されているということは、［ファイル］パネルに保存済みのファイルが表示されている、ということです。
ここまで準備ができたら、以下の手順で設定します。
- リンクを設定したい箇所を選択します。
- ［プロパティインスペクター］の［リンク］テキストボックスの右にある［ファイルの指定］ボタンをクリックしてドラッグします。そうすると、なんと矢印がビヨーンと出てきます。
- マウスを［ファイル］パネルまで引っ張り、リンク先として指定するファイル名の上でドロップ（マウスの指を離す）します。
そうすると、リンクが設定されます。
リンク先が相対指定になっているのは、Dreamweaverの作業前に「サイト設定」をしているからです（サイト設定については、「第1回 サイト設定がDreamweaverのカナメです」を参考にしてください）。
リンク先が合っているか確認したいよね
［デザインビュー］上のリンク設定した箇所を右クリックし、サブメニューから［リンクされたページを開く］をクリックしてみてください（［ライブビュー］のときは［編集］メニュー→［リンク］→[リンクページを開く…］を選択します）。
そうすると、該当のドキュメントが開きます。これは、あらかじめリンク先のページを作っていると使える便利機能です。
この操作は、［サイト設定］している同一Webサイト内のファイルのみに対応しています。
2. 外部URLのリンクはコピペで
外部URLをリンク先に指定する場合は、サイト内リンクと同様にリンクを設定したい箇所を選択し、［プロパティインスペクター］または［クイックプロパティインスペクター］の［リンク］テキストボックスにリンク先のURLを指定します。このとき直接URLを入力するとスペルを間違えることもあるので、できるだけブラウザーで表示確認をしたあと、URLをコピー＆ペーストで指定するとよいでしょう。
3. メールアドレスはプロパティインスペクターか［挿入］パネルで
Webブラウザーでリンクをクリックすると、メールソフトが起動してメール作成の画面が開いた、という経験を持つ方は多いと思います。
このようなリンクは、以下の手順で設定します。
プロパティインスペクターの場合
- メールアドレスを指定したいHTMLエレメントをダブルクリックし、テキストを選択します
- ［プロパティインスペクター］中の［リンク］ボックスに半角文字で「mailto:」と入力したあとメールアドレスを入力します。入力するよりコピペするほうが間違いがないのでおすすめです。
挿入パネルの場合
- リンクを設定したい箇所を選択します。
- ［挿入］パネルにある［電子メールリンク］ボタンをクリックします。
- ［電子メールリンク］ダイアログボックスが開くと、［テキスト］ボックスには［デザインビュー］で選択した文字列が表示されています。あとは［電子メール］テキストボックスに送信先となるメールアドレスを入力し［OK］ボタンをクリックします。
［プロパティインスペクター］の［リンク］ボックスを見てみると、メールアドレスの前に「mailto:」という文字列が追加されていて、リンクが設定されたことがわかります。
mailto:とは
「mailto:」が付いたリンクをウェブブラウザーでクリックすると、メールソフトが起動してメール作成画面が表示される仕組みになっています。
ただ、ネットカフェなどにある公に使えるパソコンのような環境ではメール送信ができないこともあるので、メールだけでなく他の方法でもお問い合せできるようにしておくとよいでしょう。
リンク先を変更したいときもあるよね
ある程度リンク設定ができたあとに「リンク先の指定が変更になった！」ってことが起こることもあります（ないことを祈ります）。1箇所だけなら単にリンク先を指定しなおせばいいですが、何ページにも渡って変更しないといけないときは大変です。
そういうときは、以下の手順で変更します。
- ［サイト］メニュー→［サイトオプション］→［サイト全体のリンクの変更］をクリックし、［サイト全体のリンクの変更］ダイアログボックスを開きます。
- ［変更するリンク先］ボックスの右側にある［ファイルの参照］ボタンから、変更前のリンク先を指定します。
- ［変更後のリンク先］ボックスには変更後のリンク先を指定します。
そうすると、［サイト設定］をしているファイル内の該当するリンク先がすべて自動的に書き換わります。この機能を使うと修正漏れがないのでリンク切れを起こすトラブルを未然に防ぐことができます。これすごいですね！なのでリンクの変更はDreamweaverに任せるのが本当におすすめです！
※サイト設定については「第1回 サイト設定がDreamweaverのカナメです」を参考にしてみてください。