文字や画像にリンクを貼る方法

こんにちは、ぜんです。


これまでhtml タグについて書いてきましたが、

やりだすとキリがないので

今回でいったん終わりにします。


今回は文字や画像にリンクを貼る方法です。


リンクを貼ることは頻繁にありますので、

基本だけはしっかりと学ぶ必要があります。


では今日もいってみましょう。

 

 

文字にリンクを貼る方法

 

 

リンクを貼るには

 

<a href="リンク先のURL”>リンクにしたい文字</a>

 

で記述します。

 

 

 

 

 

<a href="http://levelup-affiliate.com">私のブログのトップページ</a>

 

私のブログのトップページ

 

 

 

 

とこんな具合に <a href= の後にURLとリンクにしたい文字を続けることで

文字にリンクをつけることができます。

 

 

 

 

 

画像にリンクをつける方法

 

 

では次に画像にリンクをつける方法です。

 

画像にリンクをつける場合はもう少し複雑になります。

商品画像にアフィリエイトリンクをつけたい場合などに

この方法を使うと良いでしょう。

 

 

例をあげますが

商材のアフィリエイトリンクをつけるのも

現金ですので私の個人的に好きな

バッタちゃん画像でいきます。

 

下のバッタちゃん画像をクリックすると

私が以前運営してたブログにとびます。

 

オンブバッタ

 

 

この時のタグは

<a href="リンク先のURL"><img src="画像のURL”width="200"height"150"></a>

 

のようにリンクタグと画像タグを連続で使えばいいわけです。

 


 

補足として知っておきたいのは

altという文字です。

 

img の後に このaltという文字を入れることで

この画像が何を意味しているのかを表します。

 

 

<a href="http://onbu-.seesaa.net/"><img alt="オンブバッタ"

height="150" src="画像URL" width="200" /></a>

 

 

画像そのものは私たち人間から見ると

「それが何であるか」はわかるのですが、

検索エンジンからは

その画像が何の画像であるかは認識できません。



なので この alt の後ろに 画像の説明を入れることで

「この画像はオンブバッタの画像である」

ということを認識させることができます。


 

リンクを別のウインドウで開く方法

 

もう一つ付け加えておきたいのが

リンクを別のウインドウで開く方法です。



リンクをつけるといっても

その使い方は様々です。



リンク先へ読者さんを誘導してから

もう一度自分のブログへ帰ってきてもらいたい時などは

別のウインドウで開いてもらった方が

読者さんがわざわざ戻るボタンを押す手間が省けます。


戻るボタンを押すのは

意外に面倒だったりするんですよね。


読者さんが別窓で開いたものだと思って

ウインドウの右上の×マークを押してしまったら

「あれっ閉じちゃった」といって

もう戻って来れなくなります。


 

なのでリンクをつける場合には

同じページでウインドウを開くか

新しくウインドウを開くかを意識してする必要があります。

 

 

やり方としましては

target=”_blank” という文字を

リンク先のURLの後ろに追加します。

 

 

<a href="http://onbu-.seesaa.net" target="_blank">

<img alt="オンブバッタ" height="150" src="画像URL" width="200" /></a>

 

こうすることで別のウインドウで開くように設定できます。

 

 

 

HTMLの項目を続けてきましたが

なかなか最初はやっかいで

苦手意識をもってしまうかもしれません。

 

 

ですが

 

自分がしたいことは何なのか、

自分がしたいことをするにはどうすればいいのか

 

 

この2点だけを考えて

検索したり調べたりしてやっていけば

しだいに身につきますので

地道にやってみてください。

 


 

 

 

あとがき

 

リンクと聞くと私は昔にやった「ゼルダの伝説」という

ゲームのキャラクターを思い出します。

 

CMでこのリンクというキャラが

剣をジャンプしながら上に突いたり下に突いたり

してモンスターを倒す技が当時は斬新でして

「これやりたいな~」と思ったものでした。

 

その時分、近所のお兄ちゃんが私の家で

長い木の定規を持ちリンクの上突きのマネをして

蛍光灯を見事粉砕しました

 

 

 

 

リンクをするときは慎重にしないといけませんね。

 

 

 

 

 

本日もご訪問ありがとうございました~。

 

 

 

 

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

メルマガ発行中です。

ブログとは違う記事を書いている
ぜんメルマガ「ネットビジネス公園」

購読よろしくです!

メルマガ登録
メールアドレス
お名前
powered byメール配信CGI acmailer

あわせて読みたい関連記事

タグ


2012年3月6日 | コメント/トラックバック(2)|

カテゴリー:html タグ

トラックバック&コメント

トラックバック

コメント

  1.  
    ぜんさん☆
     
     
    こんにちは、ヤマオです^^
    いつもお世話になってますm(__)m
    ヤマオブログへのコメント感謝です!
     
     
    リンクミスはしょっちゅうやってました^^;
    特に別窓は思い出いっぱいです(笑)
     
     
    先輩アフィリエイターさんに
    ブログランキングのリンクが
    同じ窓になってるよ!って注意されました^^(爆)
     
     
    でも案外やってない人が多いんですよね^^;
    忘れてる人はこの記事を見てもらいたいですね☆
     
     
    ヤマオはリンクの名前を
    ずーっと『ゼルダ』だと思っていた子です。
    真実を知ったのは高校生の時だった^^;
     
     
    それでは
    今日も元気に応援『ポチッ』とね^^

    • ぜん より:

      ヤマオさん、こんにちは~。

      リンクをつけるときは
      ちゃんと自分が思ったとおりになっているか
      チェックしないといけませんね。

      やったつもりでミスってることもしばしば。

      教材とかにもブログランキングは別窓で
      とちゃんと書かれているので、
      頭では理解しているつもりでも

      実際にはやってなかったりします。

      私も先輩アフィリエイターさんに指摘されたので
      すごく思い出に残ってます。

      ゼルダって何の名前なのか
      わかりませんよね。

      影のリンクと闘うところが好きでした。

      今、自分の影と闘うことになったら
      確実に負けます。

      元気に応援ありがとうございます。


このページの先頭へ