HTMLで画像リンクを挿入する方法

 今回は画像のリンクタグを挿入する方法を

紹介します。

私もブログを始めたばかりのころはどうやれば

ブログの記事に画像を挿入することができるのか、

画像にリンクを挿入できるのかがわからずに

悩んだものです。

今回はそういう半年前の私のような方を救済する

ために（大げさ笑）記事に画像を挿入する方法および、

画像にリンクを挿入する方法を紹介したいと思います。

画像を挿入する方法

もし現在、大手の無料ブログサービス等を利用されている

のならば、タグを使って画像を挿入するという場面は

あまりないかもしれません。基本的にほとんどのブログ

サービスではワンクリックで記事中に画像を挿入する方法

が設定されていると思います。

ですが、サイドバーに画像を張りたいとか、記事下に

画像リンクを張りたいとか、そういう場合には今回紹介

する画像挿入方法を知っておくと役に立つと思いますので、

念のために紹介します。画像を挿入したい場合は、

以下のタグをご利用ください。

<img class=”画像のURL” src=”画像のURL” alt=”画像の説明” width=”横幅” height=”高さ” /></p>

では、実際にそのタグを利用して画像を貼ってみたいと

思います。貼る画像は私のプロフィール画像です！

以下のタグを準備して、貼ってみると。。。

<img src=”http://hiro-kun.com/wp-content/uploads/2010/10/profile_pic-1.png” alt=”ひろくんのプロフィール画像！” width=”233″ height=”233″ /></p>

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

こんな感じに仕上がりました。これをワンタッチでやって

くれるのがブログサービスなどにある画像挿入機能という

わけですね。

ちなみに、こちらの記事ではSo-netブログの記事に画像を

挿入する方法を紹介しています。

画像にリンクを張る方法

画像挿入は多くのブログサービスに搭載されていますが、

画像にリンクを貼るというのは少しだけ難しいかもしれ

ません。

作業自体は難しくないのですが、私がブログ初心者

だったころは、よくわからずに困っていた記憶があ

ります。

<a href=”リンク先のURL”><img src=”画像のファイル名（保存場所）” alt=”画像の説明文”></a>

<a href=”hiro-kun.com”><img src=”http://hiro-kun.com/wp-content/uploads/2010/10/profile_pic-1.png” alt=”ひろくんのプロフィール画像！”></a>

こちらを貼ると、以下のようになります。ちなみに画像

をクリックすると、このサイトのトップページにリンク

されるようになっています。

まとめ

では、最後に今回紹介をした画像の張り方と

画像のリンクの張り方をタグとともに再確認

してください。

・画像のみ

 <img class=”alignnone” src=”http://hiro-kun.com/wp-content/uploads/2010/10/profile_pic-1.png” alt=”ひろくんのプロフィール画像！” width=”233″ height=”233″ /></p>

画像＋リンク

 <a href=”http://hiro-kun.com/”><img class=”alignnone” src=”http://hiro-kun.com/wp-content/uploads/2010/10/profile_pic-1.png” alt=”ひろくんのプロフィール画像！” width=”233″ height=”233″ /></a></p>

しかし、私の顔写真ばかりの記事になって

しまった笑