GT-ONE 楽天タグ講座 パイプ奮闘記

リンクを貼って見よう

初心者のためのHPの飾りつけ教室VOL.7




【HPの飾りつけ教室VOL.7】 画像にリンクを貼るには!
    前回は画像の貼り付け方をやってみました。では、今度は画像や文字にリンクを貼ってみましょう。
    自分のほかのページにリンクを張って、そちらにジャンプしてもらったり、
    お気に入りのサイトにジャンプさせたり、色々なことが出来ます。
★ 文字や画像にリンクを貼ってみよう! ★
    ダウンロードしてきた、フリー素材のバナーやボタンの画像は、
    <IMG>タグでページに載せるだけではリンクボタンとして機能しません。
    リンクボタンにするためには、ボタン画像にリンクの設定をしないといけないのです。
    これは、文字にリンクを貼った時にも、デジカメ画像にリンクを貼った時にも
    同じことがいえます。

    では、画像にリンクを張ってみる前に、文字にリンクを貼ってみましょう。たとえば、

    【初心者のためのHPの飾りつけ教室VOL.6】

    という文字にリンクを貼ってみますと、↓こうなります。

    【初心者のためのHPの飾りつけ教室VOL.6】 はこちらをクリック!


    これはこのように書いております。


    <A HREF="http://plaza.rakuten.co.jp/gtone/017006" TARGET="_blank"> 【初心者のためのHPの飾りつけ教室VOL.6】 </A>はこちらをクリック!

    アンダーラインの付いた文字をクリックしますと、別のブラウザでリンクのページが現れます。
    基本のタグは↓こうなります。

<A HREF="リンク先のURL(アドレス)" TARGET="_blank">~リンクを張る文章~</A>
    この TARGET="_blank" が窓(ブラウザ)を外に開く属性のタグです。
    同一ブラウザでリンクを出したいときには、TARGET="_blank" を取り除けば、
    同じ画面で、リンクのページが現れます。






    では、画像にリンクを貼って見ましょう。

    基本のタグは↓このようになります。


    <A HREF="リンク先のURL(アドレス)" > <IMG SRC="~画像のURL~" WIDTH="画像の幅" HEIGHT="画像の高さ" ALT="画像の説明" BORDER="0"> </A>
    ここでは、TARGET="_blank" を外しています。
    ですから、同一ブラウザでリンクのページが現れます。

    <IMG SRC="~画像のURL~" WIDTH="画像の幅" HEIGHT="画像の高さ" ALT="画像の説明" BORDER="0">

    これが、リンクを貼る画像のタグですよね。

    画像のタグの中に、 BORDER="0"  という属性のタグが入っている事に気がついたでしょうか。
    これは、画像にリンクを貼りますと自動的に画像に枠が表示されますから
    BORDER="0" として、その枠を消し去る事が出来ます。
    ボタンやバナーをそれらしく見せるには、枠は消した方がいいと思いますよ。


    トップページに戻ります   こちらは、 BORDER="0" を入れないものです。枠が付いていますよね。

    トップページに戻ります   こちらは、 BORDER="0" を入れたものです。枠が消えます。

    上↑は、バナーボタンですが、この「ホーム」などの他に「BBS」とか「RINK」とかあると思いますが、
    自分のホームページ内で使うものですね。例えば、自分のHP内の「BBS」のページに一発でジャンプして貰う、
    また「GALLERY」のメニューのページにジャンプして貰う。

    この様なときは、同一のブラウザの中でページを表示したいものです。外に窓を開けないのです。

    外に窓(ブラウザ)を開けないようにするには、先に述べましたとうり、リンクを貼るタグは、

    <A HREF="リンク先のURL(アドレス)" > ~リンクを貼るターゲット~ </A>

    のままでいいんです。

    しかし、よく行く素材屋さんのサイトとか、お気に入りのお友達のバナーにリンクを張るときは、
    窓(ブラウザ)は、外に開きたいものです。
    その時は、リンクを貼るタグの中に  TARGET="_blank"  を入れてあげますと、
    そのリンクのページは、外に開きます。 このように書きます。

    <A HREF="リンク先のURL(アドレス)" TARGET="_blank"> ~リンクを貼るターゲット~ </A>

    上の「HOME」のバナーボタンは外に窓が開くようにしてあります。


    【余談です】

    自分のホームページにページが増えてきますと、ページにリンクを貼って、ページからページに
    ジャンプして貰うように出来ます。
    ページが増えれば増えるほど、何処に何があるか判らなくなってしまいますね。

    トップページはホームページの入り口であり、ホームページ内で迷った場合や、次にみたいページを捜すために戻るインデックスページです。

    各ページには、いつでもホームに戻れるように、そして戻りやすいように、「ホームに戻る」ボタンを設置した方がいいと思います。

    「HOME」ボタンはページの上と下と両方に置いておくといいですね。
    上の「HOME」ボタンは楽天の場合すべてのページに設置してありますが、ページにアクセスして貰ったときに「見たい情報ではなかった」と戻るためのボタンです。
    下の「HOME」ボタンは、最後まで見てくれた人がHOMEへ戻るためのボタンです。

    お気に入りのサイトやお友達のサイトにリンクを張る場合は、外にリンクしておけば、また戻ってくる手間がはぶける訳です。

    あっちこっちリンクを貼ってしまって、貴方のページへの訪問者を迷子にさせないように
    しましょうね。(*^_^*)
    ではでは・・・がんばってください。






【飾りつけ教室 MENU】 にもどる。






© Rakuten Group, Inc.
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: