11、アンカーリンク 解説

アンカーリンクとはドキュメント内で移動を可能にするハイパーリンクの一種です。

みなさんも見かけた事があると思いますが、ページの一番下までいくと「TOP」なんて文字があり、クリックするとページ一番上まで戻るといったものです。(説明が下手ですみません)

今回の解説ページでもアンカーリンクを使っています。左側にある赤いメニューのようなものがそれです。

 

それではここからアンカーリンクの解説をしていきます。

下の画像はトップページのものとなります。赤い丸で囲ったところがアンカーリンクのマークです。

Loading the page...

アンカーリンク

解説 TOP

ページリンク

12、ペ-ジプロパティ

解説へ

 

何か追加・変更したら「プレビュー」

で必ず確認!!!

 

「ファイル」

「サイトを保存」

も必ず忘れずに!!!

こちらをクリックすると、マウスポイントにこのマークがくっついてきます。これを配置したい場所まで持っていきます。

アンカーリンクを配置すると下の画面が出てきますので、ここでアンカーリンクの名前を設定します。分かりやすい名前を付けましょう。設定が終わったらOKボタンで完了です。

 

アンカーリンクの名前ですが、設定せずに初期の「untitled」のままですと、いざリンク先を選ぶ時にどこのリンクか分からなくなってしまいます。ですので分かりやすい名前がいいですね。

では実際にアンカーリンクを設定していきましょう。①にありますアイコン「PAGE TOP」はトップページの解説の時に配置したものです。こちらを選択し②の部分をクリック。

そうするとリンク先の一覧が出てきます。この中から先程名前を決めたアンカーリンクを選択すれば完了です。簡単ですよね。一覧では名前の脇にアンカーリンクのマークも表示されますので間違いは少ないと思います。

 

※フッダーにあるFacebookのいいねボタンは気にしないで下さい。

アンカーリンクとやり方は一緒なのですが、違うページへ飛ぶリンクの解説もします。普通は順番が逆ですね、すみません(汗)

下の画像、トップページを例にして進めます。サービス1の部分をクリックしたら「サービス1ページ」へ飛ぶようにしていきます。ついでに、アイコンとRead Moreも。

 

※フッダーにあるFacebookのいいねボタンは気にしないで下さい。

リンクをつけたい部分を選択します。この際、まとめてやりたい時は「shift」キーを押しながらだと同時に選択できますよ。下の画像では、アイコンとサービス1のテキスト、Read Moreのテキストの3つを選択しています。

あとは先程解説したアンカーリンクと同じ要領で、リンク先一覧から飛ばしたいページ、今回はサービス1を選ぶだけで完了です。

アンカーリンクのマークが付いていないものがページですよ。

もし、どのテキスト(画像)にどこのリンクを貼ったかが分からなくなってしまったら、、、、

最初は私もリンクを付けすぎて訳が分からなくなった事があります。

でもすごく簡単なんです。テキストでもアイコンでもクリックして選択するだけで、ハイパーリンクと青文字で書かれた横に、どことリンクされているかが表示されます。安心ですね。

テストサイト「simple corporate」

http://muse-logsimplecorporate.businesscatalyst.com

© muse-log.com all rights reserved.