【HTML】コードで作る実践的なリンクタグ。

【HTML】コードで作る実践的なリンクタグ。

いまはブログやワードプレスでは自動的にリンクを生成してくれる機能がついていますので、のリンクタグを手入力で打ち込む人は少なくなってきていると思います。リンクタグ自体はそこまで複雑なものではありませんが、タグを加えることでクリックしたときに別ウィンドウを開くようにもできます。

また、指定方法によっては同一ページ内のほかの場所にリンクしたり、別ページの特定の場所にリンクすることも可能になります。

ここでは:リンクタグについて実際に使うときに知っておくと便利な知識を紹介したいと思います。

リンク:

リンクを貼る場合の基本的なタグは になります。○の部分にサイトURLを、▽の部分にサイトタイトルや、紹介文を書きます。

「target="_blank"」で別ウィンドウを開く

上の基本的なリンクタグの場合、クリックすると開いているページが閉じてリンク先に飛びます。実際にクリックしてみましょう。 →このページが閉じて新しいページに飛びます

この場合、新しいリンク先のページが表示されることになりますので、自分のサイトの表示はなくなってしまうことになります。読んでくれている人が「さっきのホームページに戻りたい」と「元に戻る」をクリックしてくれないと、そのまま貴重な訪問者が1人いなくなってしまうことになります。

そのためリンクをクリックしたときに同じウィンドウで遷移するのではなく、別ウィンドウを開いて表示させることで自分のサイトをそのまま残したままリンク先を表示することができます。

この機能はのようにタグのなかにtarget="_blank"を入れることで可能になります。

私の場合、このtarget="_blank"を使うときは、別サイトにリンクさせる時に使います。もし同じサイトの別ページにリンクする場合はこのtarget="_blank"は使いません。

【知っておくと便利なタグの知識】

リンク先URLの種類

これは無料ブログやワードプレスの場合、自動的にやってくれるので覚える必要はありませんが、もし自分でリンクを作成する場合は知っておいたほうが良いと思うので、私が実際に使っている使い方を紹介したいと思います。

他のサイトをリンクする時は「フルパス」。

他のサイトにリンクさせるときはフルパスといって「http://www」から始まるURLを入力しています。これは該当するサイトのURLをコピペして貼り付ければ自動的にフルパスになっているので特に問題はありません。

同じサイト内で内部リンクするときは「絶対パス」

同じサイトの別ページに内部リンクしたい場合ですが、基本的に絶対パスでリンクさせたほうが便利です。絶対パスというのは「/domain/aaa.html」のようにそのページのURLから「http://www」を省いたものと覚えておくとわかりやすいです。

相対パスはほとんど使わない。

相対パスというのは、絶対パスと違って例えば1つ上の階層のページを指定したい場合などは「../domain/aaa.html」といったように「../」を使うのが特徴です。もし2つ上の階層をリンクしたければ「../../domain/aaa.html」のような指定になります。

過去、相対パスで内部リンクをしていたことがあるのですが、相対パスでやると後々の更新作業がひどくたいへんになってしまうので、とにかく内部リンクは「絶対パス」で指定するようにしています。

同ページ内リンクの方法

他ページの特定の場所へジャンプさせる方法

WordPressの使い方&作り方