Dreamweaverでリンクの貼り方をお探しですね。
広告
Dreamweaverでリンクとページ内ジャンプを設定する方法
DreamweaverでWebページを作っていると、「別のページに移動するリンク」や「同じページ内の特定の場所にジャンプするリンク」を設定したい場面がよくあります。
リンクの設定自体はHTMLの基本なので難しくないのですが、相対パスや絶対パス、アンカーポイントの違いをきちんと理解していないと、「Dreamweaverのプレビューでは動いたのに、公開したらリンク切れになってた…」なんてことも起こります。
この記事では、Dreamweaverでページ間リンクやページ内ジャンプを設定する方法を、初心者の方にも分かりやすく解説していきます。
ページ間リンクを設定する基本の手順
Dreamweaverでページ間リンクを設定するときは、まずリンクにしたい文字や画像を選びます。
たとえば「会社概要はこちら」というテキストを別ページにリンクさせたいなら、その文字列をドラッグして選択してください。
選択したら、画面の下や右側に表示される「プロパティインスペクター」の「リンク」欄を使います。
ここに直接「company.html」と入力してもいいのですが、初心者の方はフォルダーアイコンをクリックして、リンク先のファイルを選ぶ方法がおすすめです。
Dreamweaverが自動的に正しいパスを入力してくれるので、入力ミスによるリンク切れを防げます。
ページ間リンクで特に大事なのが、リンク先の指定方法です。
同じサイト内のページに移動する場合は、基本的に「相対パス」を使います。
相対パスというのは、今開いているHTMLファイルを基準にして、リンク先までの位置を示す書き方です。
たとえば同じフォルダにある「about.html」にリンクするなら「about.html」、ひとつ上のフォルダにあるファイルなら「../about.html」のように書きます。
一方、外部サイトにリンクする場合は「https://example.com/」のような絶対URLを使います。
Dreamweaver上では正しく表示されていても、サイト定義が不十分だったり、ファイルを移動したりするとパスがずれることがあるので、リンク設定後は必ずブラウザで確認しましょう。
画像にリンクを設定する場合も、基本的な流れはテキストリンクと同じです。
デザインビューやライブビューで画像を選択して、プロパティインスペクターのリンク欄に移動先のファイル名やURLを入力します。
バナー画像やボタン画像をクリックして別ページに移動させたいときに使う方法ですね。
画像リンクを設定するときは、見た目だけでなく「alt属性」も確認しておくと親切です。
alt属性は画像が表示されないときの代替テキストで、アクセシビリティやSEOの観点でも重要です。
リンク先の内容が分かる簡潔な説明を入れておくと、ユーザーにも検索エンジンにも伝わりやすいリンクになります。
ページ内ジャンプ用のアンカーポイントを作る方法
ページ内ジャンプというのは、同じページ内の見出しや特定の場所に一瞬で移動するリンクのことです。
長い記事やFAQページ、マニュアルページなどでよく使われています。
HTMLでは、移動先になる要素に「id属性」を付けて、リンク元には「#id名」を指定します。
昔は「name属性」を使う方法もありましたが、今のHTMLでは見出しや段落、div要素などにidを付ける方法が一般的です。
Dreamweaverでもコードビューを使えば、HTMLの構造を確認しながら正確にアンカーポイントを設定できます。
たとえば、ページ内の「料金プラン」という見出しにジャンプさせたい場合、見出し部分をコードビューで確認して、`
料金プラン
`のようにidを追加します。
そして、ページ上部の目次やボタンにリンクを設定して、リンク欄に「#price」と入力します。
これで、そのリンクをクリックすると同じページ内の「料金プラン」の位置に移動できるようになります。
id名は英数字とハイフン(-)を使って、内容が分かる短い名前にするのがおすすめです。
「section1」よりも「price」や「access」のように内容を表す名前の方が、あとから修正するときに分かりやすくなります。
Dreamweaverの画面で作業するときは、ライブビューで移動先の見出しを選んで、コードビューでidが正しく入っているか確認すると確実です。
デザイン画面だけで作業していると、どの要素にidが付いているのか見落としやすいので、ページ内ジャンプではコードの確認が特に役立ちます。
それから、同じページ内で同じidを複数使うことはできません。
idはページ内でひとつだけの名前として扱われます。
同じidが複数あると、ブラウザがどこに移動すればいいか分からなくなって、意図しない場所にジャンプする原因になるので注意してください。
別ページの特定の場所にリンクする設定方法
ページ間リンクとページ内ジャンプを組み合わせると、「別のページを開いて、そのページ内の特定の場所に移動する」リンクも作れます。
たとえばトップページから「サービス紹介ページの料金セクション」に直接移動させたい場合は、リンク先ページの該当見出しにidを設定して、リンク元には「service.html#price」のように指定します。
これは「service.htmlというページを開いて、その中のid=”price”が付いた場所にジャンプする」という意味です。
Dreamweaverのリンク欄にも同じ形式で入力できます。
この設定で大切なのは、リンク先のページ側に正しくアンカーポイントが存在していることです。
リンク元に「service.html#price」と書いても、service.html内に`id=”price”`がなければ、ページは開いても目的の位置には移動しません。
また、ファイル名やid名は大文字と小文字の違いにも注意が必要です。
環境によっては「Price」と「price」が別物として扱われることがあって、公開サーバー上でリンクが効かない原因になります。
ローカル環境のプレビューでは問題なく見えても、サーバーにアップロードしたあとに動作が変わることがあるので、公開前の確認は欠かせません。
別ページのアンカーポイントにリンクする場合は、ユーザーの移動体験も意識しましょう。
ページを開いた瞬間に途中の見出しに移動するので、ユーザーはページ全体の流れを見ないまま目的の場所に到達します。
そのため、ジャンプ先の見出しや冒頭文だけを読んでも内容が理解できるようにしておくと親切です。
たとえば料金表に直接リンクするなら、その直前に「以下では各プランの料金を比較できます」のような短い説明を入れておくと、初めて訪れたユーザーでも迷いにくくなります。
単にリンクを動かすだけでなく、移動後に分かりやすい設計にすることが実用面では重要です。
リンクが動かないときの確認ポイントと実務での注意点
Dreamweaverでリンクを設定したのに動かない場合は、まずパスの指定を確認しましょう。
特に多いのは、ファイルの保存場所を変更したあとにリンクパスが古いままになっているケースです。
サイト内リンクでは、Dreamweaverの「サイト定義」を正しく設定しておくと、ファイル管理やリンク更新がしやすくなります。
サイト定義というのは、作業するWebサイトのルートフォルダをDreamweaverに認識させる設定のことです。
これが曖昧なままだと、リンク先の選択や画像の参照で意図しないパスが入ることがあります。
確認すべきポイントは、主に次のとおりです。
– リンク先のファイルが正しいフォルダに保存されているか
– ファイル名・拡張子・id名に入力ミスがないか
– 相対パスが今のHTMLファイルから見て正しいか
– 公開サーバーにリンク先のファイルもアップロードされているか
– 同じidをページ内で重複して使っていないか
リンク先を新しいタブで開きたい場合は、target属性を使います。
Dreamweaverのプロパティインスペクターでターゲットを指定できる場合は「_blank」を選ぶと、外部サイトなどを別タブで開けます。
ただし、同じサイト内の普通のページをすべて別タブで開くと、ユーザーにとって操作が面倒になることがあります。
外部サイト、PDF、管理画面など、今のページから離れてほしくない場面に絞って使うのが自然です。
HTML上では`target=”_blank”`を設定しますが、セキュリティ面を考えるなら`rel=”noopener”`も一緒に書いておくとより安全です。
ページ内ジャンプをもっと見やすくしたい場合は、CSSでスクロールの動きを調整する方法もあります。
たとえば`html { scroll-behavior: smooth; }`を指定すると、アンカーリンクをクリックしたときに滑らかにスクロールします。
ただし、固定ヘッダーを使っているサイトでは、ジャンプ先の見出しがヘッダーに隠れることがあります。
そんなときは、ジャンプ先の要素に`scroll-margin-top`を指定するなど、レイアウトに合わせた調整が必要です。
DreamweaverはHTMLやCSSを視覚的に編集できる便利なツールですが、リンクの仕組み自体はブラウザがHTMLをどう解釈するかで決まります。
基本構造を理解しておけば、デザイン変更や公開後の修正にも落ち着いて対応できます。
Dreamweaverでページ間リンクやページ内ジャンプを設定する方法は、操作そのものは難しくありません。
大切なのは、リンク元とリンク先の関係を正しく理解して、相対パス、id属性、ファイルの保存場所を丁寧に確認することです。
テキストや画像から別ページに移動させる場合はプロパティインスペクターを活用して、ページ内の特定の場所に移動させる場合はidと「#」を組み合わせます。
別ページの途中にリンクしたい場合は「ファイル名#id名」の形式を使えば対応できます。
作成後はDreamweaverのプレビューだけでなく、実際のブラウザと公開環境でも確認して、ユーザーが迷わず目的の情報にたどり着けるリンク設計を目指しましょう。
広告
