【リンク】リンクを貼る

スポンサーリンク



リンクを貼ろう

ブログやホームページを作成していると、必ずと言っていいほど、リンクを貼る機会があると思います。

ブログの記事の中で、引用したページへのリンクを貼ったり、紹介したサイトへのリンクを貼ったり。

ホームページ作成においては、サイト内のページからページへ移動させるにもリンクを使用しますね。

このように、例えをあげたらキリが無いほど、リンクと言うものは多様されています。

リンクも、サイトを作成する上で使いこなしたい事の一つなので、しっかりマスターしましょう。

リンクを貼るタグ

リンクを貼るタグの基本はこれです。

<a href=”リンク先のアドレス”>文字</a>

これで、

「文字」をクリックすると、「リンク先のアドレス」へ飛ぶ

というリンクが作成されます。

ホームページ作成において、自分のサイト内でのページ移動でリンクを使用する場合は、
「リンク先のアドレス」に、移動先ページのファイル名「~~~.html」を記入して下さい。

試しに、一つリンクを作ってみましょう。
「テストページ」を作成してあるので、そちらへのへのリンクを貼ってみます。

HTMLソース

<a href=”http://kantanhtml.blogspot.jp/p/blog-page_28.html”>テストページへリンクします。</a>

↓表示させると

テストページへリンクします。

これだけです。簡単ですね。

それでは、このリンクをいろいろとカスタマイズしていきましょう。


リンクの色を変える

リンクの色は、

・未訪問リンクの色

・リンクをクリックした時の色

・訪問済みリンクの色

の3つの色を指定することができます。

【使用するタグ】

・未訪問リンク         :    link=”カラーコードまたはネーム”

・リンククリック時   : alink=”カラーコードまたはネーム”

・訪問済みリンク      : vlink=”カラーコードまたはネーム”

まずは、

<body>内のリンク色を一括で指定する場合。

これらを、htmlソース内のどこへ入れるかというと、

<body>~</body>間です。

こんな感じです↓

<html>
<head>
</head>
<body link=”#FF00FF” alink=”#00FFFF” vlink=”#00FF00″>
<a href=”http://kantanhtml.blogspot.jp/p/blog-page_28.html”>テストページへリンク</a>
</body>
</html>

↓表示させると↓

試しにクリックしてみて下さい。
色が変わりましたでしょうか?

ページ内の一つのリンクだけ色を指定する

ページ内のリンクすべてではなく、

ここの1つのリンクだけ、色を変えたい!

という場合は、これもstyle属性で色を指定しましょう。

<A href=”リンク先アドレス” style=”color:カラーコード;”>文字</a>

これで、かんたんにリンク1つだけの色を指定できます。

画像でリンクさせる

これもよく見かけますね。

画像をクリックすると他ページに飛べるリンクです。

自分のサイト内でメニューボタンなどとしても使えますね。

<a href=”リンク先アドレス”><img src=”画像URL”></A>

かんたんなタグです。

ふつうのリンクの文字を入れる部分を、

<img src=”画像URL”>とするだけです。

このままだと、画像の周りに枠が出てしまうので、

枠が不要な場合は、border=”0″で枠無しに指定できます。

<img… > の中に入れてください。

<a href=”リンク先アドレス”><img src=”画像URL” border=”0″></A>

ボタンでリンクさせる

ボタンをクリックでリンクするようにできます。

ボタンについては関連記事をご覧ください。
【関連記事】

ボタンリンクのタグはこのようになります。

<input type=”button” onclick=”location.href=’リンク先のアドレス'”value=”ボタンの文字”>

表示してみると↓

リンク先が他のサイトである場合など、新しいウィンドウで開きたい場合は以下のタグを使用します。

<input type=”button” onclick=”window.open(‘リンク先のアドレス’)” value=”ボタンの文字”>

【上級編】

ページ内の指定した位置にリンクする

長い記事のページなんかで、ページ最下部に「このページの上に戻る」みたいなものを見たことありますよね。

あれも、リンクと同じ<a href=”~~~”>のタグを使って付けることが出来ます。

その為には、もう一つタグが必要になります。

<a name=”任意の名前”>

というタグです。

name属性というものを使い、リンクしたい箇所に任意の名前を指定します。

そして、 href属性で

<a href=”#任意の名前”>ページの上へ</a>

というようなリンクをページ下部に入れればオーケー。

例えばこんな感じです↓

ソース

<a name=”pagetop”>ページトップ</a>
<br>
<br>
~~~内容~~~
<br>
<br>
<br>
<a href=”#pagetop”>ページトップへ戻る</a>

表示させた例を、サンプルページに用意しました。

サンプルページはこちら←クリック
サンプルページへリンク。

長~~い文章の記事になってしまったとき、
これがあるとスクロールせずにページトップに戻れるので便利です。




スポンサーリンク
関連コンテンツ広告