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

こんにちは、ぜんです。


これまで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でこのリンクというキャラが

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

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

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

 

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

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

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

 

 

 

 

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

 

 

 

 

 

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

 

 

 

 

タグ


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

カテゴリー:html タグ

画像の横に文字を書く方法(回り込み)

こんにちは。

ぜんです。


前回は画像のサイズを変更する方法をお伝えしました。

今日は少し発展して

画像の横に文字を書く方法です。回り込みとも言います。


例えば、こんな感じです。

  早く回り込み教えて

 

 

 

 

 

 

 

 

普通の画像を挿入しただけだと

画像の上か下にしか文字が書けません。

ですがタグを記述することで画像の横に文字を書く事ができます。



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

 

 

 

画像の横に文字を書くには

画像のタグのところに align=“   ”   というタグを記述し、

黄色のところに場所を表すアルファベット指定します。

 

 

画像を左におきたい場合は   left

画像を右におきたい場合は   right

 

 

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”right”>

やっほ~

 

 

 

 

 

 

 

こんな感じです。

 

画像の上部、真ん中、下部に文字を書く場合

 

 

画像の横でさらに

その画像の上から、

その画像の真ん中から

その画像の下部に文字を書く場合には

 

alingh=”         “  のところに top  middle  bottom  と記述します。

 

例   画像の上部から文字を書く

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”top”>

 

  上から~マリコ

 

 

 

 

 

 

 

例   画像の真ん中から文字を書く場合

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”middle”>

 

 

   ち~ゆう

 

 

 

 

 

 

 

例 画像の下部に文字を書く場合

 

<img src=”画像” width=”サイズ” height=”サイズ” alt=”” align=”bottom”>

 

 

  ち~ゆうって何(中?)


こんな感じになります。

 

 

 

回り込みを使うメリット

 


次に画像の横に文字を書くことの

メリットについて私から2点ほどお伝えします。


1 商品の説明をするときに使える

 

画像の横に文字を書くことで

商品の説明がし易くなります。

 

 

  

   ブログとメルマガを使ったアフィリエイト教材。
  
  これがアンリミテッドアフィリエイトです。
  

 

 

 

このように商品の横に文字を書くと

商品の簡単な説明ができて便利です。

 

 


もう一つのことは

実例を先に見てもらいましょう。

 

では、どうぞ。

 


 

 

ねぇねぇ~

回り込みを使うメリットって何なの?

 

 

 

 

 

  こんな風に

     対話形式にできることだよ。

  対話形式にすると読み易くなる場合もあるよ。


 

 

 

 

   画像って難しい時もあるけど

   うまく使えたら面白いね~。

 

 

 

 

 

 

そうそう。
文字だけだと読むのがしんどいけど

画像があると雰囲気も変わって
読むのが楽しくなることもあるよ。

 

 

 

 

2 対話形式にすることができる

 

はい。回り込みを使うと

こんな風に対話形式にすることができます。

 

キャラクターを使って

立場別に対話形式にすることで

説明しやすいこともありますので、

機会があれば使って見てください。

 

 

 

では長くなりましたが本日のまとめ

 

画像の横に文字を書くには

img タグ のところに  align=”        ” を入れ

left     right     top    middle    bottom を記述する。

 

 

画像の回り込みをすることで

商品説明や対話形式に使うことができる。

 

 

 

いつもと記事の雰囲気が

変わりましたが大丈夫ですかね?

 

ちょっと不安ですが、、、。

 

 

 

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

タグ


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

カテゴリー:html タグ

画像のサイズを変更する方法

どうも、こんにちは。 ぜんです。

もうね最近寒いですね。

冷えび~えです。

 

html タグの項目もう少し続きます。

 

さて今日は画像でいきますよ~。
今日は画像の大き
さの変更方法についてです。

 

なんとなく適当にやっておけばどうにかなりそうなことですが、
基本的なことをしっかり身に付けることこそ大切だと思い、
今回お伝えしようと思います。

 

なにかしらつまづく原因は 基礎的知識や理解が
不足していることが多いですからね。
では本日のゲストの登場していただきましょう。

 

 

 

 

 

画像を使うには次の img タグ を使います。

 

 

<img src="画像URL" />

 

 

<img src=""/>の ”  と  " の間に

http://~から始まる画像URLを入れます。

 

 

 

画像のサイズの変更の仕方

 

では次に画像のサイズの変更の仕方ですが、

サイズを指定するときには次のように width と height を使います。

 

<img src="http://levelup-affiliate.com/wp-content/uploads/0190631.jpg"

width=180 height=120>

 

width は横幅 height  は縦幅を表します。

ここの数字を変えることで縦長にしたり横長にすることができます。

 

 

 

タテヨコを同じ比率で拡大、縮小したい場合には

 

 

 %表示を使います。(ブラウザに対する比率を表します)

 

 

 

<img src="http://levelup-affiliate.com/wp-content/uploads/0190631.jpg"

width=50% height=50%>

 

 

まとめ

 

1 画像のタテヨコの比を変えたい場合

 width height を変更する

2 画像のタテヨコを同じ比率で表示したい場合

 
   width  height に %で
大きさを指定する。

 

 

 

 

 

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

タグ


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

カテゴリー:html タグ

このページの先頭へ