(ハイパー)リンクとはページとページをつなぐ事を言います。
リンクは大きく分けて二種類あります。
一つが自分のページ内で別ページに飛ぶ内部リンク(相対アドレス)と、
他の方が作ったページに飛ぶ外部リンク(絶対アドレス)です。
まず内部リンクから作ります。
内部リンクを貼るには、先程作った自己紹介の他にページを作る必要があります。
これまでに覚えたやり方で、貴方のホームページの顔となるトップページを作ってみましょう。
ホームページにおいて、トップページのファイルの名前は決まっています。
index.htm(html)です。
当サイトのトップページも、http://kuro.suppa.jp/index.htm です。(パソコン上ではindex.htm)
これはhttp://kuro.suppa.jp/
とindex.htmを略す事が出来るようになっています。
作ったホームページを置かせてもらうホームページスペースでもindexを作る事が使用条件だったりする場合もあるので、必ずトップページはindex.html(htm)にしてください。
※ファイルは同じフォルダに保存しておきましょう。
メニュータイプのトップページを前提として話を進めます。
このトップページから色々なコンテンツにリンクされてホームページは構成されます。
来てくれた人が迷わないようにトップページから全てのページに行ける様にした方がいいですね。
のサイトでも一部のサンプルページを除いてトップページから全てのページに行ける様になっています。

トップページが出来上がったら、自己紹介のページとリンクしてみましょう。
※ここで気をつけて欲しいのが、トップから自己紹介のページに行ける様にリンクしたら、自己紹介のページからトップへのリンクを忘れないようにする事です。
一方通行になってしまわないようにしましょう。
リンクにはテキストリンクと画像からのリンクがあります。
テキストリンクとは、文字をクリックして別のページにジャンプするものです。
これ と
←この画像ですね。
テキストリンクでは普通は文字の周りに色は出ずに下線が入ります。やり方は中級編以降で説明します。
indexからprofileへのリンクを例とします。
1.indexページのリンクにしたい文字をドラッグして文字を反転させます。(テキストリンク)
画像は画像の上で左クリックして選択 
2.リンクのボタンを押すとハイパーリンクの挿入のダイアログが開きます。
■alphaEDIT

■Dreamweaver

■ホームページ・ビルダー

■ホームページマネージャー

下の様なダイアログが開きますので、参照を押してリンク先を選んでください。

※Dreamweaverでは下部メニューに が常に表示されているので、こちらでリンクを貼った方が簡単です。
参照の横にスクロールバーがある場合、左クリックすると現在編集中のページと同じフォルダにあるhtmlファイルがプルダウンメニューとして出てきます。
ここで選ぶ事も出来ますので活用してください。

いずれかの方法でprofile.html(htm)を選んでOKすれば終了です。
※逆に戻ってくるリンクを忘れずに!
■フロントページエクスプレス
フロントページエクスプレスの場合は、indexとprofileのページを2つ開いておきます。
1.範囲を指定してリンクのボタンをクリックすると、下のダイアログが開きます。

2.「開いているページ」タブをクリックすると、開かれているファイルの名前が表示されます。
3.リンク先のページを選んでOKを押せば終了です。
※AlphaEDITでリンクを修正する場合、リンク部分を選択して、右クリック>ハイパーリンクのプロパティを選択して修正してください。
リンク部を選択してリンクのボタンで書き換えする事も出来ますが、ソース(ソースについては後述)がエライ事になります。要注意。
外部リンクもやり方は基本的に同じです。
他サイトさんのリンクを貼る時の注意点として、大体どこのサイトさんもリンクページにリンクについてという項目がありますのでそこをよく読んでおきましょう。
どこのサイトさんも大体トップページにリンクを貼ってくださいと書いてあるはずです。
わざわざ「どのページもリンクフリーなので、どこに貼っても構いません」と書いてあるサイトさん以外はトップページをリンクするのがマナーですね。
ちなみに当ホームページはわざわざ「どのページもリンクフリーなので、どこに貼っても構いません」と書いてありますので、どこのページにリンクしても構わないです。
素材屋さんに画像を借りた場合にリンクウェアと書かれていた場合は、このリンクをする事で画像を使用してもいいですよという意味です。
決して直リンクで使用してくださいという意味ではありませんので注意してください。
リンクページなどを作って、トップページにリンクしておきましょう。
1.テキストや画像を指定して、ツールバーのリンクボタンをクリック。

2.リンクファイルの場所(リンク先のURL)に他サイトさんのアドレスを直接記入。
ホームページビルダーはURLへのタブにある「URL」
フロントページエクスプレスはWWWタブにある「URL」です。
 |
←アドレスはブラウザのアドレスバーに記されています。 |
これを、直接コピー&ペースト。まだOKは押さないで下さい。
今度はターゲットを使ってリンク先の開き方を変えてみましょう。
とりあえずここでは_blankだけ覚えておけばいいと思います。
3.リンクのダイアログにあるターゲットという項目部分のスクロールバーをクリック。

プルダウンメニューが表示されますので「 _blank 」を選んで完了です。
ホームページ・ビルダーでは「新しいウィンドウ」
フロントページエクスプレスの場合は、WWWタブ部分のターゲットフレームに直接 _blank と記入してください。
blankのみではありません。半角のアンダーラインを前に入れてください。
キーボードの右下の方にあります。場所が判らないときは上のをコピーしてくださいな。
こうすると他のウィンドウでリンク先が開きます。
yahoo
他サイトへのリンクはこの様に別ウィンドウで開く事が多いです。
ただこれは、ウィンドウが増えるので自サイト内でやると嫌がられます。気をつけましょう。
自ページ内でのリンクなら現時点ではまだ何も指定しないでいいです。
他サイトの場合でも嫌がる人がいますがこれは好みの問題なので、他サイトの場合はあまり気にせず自分のお好きなように設定してください。
※追記
なお、IE8やFirefoxなどのブラウザで「新しいタブで開く」という機能がありますが、これはホームページ上のリンクターゲットで管理者の方から指定するというのは不可能です。
これはブラウザの機能であって、管理者でなくて閲覧者がブラウザの設定の「新しいウィンドウで開く」を「新しいタブで開く」に変えればオッケー。
ただ設定変えてない人からするとこの「_blank」はもう一つブラウザが開くので、本当にうざく感じるようになってしまった・・・
Firefoxは最初からそう設定されてるので問題ないんですが、IE8の場合は、ツール>インターネットオプションのタブの設定で、ポップアップ発生時のとこの「常に新しいタブでポップアップを開く」にチェックを入れておけばいいです。
IE8で新しいウィンドウうざいな、と思ってる方はお試しあれ。
これで作る事に関しての必要最低限な事は終了です。お疲れ様でした。
貴方のアイディアで、魅力たっぷりのホームページを作ってください!
パソコン上で出来上がったら、次はいよいよ貴方の作ったページの公開です。
|