文字や画像にリンクを貼る方法
こんにちは、ぜんです。
これまでｈｔｍｌ タグについて書いてきましたが、
やりだすとキリがないので
今回でいったん終わりにします。
今回は文字や画像にリンクを貼る方法です。
リンクを貼ることは頻繁にありますので、
基本だけはしっかりと学ぶ必要があります。
では今日もいってみましょう。
文字にリンクを貼る方法
リンクを貼るには
<a href="リンク先のＵＲＬ”＞リンクにしたい文字</a>
で記述します。
例
<a href="http://levelup-affiliate.com">私のブログのトップページ</a>
とこんな具合に <a href= の後にＵＲＬとリンクにしたい文字を続けることで
文字にリンクをつけることができます。
画像にリンクをつける方法
では次に画像にリンクをつける方法です。
画像にリンクをつける場合はもう少し複雑になります。
商品画像にアフィリエイトリンクをつけたい場合などに
この方法を使うと良いでしょう。
例をあげますが
商材のアフィリエイトリンクをつけるのも
現金ですので私の個人的に好きな
バッタちゃん画像でいきます。
下のバッタちゃん画像をクリックすると
私が以前運営してたブログにとびます。
この時のタグは
<a href="リンク先のＵＲＬ"><img src="画像のＵＲＬ”width="200"height"150"></a>
のようにリンクタグと画像タグを連続で使えばいいわけです。
補足として知っておきたいのは
altという文字です。
img の後に このaltという文字を入れることで
この画像が何を意味しているのかを表します。
<a href="http://onbu-.seesaa.net/"><img alt="オンブバッタ"
height="150" src="画像ＵＲＬ" width="200" /></a>
画像そのものは私たち人間から見ると
「それが何であるか」はわかるのですが、
検索エンジンからは
その画像が何の画像であるかは認識できません。
なので この alt の後ろに 画像の説明を入れることで
「この画像はオンブバッタの画像である」
ということを認識させることができます。
リンクを別のウインドウで開く方法
もう一つ付け加えておきたいのが
リンクを別のウインドウで開く方法です。
リンクをつけるといっても
その使い方は様々です。
リンク先へ読者さんを誘導してから
もう一度自分のブログへ帰ってきてもらいたい時などは
別のウインドウで開いてもらった方が
読者さんがわざわざ戻るボタンを押す手間が省けます。
戻るボタンを押すのは
意外に面倒だったりするんですよね。
読者さんが別窓で開いたものだと思って
ウインドウの右上の×マークを押してしまったら
「あれっ閉じちゃった」といって
もう戻って来れなくなります。
なのでリンクをつける場合には
同じページでウインドウを開くか
新しくウインドウを開くかを意識してする必要があります。
やり方としましては
target=”_blank” という文字を
リンク先のＵＲＬの後ろに追加します。
例
<a href="http://onbu-.seesaa.net" target="_blank">
<img alt="オンブバッタ" height="150" src="画像ＵＲＬ" width="200" /></a>
こうすることで別のウインドウで開くように設定できます。
ＨＴＭＬの項目を続けてきましたが
なかなか最初はやっかいで
苦手意識をもってしまうかもしれません。
ですが
自分がしたいことは何なのか、
自分がしたいことをするにはどうすればいいのか
この２点だけを考えて
検索したり調べたりしてやっていけば
しだいに身につきますので
地道にやってみてください。
あとがき
リンクと聞くと私は昔にやった「ゼルダの伝説」という
ゲームのキャラクターを思い出します。
ＣＭでこのリンクというキャラが
剣をジャンプしながら上に突いたり下に突いたり
してモンスターを倒す技が当時は斬新でして
「これやりたいな～」と思ったものでした。
その時分、近所のお兄ちゃんが私の家で
長い木の定規を持ちリンクの上突きのマネをして
蛍光灯を見事粉砕しました。
リンクをするときは慎重にしないといけませんね。
本日もご訪問ありがとうございました～。
タグ
html、リンク、文字、画像2012年3月6日 | コメント／トラックバック(2)|
カテゴリー:html タグ
