ＨＴＭＬ ハイパーリンクを作る
HTMLタグのページ
リンクを貼る
アフィリエイトには欠かせないリンクの貼り方です。
ただし、楽天アフィリエイトでは既存のリンクタグに関しての改造（バナーサイズ変更 属性の変更等）を禁止しているようですので、ご注意ください。
基本のリンクの貼り方 （他のページに飛ばす方法） <a ｈref="リンク先のURL">～</a>
リンクに画像を使う <a href="URL"> <img src="画像のURL"></a>
テキストにリンクを貼る代わりに、画像にリンクを貼ります。
タグ
ブラウザ表示
* <a href="URL">と</a>の間にテキストの代わりに<img src="画像のURL">を組み入れるだけです。
☆ 楽天広場の 『ページ作成・編集』⇒ 『画像倉庫(画像の登録管理)』⇒ 『登録した画像の一覧』から画像を選びクリックすると、選んだ画像と共に 、『この画像を表示する』の欄が表示されるので、
そこの <IMG SRC="http://plaza.rakuten.co.jp/img/user～>をコピペするだけでOKです。
☆ 画像オプションからなら、アフィリエイトのバナーをコピーするように、簡単にタグがコピーできますね。
タグ
<a href="リンク先のURL"> <img src="画像のURL">
</a>
ブラウザ表示
* <a href="URL">と</a>の間にテキストの代わりに<img src="画像のURL">を組み入れるだけです。
☆ 楽天広場の 『ページ作成・編集』⇒ 『画像倉庫(画像の登録管理)』⇒ 『登録した画像の一覧』から画像を選びクリックすると、選んだ画像と共に 、『この画像を表示する』の欄が表示されるので、
そこの <IMG SRC="http://plaza.rakuten.co.jp/img/user～>をコピペするだけでOKです。
☆ 画像オプションからなら、アフィリエイトのバナーをコピーするように、簡単にタグがコピーできますね。
オンマウスで説明文を出す（リンクを貼った画像にマウスを乗せると説明文が出る）
<a href="URL" title="画像の説明や名前">
前項目のタグの後ろに 【titlet="説明文"】をつけます。
タグ
ブラウザ表示(画像にマウスを乗せてみてください)
* ちょっと横道にそれますが・・・ 画像の外枠が青く出ているのはみっともないので、はずしましょう!!
border="0"を使って画像の外枠を取る
タグ
ブラウザ表示
☆ ただし、上の枠の中のリンクのように、枠をとってしまった場合、その画像にリンクが貼られているのかどうかが一見わからなくなってしまいます。
【リンクが貼られていますよ】とすぐにわかってもらうためには外枠線ははずさない方がいいのですが、見栄えを考えると？？ですね＾＾；（特に他のサイトさんへ飛ばすリンクバナーには目障りです）
そんなときは、テーブルに入れたりよこ線を使うなどして、『このコーナーの画像にははリンクが貼られています。』とわかるようにしておきましょう。
もちろん、title=""を使うことも有効です。
タグ
<a href=リンク先のURL" title="美味しいもの 食べよぅ♪"
>
<img src="画像のURL">
</a>
<img src="画像のURL">
</a>
ブラウザ表示(画像にマウスを乗せてみてください)
* ちょっと横道にそれますが・・・ 画像の外枠が青く出ているのはみっともないので、はずしましょう!!
border="0"を使って画像の外枠を取る
タグ
<a href="リンク先のURL" border="0"
>
<img src="画像のURL">
</a>
<img src="画像のURL">
</a>
ブラウザ表示
☆ ただし、上の枠の中のリンクのように、枠をとってしまった場合、その画像にリンクが貼られているのかどうかが一見わからなくなってしまいます。
【リンクが貼られていますよ】とすぐにわかってもらうためには外枠線ははずさない方がいいのですが、見栄えを考えると？？ですね＾＾；（特に他のサイトさんへ飛ばすリンクバナーには目障りです）
そんなときは、テーブルに入れたりよこ線を使うなどして、『このコーナーの画像にははリンクが貼られています。』とわかるようにしておきましょう。
もちろん、title=""を使うことも有効です。
別窓を開かせるリンク <a ｈref="URL" ｔarget="_blank">～</A>
現在開いている窓とは別の窓を新たに開いてそこにリンクさせる方法です。
ちょっとこっちもみて欲しい。でも元のページに戻ってきて欲しい！なんて時に有効ですね。
タグ
ブラウザ表示
* ブラウザに表示されているだけでは別窓が開くことがわかりませんが、 クリックするとちゃんと別窓が開きます (￣ｗ￣)ぷ
ちょっとこっちもみて欲しい。でも元のページに戻ってきて欲しい！なんて時に有効ですね。
タグ
<a href="リンク先のURL" ｔarget="_blank"
>
<img src="画像のURL">
</a>
<img src="画像のURL">
</a>
ブラウザ表示
* ブラウザに表示されているだけでは別窓が開くことがわかりませんが、 クリックするとちゃんと別窓が開きます (￣ｗ￣)ぷ
リンクターゲットの種類
リンク先を指定するターゲットの種類
- ｔarget= "_blank" ・・・・別窓を開いてリンク先を表示する
- ｔarget= "_top" ・・・・全てのフレームを取り払うリンク
- ｔarget= "_self" ・・・・同じ窓にリンク先が表示される
- ｔarget= "_parent" ・・・・一番外のフレームは残す。
- ｔarget= "フレーム名"
・・・・フレームから別フレームへのリンク
楽天サイトの場合で使用するのは １ と ３
リンク画像に代替テキストを埋め込む <img ｓrc="画像URL" alt="代替文字">
画像にalt属性をつけることで、画像表示に時間が掛かっても（画像が表示されなくても）画像を貼っている場所に代替で文字が出るようにします。
リンクされていない画像でももちろん使えます。
タグ
ブラウザ表示
* 文章がちょっと長くても、オンマウスすれば代替テキストが新たに表示されます。
☆ この場合、上記で説明した title="テキスト"を同時に打ち込んでおいても、title="テキスト"は表示されなくなります 。
リンクされていない画像でももちろん使えます。
タグ
<a href="リンク先のURL" >
<img src="画像のURL" alt="代替テキスト " >
</a>
<img src="画像のURL" alt="代替テキスト " >
</a>
ブラウザ表示
* 文章がちょっと長くても、オンマウスすれば代替テキストが新たに表示されます。
☆ この場合、上記で説明した title="テキスト"を同時に打ち込んでおいても、title="テキスト"は表示されなくなります 。
リンク画像に文字を回り込ませる <img src="" align="位置">～テキスト～ （ 改行<br clear="left">）
ページのレイアウトタグ
の付け足しとおさらいです。
タグ
ブラウザ表示
このようにリンクさせた画像にalign=""を使用して文字の回りこみをさせることが出来ます。
回りこみ解除タグを使えば改行できます。
align="●●" 位置と br clear="●●"の位置は、left、center、rightの3種があります。
<br clear="left">を使わないで<br>で改行すれば回り込んだままで文章が続きます。
ブラウザ表示例
このようにリンクさせた画像に align=""
を使用して文字の回りこみをさせることが出来ます。
<br>だけの改行で長く文章を続けていくと
こんな感じで画像の高さ分は回り込んで、その後は画像の下に文章が続きます。
* <Img Src="画像のファイル名" align=" left ">の位置と <br clear=" left ">の位置は同じになります。
つまり、画像ファイルに <img src="画像ファイル名" aligin="right" >と命令をしていれば、
それを解除する改行タグは < ｂｒ clear="right" >となります
タグ
ブラウザの表示
画像に文字の回りこみをしていた場合、
回りこみを解除して改行できます。
clear="●●"・・・●●の位置には、left、center、rightの3種があります
タグ
<a href="リンク先のURL">
<img src="画像のファイル名" align="left" >
このように画像に文字の回りこみをさせることが出来ます。<br>
回り込み解除の改行を行うと、回りこみを解除して改行できます。 <br clear="left">
align="●●" 位置と br clear="●●"の位置は、left、center、rightの3種があります。
<img src="画像のファイル名" align="left" >
このように画像に文字の回りこみをさせることが出来ます。<br>
回り込み解除の改行を行うと、回りこみを解除して改行できます。 <br clear="left">
align="●●" 位置と br clear="●●"の位置は、left、center、rightの3種があります。
ブラウザ表示
このようにリンクさせた画像にalign=""を使用して文字の回りこみをさせることが出来ます。回りこみ解除タグを使えば改行できます。
align="●●" 位置と br clear="●●"の位置は、left、center、rightの3種があります。
<br clear="left">を使わないで<br>で改行すれば回り込んだままで文章が続きます。
ブラウザ表示例
このようにリンクさせた画像に align=""を使用して文字の回りこみをさせることが出来ます。
<br>だけの改行で長く文章を続けていくと
こんな感じで画像の高さ分は回り込んで、その後は画像の下に文章が続きます。
* <Img Src="画像のファイル名" align=" left ">の位置と <br clear=" left ">の位置は同じになります。
つまり、画像ファイルに <img src="画像ファイル名" aligin="right" >と命令をしていれば、
それを解除する改行タグは < ｂｒ clear="right" >となります
タグ
<IMG Src=画像のファイル名" align=" right
">画像に文字の回りこみをしていた場合、
<br>回りこみを解除して改行できます。
<br clear=" right "> clear="●●"・・・●●の位置には、left、center、rightの3種があります
<br>回りこみを解除して改行できます。
<br clear=" right "> clear="●●"・・・●●の位置には、left、center、rightの3種があります
ブラウザの表示
画像に文字の回りこみをしていた場合、回りこみを解除して改行できます。
clear="●●"・・・●●の位置には、left、center、rightの3種があります
回りこみさせたテキストと画像の間隔を指定する
<img src="画像URL"align="画像の位置" hspace="横間隔"vspace="縦間隔">
タグ
<img ｓrc="画像のURL" align="right" h
space="30"vspace="20"
>
このように文字と画像の間隔を設定します。画像に外枠をを表示さるとわかりやすいですね。より解りやすいようにちょっと極端に 横間隔は30、縦間隔は20の設定にしてみました。上記の例のように、画像と文字の間がないととても読みにくいのですが、このように間隔を空ける事でより読みやすくなると思います。
このように文字と画像の間隔を設定します。画像に外枠をを表示さるとわかりやすいですね。より解りやすいようにちょっと極端に 横間隔は30、縦間隔は20の設定にしてみました。上記の例のように、画像と文字の間がないととても読みにくいのですが、このように間隔を空ける事でより読みやすくなると思います。
ブラウザ表示
このように文字と画像の間隔を設定します。画像に外枠をを表示さるとわかりやすいですね。より解りやすいようにちょっと多めに 横間隔は30、縦間隔は20の設定にしてみました。上記の例のように、画像と文字の間がないととても読みにくいのですが、このように間隔を空ける事でより読みやすくなると思います。追加*** もうちょっと文章を続けないと画像の下まで文章が回ってこないようなので、意味のないことをツラツラと続けて書いていきますが、そろそろいいでしょうかね？？ あ、いいですね、これで縦間隔もつかめると思います。
© Rakuten Group, Inc.
