バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

2004年10月21日

テキストリンクに説明文をつける

(28)

カテゴリ：カテゴリ未分類

お笑い記事が書けないので、何の前ぶれもなく、バカネコ講座。
今日はテキストリンクの応用編。

以前、テキストリンクに説明文を付けるにはどうしたらよいか
という質問があった。

画像にカーソルをあわせると、ひょいと説明文が出てくることがある。
本来は説明というよりも、画像が表示されないときの代替表示用テキスト
として用意された機能だ。
こんなやつ　↓

【仔猫の里親募集中】

これは、alt属性という呪文に説明文を仕込んでいるのだが、
テキストリンクに同じような説明を付けたいという注文である。

コメント欄でお答えしておいたのだが、重要なことを見落としていた。
このサイトのコメント欄はリンクを自動変換するように設定している。
そのために、まともにタグが使えない。

http://を含む文字列があると、そこに自動的にリンクを張ってしまう。
おかげで、サイトの紹介には便利だが、タグの質問や説明で、例を
書き込むと、おかしなセミコロンなどが入ってしまう。

セミコロンは要らないよ、こう書くんだよ、とエラソーに回答したら、
その模範解答？とやらにもセミコロンが入り込んでいた。　←　バカまるだし
今頃気づいて訂正するのも不細工だが、ついでだから教材にしてしまおう。

alt 属性は画像を表示する<img>タグの中で使うものである。
テキストリンクにはそんなものはないが、アンカータグにtitle属性を
指定してやれば、同じようなことができる。

さて、能書きはこれくらいにして、実技に入る。
テキストリンクの基本形は、
<a href="飛び先のURL">リンク文章</a> 　であった。
忘れた方は、バカネコ講座「HTMLでリンクを作る」を、いま一度、ご参照いただきたい。

この「リンク文章」というところに、マウスカーソルを当てたときに、「説明文」
という文字列を表示させよう。　基本形に追加する呪文は、 title="説明文" である。
たったこれだけ。　単純に追加すればよろしい。

したがって、
<a href="飛び先のURL" title="説明文" >リンク文章</a> 　となる。
それぞれの呪文がくっつかないように半角スペース１個で区切る。

ここで、飛び先のURLを、実際のバカネコ日記のURLに、置き換えてみると
<a href="http://plaza.rakuten.co.jp/nyancolon/" title="説明文" >リンク文章</a>
となり、実際の表示は以下のようになる。　マウスカーソルを下のリンクに当ててみてほしい。
リンク文章

別ウィンドウで開くには、 target="_blank" を追加すれば良い。
このtarget属性も、<a>タグの中に仕込むものである。
仕込むタグを間違えると、思うように表示されない。

テキストリンクの基本形に戻って、target属性を仕込むと、
<a href="飛び先のURL" target="_blank" >リンク文章</a> 　となる。

さらに、説明文も入れるなら、title属性を指定して、
<a href="飛び先のURL" target="_blank" title="説明文" >リンク文章</a>
とすればよい。

なんのことはない、それぞれの呪文を追加しただけだ。
挿入する相手（タグ）さえ間違えなければ、難しくも何ともない。

【今日のポイント】
１．テキストリンクに説明文を表示するには、 title="説明文" を追加。
２．別ウィンドウでリンク先を表示するには、 target="飛び先URL" を追加。
３．title も target も、挿入先のタグはアンカータグ（<a>）である。
４．alt は<img>タグに使うものである。

【今日のコロン】
また、エサを食べない。　匂いを嗅ぐだけでイヤなようだ。
カツブシを振りかけると、表面だけ舐め取ってしまう。
こんな乾燥物ばっか、食べさせていいものか迷う。
スポイトで水を飲ませると、いやがって逃げる。
人間の頭痛も、いまだサエず。

【次回の予定】
楽天日記の自動バックアップツール、バーニャン１号ミニ最新情報

この記事がおもしろかったと思う人は１票！　クリック　→

　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。

ネコでもわかるＰＣ講座はこちら　→ バカネコ講座

文字を大きく、行間を広げるには　→　ページを読みやすくする方法

ラクしてユーザビリティ改善　　　→　ずぼらなアクセスアップ

画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。

お気に入りの記事を「いいね！」で応援しよう