ブログでも、通常のWEBサイトと同じように 他のページにジャンプするためのリンクを貼ることができます。
リンクには<a>タグを使いますが、このタグは 圧縮ファイルや画像ををダウンロードさせる、同一ページ内でジャンプする、イラストや写真の一部をクリック可能にするなどいろいろの使い方があります。
ホームページやブログなどのウェブサイトから、アンカータグ( Aタグ )を使って、ダウンロードファイルを提供することができます。
という記述でファイルURLを絶対パスまたは相対パスで指定します。ダウンロードファイルは通常圧縮されており、一般的に使用されているのが下記のとおりです。
| 拡張子 | アプリケーション | 主な使用OS |
|---|---|---|
| zip | Zip圧縮 | Windows、Macintosh、UNIX |
| sit | Stufflt圧縮 | Macintosh |
| lzh | LHA圧縮 | Windows、DOS |
サンプルソースです。
ホームページやブログなどのウェブサイトで、ページの途中など、特定の位置へジャンプするためのリンクを貼ることができます。また、同一ページ内の先頭や途中にジャンプさせたいときにも使えます。ブログでも個別記事が長くなったときなどに使うと便利です。
というふうに、ページ内にアンカーを張っておきます。アンカーへのリンクは、下記のような記述になります。
サンプルです。
ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合
という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。
| a : link | { スタイル } | 未訪問リンク文字に対して |
| a : visited | { スタイル } | 訪問済みリンク文字に対して |
| a : hover | { スタイル } | リンク文字にマウスが重なったとき |
| a : active | { スタイル } | リンク中文字に対して |
という記述になります。
例えば、
ホームページやブログなどのウェブサイトに、他ページへのジャンプするためのアンカータグを挿入する場合、リンク文字のスタイル指定することができます。一括で指定する場合は、
という記述になります。一般の文字の色や文字修飾を指定していても、リンク文字のスタイル指定がないと リンク文字だけはブラウザ依存のスタイル（多くの場合、太い青文字で下線付き）で表示されてしまうので、ページの雰囲気を統一したい場合は、リンク文字のスタイル指定をしたほうが良いでしょう。
例えば、
何回もURLを指定する場合、リンクの基準となるURLを指定することで記述するパスを短くすることができます。
ブログの場合は ディレクトリなどが自動で生成されるため、現在のディレクトリからの相対パスではリンク先や画像URLを指定しづらくなりがちです。何回も指定する場合は、アップロード先を基準URLに指定しておくとよいでしょう。
<base href="基準URL">
という形式になります。サンプルソースはこちら。
<base href="http://html.appelle.jp/">
<img src="sample/cat.gif">
<img src="sample/bird.gif">
<img src="sample/dog.gif">
基準URLを指定しているので、画像 1つ1つのURLが短くて済みます。
ホームページやブログなどのウェブサイトに、画像を表示する際に、画像内にクリック可能な領域を作り、リンクを貼ることができます。クリッカブルマップとも言います。マップ用画像ファイルとマップ定義します。
という記述になります。形状や座標の指定方法は、下記の通りです。
<a>タグ内の style指定で、リンク文字の背景色を指定することができます。
ソースは、次のようになります。赤字部分で『 TOP 』の背景色を黄色に、青字部分で『 RETURN 』の背景色をライム色に指定しています。
｜<a href="http://html.appelle.jp/" title="トップページへジャンプ"
style="background-color:yellow">TOP</a>
｜<a href="javascript:window.history.back();" title="一つ前のページへ戻る"
style="background-color:lime">RETURN</a>
｜
マウスがリンク文字上にあるときに表示するチップヘルプ（バルーンヘルプ）の内容を指定することができます。文字数が多い場合は、適当に折り返されて数行に渡って表示されます。
下記のリンクにマウスを重ねてみてください。ヘルプが表示されます。
ソースは、次のようになります。赤字部分でヘルプの内容を指定しています。
<a href="./sample/linktest.html" target="_blank" title="このページは、リンクのテストのためのものです。テストのページが表示されたら、正常にリンクが貼られています。">テストのページへ</a>
ホームページやブログなどのウェブサイトに アンカータグ( Aタグ)を使って他のページへジャンプするためのリンクを設定する際に、テキストだけでなく 画像にリンクを貼ることもできます。あらかじめ、画像をアップロードしておいてください。
| _top | 今のフレームのトップページ（フレームが属するウィンドウ） |
| _blank | 新しいウィンドウを開いて表示 |
| _self | 今のフレームまたはウィンドウ |
| _parent | 今のフレームを取り囲む一つ上の親フレーム |
| 任意名称 | フレームを使用していなければ新しいウィンドウが開く。 フレームを使用していてフレームの名前と一致している 場合、そのウィンドウ。 |
サンプルです。
ホームページやブログなどのウェブサイトに、他のページにジャンプするためのリンクを貼ることができます。アンカータグ( <a>タグ) を使います。
| _top | 今のフレームのトップページ（フレームが属するウィンドウ） |
| _blank | 新しいウィンドウを開いて表示 |
| _self | 今のフレームまたはウィンドウ |
| _parent | 今のフレームを取り囲む一つ上の親フレーム |
| 任意名称 | フレームを使用していなければ新しいウィンドウが開く。 フレームを使用していてフレームの名前と一致している 場合、そのウィンドウ。 |
URL補完機能が付いているブログでは、『http://』で始まる文字列を 投稿欄に記述するだけで、アンカータグを自動挿入してくれるものもあります。
サンプルソースです。
コンピュータとインターネット > データ形式 > HTML > リファレンス