TOPページ > リンクを貼る
リンクを貼る

リンクを貼る

ブログでも、通常のWEBサイトと同じように 他のページにジャンプするためのリンクを貼ることができます。

リンクには<a>タグを使いますが、このタグは 圧縮ファイルや画像ををダウンロードさせる、同一ページ内でジャンプする、イラストや写真の一部をクリック可能にするなどいろいろの使い方があります。

リンクを貼る 項目一覧

ホームページやブログなどのウェブサイトから、アンカータグ( Aタグ )を使って、ダウンロードファイルを提供することができます。 <a href="ファイ...

ホームページやブログなどのウェブサイトで、ページの途中など、特定の位置へジャンプするためのリンクを貼ることができます。また、同一ページ内の先頭や途中にジャンプ...

ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合 a { スタイル } という記述になりま...

ホームページやブログなどのウェブサイトに、他ページへのジャンプするためのアンカータグを挿入する場合、リンク文字のスタイル指定することができます。一括で指定する場...

何回もURLを指定する場合、リンクの基準となるURLを指定することで記述するパスを短くすることができます。 ブログの場合は ディレクトリなどが自動で生成されるた...

ホームページやブログなどのウェブサイトに、画像を表示する際に、画像内にクリック可能な領域を作り、リンクを貼ることができます。クリッカブルマップとも言います。マ...

<a>タグ内の style指定で、リンク文字の背景色を指定することができます。 |TOP |RETURN | ソースは、次のようになります。赤字部分...

マウスがリンク文字上にあるときに表示するチップヘルプ(バルーンヘルプ)の内容を指定することができます。文字数が多い場合は、適当に折り返されて数行に渡って表示さ...

ホームページやブログなどのウェブサイトに アンカータグ( Aタグ)を使って他のページへジャンプするためのリンクを設定する際に、テキストだけでなく 画像にリンク...

ホームページやブログなどのウェブサイトに、他のページにジャンプするためのリンクを貼ることができます。アンカータグ( <a>タグ) を使います。 &...

2006年02月26日

ホームページやブログなどのウェブサイトから、アンカータグ( Aタグ )を使って、ダウンロードファイルを提供することができます。

<a href="ファイルURL">表示文字</a>

という記述でファイルURLを絶対パスまたは相対パスで指定します。ダウンロードファイルは通常圧縮されており、一般的に使用されているのが下記のとおりです。

    拡張子アプリケーション主な使用OS
    zipZip圧縮Windows、Macintosh、UNIX
    sitStufflt圧縮Macintosh
    lzhLHA圧縮Windows、DOS

サンプルソースです。

続きを読む "ダウンロードファイルを提供する" »

2006年02月14日

ホームページやブログなどのウェブサイトで、ページの途中など、特定の位置へジャンプするためのリンクを貼ることができます。また、同一ページ内の先頭や途中にジャンプさせたいときにも使えます。ブログでも個別記事が長くなったときなどに使うと便利です。

アンカー位置を指定する
<a name="アンカー名">表示文字</a>
  1. アンカー名:アンカーの識別名を指定します。アンカーへのリンクを指定するために使います。
  2. 表示文字:アンカー位置に表示する文章などを指定します。省略可能です。

というふうに、ページ内にアンカーを張っておきます。アンカーへのリンクは、下記のような記述になります。

アンカーへのリンクを貼る
<a href="ページURL#アンカー名">表示文字</a>
  1. ページURL:ページのURLを指定します。別ページのアンカーへジャンプしたいときに指定します。同一ページ内のアンカーへジャンプさせる場合は、省略できます。
  2. アンカー名:アンカーを貼ったときに指定した名前を記述します。
  3. 表示文字:なんでも構いません。どこへジャンプするのかが分かるような名称にするのがよいでしょう。

サンプルです。

続きを読む "同一ページ内へリンクする" »

ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合

a { スタイル }

という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。

a : link { スタイル } 未訪問リンク文字に対して
a : visited { スタイル }訪問済みリンク文字に対して
a : hover { スタイル }リンク文字にマウスが重なったとき
a : active { スタイル }リンク中文字に対して

という記述になります。
例えば、

続きを読む "未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する" »

ホームページやブログなどのウェブサイトに、他ページへのジャンプするためのアンカータグを挿入する場合、リンク文字のスタイル指定することができます。一括で指定する場合は、

a { スタイル }

という記述になります。一般の文字の色や文字修飾を指定していても、リンク文字のスタイル指定がないと リンク文字だけはブラウザ依存のスタイル(多くの場合、太い青文字で下線付き)で表示されてしまうので、ページの雰囲気を統一したい場合は、リンク文字のスタイル指定をしたほうが良いでしょう。

例えば、

続きを読む "リンク文字のスタイルを指定する" »

2006年02月08日

何回も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が短くて済みます。

ホームページやブログなどのウェブサイトに、画像を表示する際に、画像内にクリック可能な領域を作り、リンクを貼ることができます。クリッカブルマップとも言います。マップ用画像ファイルとマップ定義します。

マップ用画像ファイルとマップ定義を指定する
<img src="画像URL" usemap="#マップ名">
マップを定義する
<map name="マップ名">
<area shape="形状" coords="座標値" href="リンク先URL">
…リンクの数だけ繰り返す
</map>

という記述になります。形状や座標の指定方法は、下記の通りです。

続きを読む "クリッカブルマップを作成する" »

2006年01月29日

<a>タグ内の style指定で、リンク文字の背景色を指定することができます。

TOPRETURN

ソースは、次のようになります。赤字部分で『 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>

2006年01月25日

ホームページやブログなどのウェブサイトに アンカータグ( Aタグ)を使って他のページへジャンプするためのリンクを設定する際に、テキストだけでなく 画像にリンクを貼ることもできます。あらかじめ、画像をアップロードしておいてください。

<a href="ジャンプ先URL" target="ウィンドウの指定">
<img src="画像URL" width="画像の横幅" height="画像の高さ" border="枠の太さ">
</a>
  1. 画像URL:リンクを設定する画像のURLを、絶対パスまたは相対パスで指定します。
  2. 画像の横幅/高さ:画像の表示寸法を指定します。原寸でなくても構いません。省略すると、だいたいは原寸で表示されます。
  3. 枠の太さ:画像の枠の太さを指定します。値は、ピクセル値になります。省略すると ブラウザやスタイルシートの設定によっては 5ピクセル程度の青枠が付いてしまうことが多いので、枠線を表示させたくない場合は、0 に指定しましょう。
  4. ジャンプ先URL:リンクでジャンプさせるページのURLを、絶対パスまたは相対パスで指定します。
  5. ウィンドウの指定:リンク先のページを表示するウィンドウまたはフレームを指定します。下記の中から選択できます。省略すると、『_self 』扱いとなります。現在表示中のページを残したいときは『_blank 』にするとよいでしょう。
    _top 今のフレームのトップページ(フレームが属するウィンドウ)
    _blank 新しいウィンドウを開いて表示
    _self 今のフレームまたはウィンドウ
    _parent 今のフレームを取り囲む一つ上の親フレーム
    任意名称 フレームを使用していなければ新しいウィンドウが開く。 フレームを使用していてフレームの名前と一致している 場合、そのウィンドウ。

サンプルです。

続きを読む "画像にリンクを貼る" »

ホームページやブログなどのウェブサイトに、他のページにジャンプするためのリンクを貼ることができます。アンカータグ( <a>タグ) を使います。

<a href="ジャンプ先URL" target="ウィンドウの指定">
表示文字
</a>
  1. ジャンプ先URL:ジャンプ先のURLを指定します。絶対パスまたは相対パスで指定できます。
  2. ウィンドウの指定:ジャンプ先のページを表示するウィンドウまたはフレームの指定をします。下記の中から選択できます。省略すると、たいていのブラウザでは『_self』のように、今のウィンドウが切り替わります。閲覧中のページを残したい場合は、『_blank』とするとよいでしょう。
    _top 今のフレームのトップページ(フレームが属するウィンドウ)
    _blank 新しいウィンドウを開いて表示
    _self 今のフレームまたはウィンドウ
    _parent 今のフレームを取り囲む一つ上の親フレーム
    任意名称 フレームを使用していなければ新しいウィンドウが開く。 フレームを使用していてフレームの名前と一致している 場合、そのウィンドウ。
  3. 表示文字:リンクを貼り付ける文字です。何でも構いません。

URL補完機能が付いているブログでは、『http://』で始まる文字列を 投稿欄に記述するだけで、アンカータグを自動挿入してくれるものもあります。

サンプルソースです。

続きを読む "テキストリンクを貼る" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス