リンク作成法

HTMLでリンクを作る方法

第１講　　テキストでリンクする

HTMLとは何か、などと、大上段に構えると、分厚い本が
書けてしまうほどの量になる。
ものすごく大変な勉強をするのは、イヤだろうから、超おおざっぱに解説する。

HTMLとは「はいぱー・てきすと・まーくあっぷ・らんげーじ」の
頭文字を寄せ集めたものである。

直訳すると、もの凄い文字用目印付き言語、となるが、これじゃかえって
何のことか分からん。　こんなのは重要でないので覚えなくてよろしい。

HTMLとは「絵と文字が両方使えて、リンクのできる、ホームページ用の言語」
くらいに解釈してかまわない。
例外はあろうが、一般人がこれを使うのはホームページ作成くらいのものである。

でたらめなHTMLでも良いとまでは言わないが、あまり神経質にならなくてもいい。
これは最も普及しているインターネットエクスプローラの許容範囲が広いためである。
少々、間違ったHTMLでもエラーを起こさず表示できてしまう。
ま、おかげで、いいかげんなHTMLが横行する一因ともなっているわけだが。

さて、HTMLはどう書くのか。ここから始めよう。

里親募集、と書きたければ、HTMLでは最低限でも次のように書く必要がある。

　　　<html>
　　　　　<head>
　　　　　</head>
　　　　　<body>
　　　　　　里親募集
　　　　　</body>
　　　</html>

こんなのをいきなり見せられたって分かるわけがない。
おまけに楽天日記では、上に書いたタグ(後述)は使えないから無意味だ。

楽天日記で使う場合に限って、実務的に割り切ろう。

まず、自分で必要な文章を書く。
次に、特定の語句に色を付けたり、サイズを変えたり、リンクを仕込んだりするわけだ。
この作業を指定するのにタグというものを使う。

タグとは荷札か、宅急便の配送伝票のようなものと思えばよろしい。
目的の文章、または、語句を挟んで動作を指示する命令語である。
他の文字と区別するために、半角カッコで括られている。

HTMLは、あそこからここまで、ああせい、こうせい、と目印を付けるようになっている。
だから、マークアップ言語と呼ばれるのだ。

リンクの場合は、アンカータグというのを使う。
ここで里親募集しています、と言う文章の「里親募集」という語句に
リンクを張る場合、次のように指定する。
ここで<a>里親募集</a>しています。

<a> がリンクの始まりを表し、</a>がその終わりを示しているタグである。
もちろん、このままではジャンプしない。
行き先の書かれていない配送伝票だから。

行き先を書かねばなるまい。

行き先は当然、自分が表示したいページである。これはURLを使って指定する。
URLはご存じの通り、ＨＰの住所である。

たとえば、当サイトであれば　 http://plaza.rakuten.co.jp/nyancolon/
という文字列そのものを書くわけだ。
これを飛び先指定を示す　href="" を使って、アンカータグの中に以下のように指定する。

ここで<a href="http://plaza.rakuten.co.jp/nyancolon/">里親募集</a>しています。

これで、リンクの基本形が完成する。
ごちゃごちゃしていて、見てくれが非常に悪いが、これはしかたがない。
ＨＰ上に表示すると、ちゃんと以下のように表示される。
ジャンプもまともに出来る。

ここで里親募集しています。

今、お使いのインターネットエクスプローラの設定を、特にいじっていない限り
里親募集の所には、リンクであることを示す下線が、引かれているはずである。

これを、即、自分のＨＰに応用するには「里親募集」とURL を好きな言葉に
置き換えればよい。

ポイントは　<a href="目的地のURL">リンクしたい語句</a>

というカタチ、を覚えることである。　前後はタダの文章であるので、好きに書けばよろしい。
これが基本なので、アタマに叩き込んでおくこと。
実際、このカタチは頻繁に出現し、またよく使うのである。

文字だけをリンク対象にしているので、これをテキストリンクという。

第２講　　画像でリンクする

リンクの基本形は　
　　<a href="URL">テキスト</a>
であった。　忘れた方や、追記を見ていない方は、第１講を
もう一度おさらいしてほしい。

寄り道だが、ここでHTMLのパターンを見てみよう。
HTMLはタグというものを使って記述するのであった。

タグとは、こんな半角のカッコ　<>　で囲んだものである。
リンクなら　<a>、　太字指定なら　、　イタリック指定なら　、
などである。

これらは「ここからタグの内容を適用しますよ」という意味であり、
開始タグと呼ばれる。
これに対して「ここでタグの効力はおしまいだよ」と、示すのが終了タグである。

リンクなら　</a>　太字指定なら　　イタリック指定なら　
何のことはない、終了タグとは、単にスラッシュが付いただけなのである。

そして、タグの使い方は、適用したい文字列を、開始タグと終了タグで挟むだけだ。

実演してみよう。

ここで里親募集しています。 ←HTMLソース（太字にする）
　　　　↓
ここで里親募集しています。　　　←ブラウザ上での表示

ここで里親募集しています。 ←HTMLソース（斜体にする）
　　　　↓
ここで里親募集しています。　　　←ブラウザ上での表示

なんという安直なルールであろうか。
考えた奴は、きっと安直な性格だったに違いない。　　←　偏見

これでも、HTMLは難しいとおっしゃるかな？
実際のところは、きわめて単純なルールで構成されているのである。
若干の例外はあるものの、所詮はこの組合せなのだ。

ちょっと待て！　リンクの場合はもっとややこしいじゃないか！

確かに、そのとおり。
タグで挟むだけならネコでも書けそうだ。　　←　　ウソ。　ネコには書けない。

リンクの場合、開始タグの中に「href="URL"」というあて先を書かなければ
役に立たなかった。
実はHTMLを見づらくしているのは、このパラメータも元凶のひとつである。

しかし、このパラメータのおかげで、単純なルールにも関わらず、タグは
実に多様な指示をすることが出来るのである。
まあ、HTMLのルールは単純だということと、パラメータがいろいろあるよ、
ということだけ覚えておけば良かろう。

手を広げすぎると、何の説明だか分からなくなるので、リンクの話に戻る。
さて、今回はテキストではなく画像をリンクさせてみよう。
基本形は
<a href="URL">テキスト</a>
であった。

この、テキストの部分を画像に取り替えるだけの話である。したがって、
<a href="URL"><IMG SRC="画像のパス"></a>
となる。　簡単でしょ？

この、<IMG>が画像を表示するタグであり、SRC="画像のパス"　が
「画像はここにありますよ～」というパラメータである。
パスというのは、画像をおいてある場所＋ファイル名である。
楽天日記では、通常URLと同じ形式で示す。

ここで、リンクの飛び先URLと混同しないように注意すること。
片方はリンク先を示し、もう片方は画像の置き場所を示すものだ。

実際に書いてみる。
リンクの飛び先をこのサイトのトップページ
http://plaza.rakuten.co.jp/nyancolon/　とし、
画像はミケの写真を使ってみる。

<a href="http://plaza.rakuten.co.jp/nyancolon/"><IMG SRC="http://plaza.rakuten.co.jp/img/user/49/28/5934928/39.jpg"></a>

実際のブラウザ上の表示は以下のようになる。
クリックすれば当サイトのトップページへジャンプする。

<IMG>タグの中には、他にも、サイズ指定や代替文字指定などをぶち込むことが出来る。

たとえば
<IMG SRC="画像のパス" width="320" height="240" alt="目が開いたミケ">

もう、お気づきだろうが、widthが横幅指定、heightが高さの指定である。
この数字をいじれば、元画像を編集することなく、見かけの大きさを変更できる。

もっとも画像の重さとか、きめの細かさは変わらない。
見かけを小さくしても容量は減らせないし、拡大すれば画面は粗くなる。

altは、本来は、画像が表示できない場合に、その代替として表示される文字列だ。
画像が表示されている場合は、マウスカーソルを画像の上にあわせると
まるで説明文のような感じで出てくるアレである。

第３講　　別ウィンドウで開くリンク

今回は少し、セコイことを考えてみる。

以前、がよろんさんのサイトが面白い、と紹介したら、みんなあっちに
行ってしまって笑死したらしく、戻ってこなかった。
これではせっかく張ったリンクがあだとなって、自分トコの観客が
いなくなってしまう。　これは淋しい。

帰ってきて欲しい。

これはサイト運営者の偽らざる気持ちであろう。
かといって涙ながらに「お願い、帰ってきて！」と、懇願するのも恥ずかしくて
プライドが許さぬ。

技術的にどうにかならぬものなのか？
何とかしようではないか。

問題は、行った先が面白いから、ハマるだけではない。
帰り道が分からなくなるから、でもある。
ブラウザのバックボタンをクリックしても、なかなか元に戻れなかったりするのは
誰しも経験するところである。

ならば！

別ウィンドウを開いて、そこで存分にハマっていただこう。
そのウィンドウを閉じても、自分のサイトは元のウィンドウに残っている。
これならいくらかは、戻ってきてくれることが期待できる。

というわけで、別ウィンドウを開くリンクの書き方を紹介する。
これも難しくない。
ちょいと呪文（パラメータ）を追加するだけである。

テキストリンクを例に取ろう。　その基本形は
　　<a href="URL">テキスト</a>　　であった。

ここで開始タグの中にちょいと細工をする。　追加する呪文は
　　target="_blank"

である。したがって以下のようなカタチになる。
　　<a href="URL" target="_blank">テキスト</a>

実際に飛び先を指定してみる。　飛び先をこのサイトのアクセスログページにして
書いてみるとHTMLソースは次のようになる。
<a href="http://plaza.rakuten.co.jp/nyancolon/?func=log" target="_blank">テキスト</a>

実際の表示は以下の通り。
テキスト

これはターゲット属性を指定する、という作業なのだが、名前は気にしなくとも良い。
リンク先を別ウィンドウで開くのは、観客が鉄砲玉にならないようにするためだと
いうことを覚えておけば充分である。

画像リンクで別ウィンドウを開くにはどうするかって？
今まで、何を聞いておったのだ。応用力を働かせい。
その程度は宿題じゃあ！　自分でやれ～～。

ああ、なんとセコイ講義であったことか。
いくら、自分トコに観客を、つなぎ止めておきたい一心からとはいえ．．．。
これで、あなたの心が狭くなったとしても、当サイトはいっさい関知しないからそのつもりで。

補講

さて、前回の宿題の解凍、じゃなかった回答を示す。

テキストリンクの基本形は
　　<a href="URL">テキスト</a>
であった。

ここで、テキストの代わりに画像を使おう。　テキストの位置に<img>タグを放り込む。
　　<a href="URL"><img src="保管場所"></a>　　
ここまでは問題なかろう。

宿題は、クリックすると、別ウィンドウを開く「画像リンク」を作る、であった。
したがって以下のようなカタチになる。
　　<a href="URL" target="_blank"><img src="保管場所"></a>

ここで、"URL"に飛び先、"保管場所"に画像のアドレスをはめ込めば出来上がり。

実際にやってみよう。
ソースは省略するが以下のようになる。　仔猫の写真をクリックすると、
予告していた「ちょっと面白いページ」にジャンプする。
rapunzel619さんの日記である。（勝手に紹介してゴメンなさい）

　　里親を求めているのはこの子です↓

ただし、リンク先とこの子は関係ありません。　

以上、宿題の解答例終わり。
なんで、別ウィンドウで開くか？　前回、言ったとおり、鉄砲玉状態を防ぐためだ。

タグの位置と優先順位

さて、テキストにリンクを設定すると、インターネットエクスプローラ等のブラウザ上では、
通常、青く表示され、下線が付く。　そして１度でもクリックすると今度は茶色で
表示される。

これは、「ここはリンクが設定されていますよ～」　という意味なのだ。
だから、むやみに下線を引くのは、読者を混乱させる元である。
リンクでもないのに、青色の文字と下線を使うなんてのは、不親切ということになろうか。

だが、逆に、デザイン上、ここは青色を使いたくない、クリックした後も色を
変えたくないと言う場合もある。

一般的に、リンク表示の色を自由に設定するには、スタイルシートというものを使えば、
いっぺんに済ませることが出来るのだが、スタイルシートの勉強などしたくない、
という向きには、簡単なフォントタグで済ませてしまおう。

ココダケ、リンクの色を変えたい、と言う場合、コツがある。
タグというものは、同じテキストに対して、２重、３重に重ねて使うことが出来る。
リンクの基本形、
　　　<a href="URL">テキスト</a>
に対して、イタリックを適用してみよう。

　　　<a href="URL">テキスト</a>
　　　　　↓
　　　テキスト

ちゃんと斜体になることがわかる。
つまり、タグで囲んだものを、更にタグで囲んでもよいということである。

ならば、試しに緑色にセットしてみよう。
<a href="URL">テキスト</a>

だが、こういう書き方はダメである。　うまくいかない。
ホームページビルダーや、FrontPgaeなどのＨＰ作成ソフトを使っていると
たまに、こういうハプニングに出くわす。　思うようなHTMLを生成してくれない。
原因は範囲指定に問題があるのだが、それは今回割愛しよう。

問題はどうすれば、テキストリンクの色を、強制的に自分の望む色に出来るか、である。
なぜ、こんな例題をひっぱってくるのか？

タグは何重にも重ねることが出来るが、その位置に注意せよと言いたいのである。
結論から言えば、内側のタグほど優先される。

したがって、上記の例でいえば、リンクを意味するアンカータグが最も内側であるから
これが、最優先で効力を発揮する。　
つまり、最初は青色だし、クリックした後は茶色になる。　緑ではない。

常に緑色で表示したければ
<a href="URL">テキスト</a>
のように、テキストの一番近くに置く必要がある。

タグを使うときの要注意事例のひとつとして、位置による優先順位を取り上げた。
リンクの強制色指定は、実は、オマケであったりする。
リンクは、クリックしてもらわないと意味がないので、敢えて色をイジる必要も
ないだろう。

補講２

以上、ざっと、リンクの作り方を説明しましたが、理解を助けるためとはいえ、
簡略化しすぎた部分があります。
このため、画像にちょっと不細工なふちが残ってしまいます。　比較するとこんな感じです。

誰にでもわかりやすく、簡単にと、そのことばかり考えて説明しましたので
少し、不完全な解説になってしまいました。　あらためて、対処方法をご紹介いたします。

１．画像の枠線の消し方

まず、リンクのおさらい。　画像でリンクする場合の基本形は
　　<a href="URL"><img src="保管場所"></a>
でした。
"URL"に飛び先、"保管場所"に画像のアドレスをはめ込めば、ＯＫと説明しました。

確かに、これで画像も表示されるし、ジャンプもできるのですが、このままだと
青紫のふちというか、枠線が出来てしまいます。
これを消すには、border="0"　という呪文を、ひとつ追加します。
　　<a href="URL"><img src="保管場所" border="0"></a>

これで、無粋な枠線が消えます。　簡単でしょ？

上の例で言えば、
<a href="http://plaza.rakuten.co.jp/nyancolon/"><IMG SRC="http://plaza.rakuten.co.jp/img/user/49/28/5934928/85.jpg" width="120" height="160" boader="0" alt="ふちがない"></a>
となります。

IMGタグの中には、縦横の幅を表す、width="○○"　や　Height="○○"　なども
入れられますから、どんどん長くなって、読みにくくなりますが、
単に、パラメータという名の呪文を追加しているだけです。

あまり、難しく考える必要はありません。
width, height, border, alt などの順序は気にしなくて良いようです。

ちなみに、border　の数値を０ではなく、大きくするとどうなるか？
興味のある方はやってみてください。　ダサくなるので、あまりやりたがる人は
いないと思いますが（笑）

２．別ウィンドウで開く

さて、別ウィンドウで開きたいのに、うまくいかないという質問がありました。
リンク先を別ウィンドウで開くには、target="_blank"　という呪文を追加します。
width　や　height　を省略して、単純な形でもう一度おさらいしてみましょうか。

基本形
<a href="URL"><img src="保管場所"></a>
　　別ウィンドウで開くようにする
　　　↓
<a href="URL" target="_blank"><img src="保管場所"></a>

ここで、うまくいかないとしたら、とりあえず、URL が正確かどうかを確認しましょう。
URL や保管場所は、間違いやすいところです。
その両端を見てください。　半角または全角のスペース(空白)なんかが、ついていませんか？

メモ帳などに、その部分だけコピーして、じーっと眺めてみるといいかもしれません。
width, height, border, alt などのパラメータを取り除いて、眺めると確認しやすくなります。
ダブルクォーテーションマークで囲んだ中身はスペース、つまり空白文字であっても
データとみなしますから、注意が必要です。

URLは、インターネットエクスプローラのアドレス欄から、コピー＆ペースト
するのが、一番、簡単で正確です。

たとえば、８月１１日の日記のページにジャンプさせたいなら、そのページを開いて
インターネットエクスプローラのアドレス欄を見ます。　これが、正確なURLです。

楽天日記ページのURLは、パターンが決まっていて、必ず
http://plaza.rakuten.co.jp/ユーザー/diary/日付0000
となっています。　たとえば、バカネコ日記の8/11の日記は
http://plaza.rakuten.co.jp/nyancolon/diary/200408110000/
となります。

これを、うろ覚えでキーボードから打ち込もうとしても、かなり無理がありますね。
コピーしましょう。　そして、文字だけでなく、パターンも確認しましょう。
URLが間違っていたり、不必要な空白や文字がくっついていると、うまくジャンプできません。

最後に、もう一度点検してみましょう。

３．テキストリンクの下線の消し方

本来リンクであることを示すために、ひかれている下線ですが、
邪魔になることがあります。

たとえば、バカネコ村の住民台帳などがその例です。
バカネコ村は、たくさんの方に住んでいただいておりますが、
この台帳は、すべて、リンクを張ってあります。

これだけ数が多いと、下線があると、かえって見づらくなりますので、
消してしまいました。

テキストリンクの基本形は
<a href="URL">テキスト</a>
でしたね。

下線を消すには、これにスタイルを指定します。
例によって呪文をひとこと、追加するだけです。
追加するパラメータ(呪文)は　style="text-decoration: none;"　です。

やってみましょう。
<a href="URL">テキスト</a>
　　↓
<a href="URL" style="text-decoration: none;">テキスト</a>

実際に、URLにバカネコ日記のアドレスを入れて、試してみると
以下のようになります。

普通のリンク　　→　テキスト
下線無しリンク　→　テキスト

style="text-decoration: none;"　の意味は、テキスト部分を、
飾り(デコレーション)無しのスタイルにせよ、という命令だったわけです。

これに、別ウィンドウで開く機能を付け加えるには、
<a href="URL" target="_blank" style="text-decoration: none;">テキスト</a>
とすればＯＫ。

いかがですか。　こうやれば、邪魔になる下線は表示しないように出来ます。
テキストの部分を、○○さん、と人の名前に置き換えたのが、
バカネコ村の住民台帳です。

４．それでもダメなら

以上の解説を、繰り返し繰り返し、何度読んでも、できないなら、
HTMLはあきらめて下さい。
と、言ってしまっては、ミもフタもありませんね。

どうしようもなければ、ツールを使うという手もあります。
ホームページビルダーや、フロントページなどを使うんです。
わかっちゃいるけど、そんなの覚えるのが大変だ、
というのなら、しかたがありません。　奥の手です。

楽天フリマで、「にゃんタグ」というソフトが売られていますから、
これを使います。
本来は、ワンタッチ式カラーコードとして、作られたもので、
いちいち、色見本とコード番号を探し回らずに済ませるためのものですが、
リンクがカンタンに作れるので、これを流用します。

別Windowで開く指定とか、下線なしリンク指定なども、ワンクリックですし、
何より、覚えることが極端に少ないので、入手したその日から
誰でも、いきなり使えます。
にゃんタグには、無料おためし版もありますが、無料版ではリンクは作れません。
製品版のフルバージョンでないとダメです。　→　こちら

あ、そうそう、リンク先のURLを、キーボードから手で入力しようなんて、
考えないで下さいね。　たいてい、間違えます。
そんなものは、コピペで充分です。　というか、コピペが無難です。
ちゃんとコピーできたか、確認だけ、目でやって下さい。

超初心者用HTML新兵器