バカネコ日記

リンク作成法

   

HTMLでリンクを作る方法

 

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

 

第2講  画像でリンクする

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

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

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

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

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

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





実演してみよう。

ここで<b>里親募集</b>しています。 ←HTMLソース(太字にする)
    ↓
ここで里親募集しています。    ←ブラウザ上での表示


ここで<i>里親募集</i>しています。 ←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は、本来は、画像が表示できない場合に、その代替として表示される文字列だ。
画像が表示されている場合は、マウスカーソルを画像の上にあわせると
まるで説明文のような感じで出てくるアレである。

 

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

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

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

帰ってきて欲しい。

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

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

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

ならば!

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

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

テキストリンクを例に取ろう。 その基本形は
  <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さんの日記である。(勝手に紹介してゴメンなさい)

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

  あたしをもらってください。おねがいにゃん!

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

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




タグの位置と優先順位

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

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

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

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

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

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

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

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

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


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

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

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

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


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


補講2

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

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



1.画像の枠線の消し方

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


確かに、これで画像も表示されるし、ジャンプもできるのですが、このままだと
青紫のふちというか、枠線が出来てしまいます。
これを消すには、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 の数値を0ではなく、大きくするとどうなるか?
興味のある方はやってみてください。 ダサくなるので、あまりやりたがる人は
いないと思いますが(笑)




2.別ウィンドウで開く

さて、別ウィンドウで開きたいのに、うまくいかないという質問がありました。
リンク先を別ウィンドウで開くには、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は、インターネットエクスプローラのアドレス欄から、コピー&ペースト
するのが、一番、簡単で正確です。

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

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

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

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



3.テキストリンクの下線の消し方

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

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

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

テキストリンクの基本形は
<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> 
とすればOK。

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



4.それでもダメなら

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

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

楽天フリマで、「にゃんタグ」というソフトが売られていますから、
これを使います。

本来は、ワンタッチ式カラーコードとして、作られたもので、
いちいち、色見本とコード番号を探し回らずに済ませるためのものですが、
リンクがカンタンに作れるので、これを流用します。

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

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




超初心者用HTML新兵器






Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.