楽天コミュニティBlog

自分のサイトから、ちがうページにリンクをはる。
他のサイトにリンクをはる。
画像にリンクをはる。こんなとき・・・

<a href="">～</a>

を使ってみましょう！


「=""」には、リンクしたいページのＵＲＬをいれます。
「～」には、リンクであることがわかる言葉や画像をいれます。


たとえば・・・

「楽天広場」 （「<a href="http://plaza.rakuten.co.jp/">楽天広場</a>」と入力）

これをクリックすると、楽天広場のページがでてきます。
このように「<a href="">～</a>」をつかうと、自サイトや他サイトにリンクをはることができるのです。


■とっても便利な「target="_blank"」属性もつかってみよう。

この属性をつかうと、リンク先のページを新しいウィンドウで表示することができます。

ということは・・・
楽天広場のページを閉じると、自分のサイトがまた表示されます。
自分のサイトをまた見てもらえる可能性が、グ～ンと高くなるのです。

この属性が活躍するのは、たとえばアフィリエイト。
自分のページからお店のページを見てもらいますよね。

自分のページが常に表示されていると・・・
「お店のページを残しつつ、自分のページからまた新しいページを開いて比較する」
なんてこともできるのです。

「楽天広場」 （「<a href="http://plaza.rakuten.co.jp/" target="_blank">楽天広場</a>」と入力します） 「a href="」と「target="_blank"」の間には半角スペースを忘れずに。

■画像のはりかた

画像をはるタグは<img src=""> です。

「=""」の間には、画像を保管してある場所の住所、つまり画像のＵＲＬをいれます。

これを「<img src="">」の「=""」の間にいれてあげれば、
画像をはることができるのです。


■画像にリンクを張る

リンクを張るタグは<a href="リンク先のURL">～</a>です。

画像にリンクを張りたい時は<a href="リンク先のURL"><img src="バナー画像または画像のURL"></a>です。




↑

<a href="リンク先のURL"><img src="画像のURL"></a>

※画像にリンクを張ったときに表示される枠線を消したいときは
border="0"を入力するとこのように枠線がとれるのです。

↓

<a href="リンク先のURL"><img src="画像のURL" border="0"></a>

■画像に文字を回りこませる

文章を画像のヨコにキレイにもってくるには、どうしたらいいのでしょう。

ここで、またまた「align」属性をつかってみましょう。
今回は、属性値に「left」か「right」を入れてみます。

入力ソース
<IMG SRC="～.jpg" align="left">このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。

↓

このように画像の回りにいくつも 段落を表示する事ができます。 alignは非常に役に立ちます。

入力ソース
<IMG SRC="～.jpg" align="right">このように画像の回りにいくつも段落を表示する事ができます。alignは非常に役に立ちます。

↓

このように画像の回りにいくつも 段落を表示する事ができます。 alignは非常に役に立ちます。

■画像の縦横にスペースを空ける

次の例をみてください。

このように画像の回りにいくつも段落を表示する事はできます。alignは非常に役に立ちます。わかりやすいように画像にラインを表示しています。今回は画像にわかりやすいように、ふちどりをつけてあります。 （「<IMG SRC="～.jpg" align="right">このように～ます。」と入力）

このように、通常の状態では、画像と文章がかなりくっついて表示されます。
この画像と文章の間にスペースを空けるとどうなるでしょう？

ここで、「hspace」「vspace」属性をつかってみましょう。
「hspace」はヨコの間隔を、「vspace」はタテの間隔を調節できます。


「<IMG SRC="～.jpg" align="left" hspace="20" vspace="10">このように～せんか？」と入力します。
↓

このように画像の回りにいくつも段落を表示する事はできます。alignは非常に役に立ちます。今回は画像にわかりやすいように、ふちどりをつけてあります。すると、このように「ヨコ20」「タテ10」のスペースがあきました。上の例と比べると、すっきり見やすくなったとおもいせんか？

すると、このように「ヨコ20」「タテ10」のスペースがあきました。
上の例と比べると、すっきり見やすくなったとおもいせんか？

この方法は、日記に画像をのせたり、アフィリエイト画像に説明をつけたり
するときにとっても便利なのです。ぜひ利用してみてね。


■テーブルの背景に画像をつける

今回つかうのは、「background=""」属性です。

この属性は「table」はもちろん、「td」にも設定できます。
「tr」には基本的に設定できません。


「=""」部分には画像のＵＲＬを入れます。

「table」に
「background」を設定：

★文字や文章を入力★

入力ソース

<table border="5" width="200" height="267" background="http://image.space.rakuten.co.jp/lg01/33/0000122333/98/ imgb9317367h94jq7.gif"><tr><td>★文字や文章を入力★</td><tr></table>

テーブルの背景に画像をはりつける場合は(ソースの)

<img src="http://image.space.rakuten.co.jp/lg01/33/0000122333/98/ imgb9317367h94jq7.gif" width="200" height="267" alt="絵画">

青色に表示されているところは、使用しません。

[サイトマップ]

[楽天市場]

[Home]