有希のPC勉強

PCについて勉強したことを残していくため更新しています。一緒に勉強しませんか?

【中級編】リンクをもっと楽しく使ってみる

目次

あぁ・・・もう小卒かぁ・・・
じゃなくて(^q^)
今回はリンクをもっと楽しく使う方法を紹介します^^
リンクだけでこんなに出来るとしったときは大仰天w

新しいタブを開いてリンクをする方法

TOPへ戻る
リンクをクリックしたのはいいが、
同じタブでとんだため、また先程のページにもどるのが面倒くさい。
そんなことありませんか??←
今回はそれを解決する方法を教えます^^

<a href="URL" target="_blank">文字</a>

これでおkです!
例として

<a href="http://www.hatena.ne.jp/" target="_blank">はてな</a>

と入力し、
はてな
このように表示させます。
クリックしてみると・・・!?((←
新しいタブ(あたらしいウインドウ?)ではてなのTOPページにリンクされたのではないでしょうか?
通常リンクよりはちょいっと便利だと思います。
これをバナーにおきかえると

<a href="URL" target="_blank"><img src="画像のURL"></a>

これで大丈夫です!

リンクに色をつける

TOPへ戻る
リンクって通常水色ですよね。(例外の場合もありますが。)
その色を変えることができるんです^^

<a href="URL" target="_blank" style="text-decoration:none;color:#文字色">文字</a>

うぬ、これで問題ないはずなのさ(`・ω・´)

<a href="http://www.hatena.ne.jp/" target="_blank" style="text-decoration:none;color:#ff0000">はてな</a>

これを入力すれば
はてな
ほら!色が赤いだろう←
カラーコード*1コチラとかがオススメです^^

ボタンをつかってリンク

TOPへ戻る
画像バナーとか作りたいけど面倒くさい!そんな貴方におすすめの方法がありますよ!!←

<input type="button" value="ボタンの文字" style="border-color:#ボタンの枠の色;background:#ボタンの背景色;color:#文字の色" onClick="window.open('URL')">

これでおkなのだ!

<input type="button" value="有希のPC勉強" style="border-color:#none;background:#none;color:#none" onClick="window.open('http://kuromajosan.hatenablog.com')">

とこのように色のところを「none」に設定するとPCでよくみるあのボタンになりますよ^^
←例の結果
(色を指定すればちゃんとその色になります)

URLを入力させてリンク

TOPへ戻る
ときどきリンク先迷ったりしませんか??
リンク集とかにどこのサイトをリンクさせようか・・・など。
そのときに

<input type="text" value="http://" size="60" id="ad"><input type="button" value="入力したURLへとぶ" onclick="window.open(ad.value)">

と入力すれば

このようにURLを入力するフォームができ、「入力したURLへとぶ」のボタンをクリックするとそのURLの先にとぶ仕組みです。
ちなみに「入力したURLへとぶ」の部分はかきかえてつかうとボタンの文字がその文章に変わりますよ~^^

マウスをのせたときに説明の出るリンク

TOPへもどる
よくマウスをのせると説明がでてくるのってありますよね。

<a href="URL" target="_blank" title="説明の文字">文字</a>

これで同じことが可能です。
実際に

<a href="http://d.hatena.ne.jp/kuromajosan/" target="_blank" title="私のはてなダイアリーにとびます">はてなダイアリー</a>

このように入力すると
はてなダイアリー
字の上にカーソルをのせると「私のはてなダイアリーにとびます」と文字がでましたよね?
これは結構使えると思いますよ。

カーソルをのせるだけでリンク

TOPへ戻る
いちいちクリックするのが面倒くさいときには

<a href="kabonochihare" onmouseover="location.href='URL'">文字</a>

これを入力しちゃいましょう!w
有希のPC勉強
文字にカーソルをのせてみてください^^
TOPにもどるはずです!



さてさて、今回は結構多めに紹介してしまったので、指がつかれましたよ;
それでは!!

TOPへ戻る

*1:それぞれの色につけられたコードのこと