リンクに関する要素コミュ

  • 1
  • 0pt
掲示板へ


リンクに関する要素一覧

リンクの仕組み


ハイパーリンクリンク)とは、文字列や画像を事前定し、それをクリックすることで他のページや同ページの別の場所にジャンプできるようにする仕組みのことです。

例: ニコニコ大百科トップ Yahoo!Japanexit googleexit

リンクには、大きく分けて次の3種類があります。

2,3のリンクるためには、リンク先のページ事前アンカー印)を打ち込んでおく必要があります。

別ページへのリンクを張る


書式は、<a href="【リンク先のURL】">【リンクを張る文字列】</a>です。

ニコニコ大百科のURL(https://dic.nicovideo.jp/から始まるもの)を指定する場合、「http://dic.nicovideo.jp」の部分を省略することが出来ます。

大百科以外のURLを指定した場合<a>タグに自動的に「rel="nofollow" target="_blank"」が追加され、逆に大百科のURLを指定した場合これらは削除されます。
「target="_blank"」はリンク先が新規ウィンドウもしくは新規タブで開くようにするものです。また「rel="nofollow"」は外部検索エンジン(googleなど)にそのリンクを評価対象から外させ、リンクを多用したスパムサイトだと見なされないようにするものです。

また大百科ではa要素にhref属性を指定した場合、自動リンクがされなくなります。

ソースコード

<p><a href="https://dic.nicovideo.jp/">ニコニコ大百科トップページ</a></p>
<p><a href="/a/ニコニコ大百科:ガイドブック">ニコニコ大百科-ガイドブック</a></p>
<p><a href="http://ja.wikipedia.org/wiki/" rel="nofollow" target="_blank">wikipediaトップページ</a></p>

表示結果

ニコニコ大百科トップページ

ニコニコ大百科-ガイドブック

wikipediaトップページexit

a要素には文字以外にもimg要素などのインライン要素をとる事が出来ます。

a要素はインライン要素ですので、内容部分にブロックレベル要素を指定することはできません(例えば、<a href="××"><div>~</div></a> とすることはできません)。クリックできるリンク領域を広げたい場合はCSSのdisplayプロパティ等を使用してください。

href属性の属性値に外部リンクを指定すると自動的に末尾に<img src="/img/nv.gif">が、ニコニコ動画を指定すると<img src="/img/nv.gif">が、マイリストを指定すると<img src="/img/mylist.gif">がそれぞれ自動的に追加されます。これらを消去する方法についてはこちらをご覧ください。

また大百科自体のスタイルシートによって、未訪問のa要素にはcolor:#0066cc  が、訪問済みのa要素にはcolor:#ff8800  が、マウスオーバーをした際のa要素にはcolor:#ff8800、border-bottom:1px solid #ff8800が、また1文字記事の自動リンクにはcolor:#444  が指定されています。

a要素もしくはそれを囲む要素にcolorプロパティを指定することで、未訪問・訪問済み・マウスオーバーをした際の文字色およびボーダー色を指定した色にすることができます。ただし、これら3つにそれぞれ別々の色を指定することはできません(大百科ではCSSの擬似クラスが利用できないため)。

アンカーをつける(リンク位置を指定する)


<a id="【任意の名前】">【アンカーを付ける文字列】</a>を、記事内のジャンプ先にしたい場所に指定します。

名前は半角英数・ハイフン( - )・アンダーバー( _ )・コロン( : )・ピリオド( . )のみが使用できます。アルファベットに関しては大文字・小文字の区別があり、先頭の文字はアルファベットでなければいけません。

大百科ではid属性を指定すると自動的に同名のname属性が付加されます。アンカー名を修正したい場合はid属性とname属性の両方を変更しなければいけません。

またa要素にid属性(name属性)を指定した場合自動リンクがされなくなるので、これを利用して自動リンクを意図的に回避することができます。
2011年4月末頃の大百科仕様変更以降、name属性を指定した<a>~</a>を投稿すると自動的に終了タグが開始タグの直後に(間に文字列を含まないように)移動するようになり、自動リンクの回避が出来なくなりました。name属性をつけずid属性だけをつけた場合は、表示確認等の作業を一切せずに「投稿する」ボタンを押すと一時的に囲んだ状態のまま投稿できます(表示確認したり、更に編集したりすると自動的にname属性に置き換わり解除されてしまう)。
詳しくは自動リンクの記事をご覧ください。

ソースコード

<p><a name="NullPo" id="NullPo">ガッ</a></p>

表示結果

ガッ

同ページ内リンクを張る


ソースコード

<p><a href="#NullPo">ぬるぽ</a></p>

表示結果

ぬるぽ

別ページの指定の位置へリンクを張る


ソースコード

<p><a href="https://dic.nicovideo.jp/id/4188991#h2-2">HTMLカラーコード・関連項目</a></p>
<p><a href="http://ja.wikipedia.org/wiki/HTML#.E6.AD.B4.E5.8F.B2" rel="nofollow" target="_blank">wikipedia-HTML-歴史</a></p>

表示結果

HTMLカラーコード・関連項目

wikipedia-HTML-歴史exit

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。

【スポンサーリンク】

  • 1
  • 0pt
スマホ版URL:
https://dic.nicovideo.jp/t/c/co398156

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません
コミュニティ記事には、掲示板は存在しません。ニコニコミュニティ掲示板をご利用ください。

過去のオススメ記事