画像をリンクさせる ブログ入門 中級編

ご質問を頂きました。

今写真やバナーにリンクを貼る方法がわからずに右往左往しています。
別に緊急を要するわけじゃないのですが、写真をクリックしてページに飛べたり、バナーを貼るときにリンク先に飛べたりさせたいな。。。って思っているのですが。。。

有名ブログ☆ランキング 総合16位!(^^;)
人気blogランキング現在23位!(>o<)
鬼ブログランキング/起業9位!
(^^)
鬼ブログランキング/ブログカスタマイズ4位!
(^^)/

画像(写真やバナーなど)を管理画面:ファイルのアップロードから初期設定で、サムネイル(縮小画像)を作成にチェックが入ったまま、アップすると

MTマスタースクール






ソースはこうなっています。

<a href="http://livedoor.blogimg.jp/blomal/imgs/3/6/36cb58c9.gif" target="_blank"><img src="http://livedoor.blogimg.jp/blomal/imgs/3/6/36cb58c9-s.gif" width="159" height="106" border="0" alt="MTマスタースクール" hspace="5" class="pict" align="left" /></a><br />

これを分解して簡単に説明しますと

<a href="http://livedoor.blogimg.jp/blomal/imgs/3/6/36cb58c9.gif" target="_blank">

これがリンク先を指定しているタグです。
<a href="URL" この URL ページが開きます。上記画像をクリックし、URL を確認してみて下さい。

http://livedoor.blogimg.jp/blomal/imgs/3/6/36cb58c9.gif

となっているはずです。

半角スペース+target="_blank"> これで別ウィンドウを開く指定をしています。別ウィンドウを開きたくない場合は、これを削除します。


<img src="http://livedoor.blogimg.jp/blomal/imgs/3/6/36cb58c9-s.gif" width="159" height="106" border="0" alt="MTマスタースクール" hspace="5" class="pict" align="left" />

これは、画像を表示させる指令です。
<img src="URL" 画像がアップされている URL です。

width="159" 画像幅

height="106" 画像高さ

border="0" 画像の枠線の太さ

alt="MTマスタースクール" 画像が表示できない時に代替文字として表示する文字列を指定

hspace="5" 画像の文書中での左右方向の余白を指定

class="pict" スタイルシートによる指定

align="left" 画像とテキストの位置関係を指定
(※この場合、画像を左側に配置し、テキストを回りこませる。)
(※上図の場合、強制改行により、テキストが回りこんでいない。)


</a> <a= に対する閉じタグ


リンクタグの基本形式は、<a href="URL">テキスト</a> ですので、

<a href="URL" の URL へリンク先 URL を入れてやればOKです。

上図の画像から、MT マスタースクール公式ページ URL:http://mt-master.net/ にリンクさせる場合は、

<a href="http://mt-master.net/" target="_blank"><img src="http://livedoor.blogimg.jp/blomal/imgs/3/6/36cb58c9-s.gif" width="159" height="106" border="0" alt="MTマスタースクール" hspace="5" class="pict" align="left" /></a><br />

MTマスタースクール
クリックすると別ウィンドウで、
MT マスタースクール公式サイトが開きます。(^^)




4つもありますが、一つ、よろしくお願い致します。 m(_ _)m
有名ブログ☆ランキング 総合16位!(^^;)
人気blogランキング現在23位!(>o<)
鬼ブログランキング/起業9位!
(^^)
鬼ブログランキング/ブログカスタマイズ4位!
(^^)/



サイトマップはコチラ ⇒ ◆コンテンツ一覧◆
 
   
メルマガ登録 ID: 0000160275
ブログ作成入門講座
 
バックナンバー powered by まぐまぐトップページへ
Posted by ブログ作成入門講座 at 20:58│Comments(6)TrackBack(1) | Edit
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/blomal/50258082
この記事へのトラックバック
kotaさんは、ホームページ型ブログ塾(Movable Type マスター・スクール)というオンライン講座の講師をされています。 いま話題のMT(Movable Type)でブログやホームページを作ってみたいという方に向けてどんなサイトでも作れるよう個別徹底指導をされています。 このマ...
MTマスターkotaさんの手相【手相は語る!成功者の素顔と成功の実態!】at 2005年12月17日 03:54
この記事へのコメント
OKIさま
さっそく画像の処理の仕方を説明していただいて有難うございます。
OKIさまの説明のしかたは超初心者の私でも判りやすいので大助かりです。
また判らないことがあった時はリクエストさせて頂きますので
どうぞよろしくお願い致します。
Posted by at 2005年12月10日 01:57
▼華さん

メールに、コメント、ありがとうございます。

> また判らないことがあった時はリクエストさせて頂きますので
> どうぞよろしくお願い致します。

また記事ネタに使わせて頂きますので、ご遠慮なくどうぞ♪ oKi
Posted by ブログ入門講座〜今日からブロガー at 2005年12月10日 03:12
こんばんわ!ランキングを拝見させて頂き、回覧いたしました!沢山アクセスがあって、マジ羨ましいっす!!それだけ、このHPに魅力があるって感じがします!(*^_^*)

で、相互リンクのほうなんですけど、私のHP『★初心者でも安心♪ネット通販生活-Smile Life-★』と相互リンクしていただけないでしょうか?もしよろしければ、私のHPまで足をお運びください。基本的に今流行りの人気商品、ブランド物を商品を中心に販売させて頂いてます。そのほかにも今ニュースで取り上げられてる、『耐震偽装問題』について、いつ地震がおこるかわりません…そんな時に大事な『防災グッズ』などを多数取り揃えています!やって頂ける場合はURLをたどり、相互リンクについてのカテゴリに書き込んで頂きますようヨロシクお願いいたします。お返事お待ちしています(*^_^*)
Posted by orange at 2005年12月24日 03:13
orange さん、おはようございます。
oKi です。

コメント、ありがとうございます!

> 沢山アクセスがあって、マジ羨ましいっす!!
> それだけ、このHPに魅力があるって感じがします!(*^_^*)

みなさんのおかげです。(^^)

> 相互リンクしていただけないでしょうか?

了解です。よろしくお願い致します。


Posted by ブログ入門講座〜今日からブロガー at 2005年12月25日 08:15
こんにちは!はじめして。
ヤプログを利用しているSSSSSSです。
ブログ記事の周りに画像を載せて飾りたいのですが…。
ヤリ方がわからず…。また、画像の大きさも正直どのようにしたら良いのかわかりません(^^; 
どなたか、教えて頂けませんか?お願いします。
Posted by SSSSSS at 2006年01月03日 17:37
SSSSSS さん、こんばんは。oKi です。
コメント、ありがとうございます。

> ヤプログを利用しているSSSSSSです。
> ブログ記事の周りに画像を載せて飾りたいのですが…。

ヤプログは、カスタマイズ度が低いため運営していませんが、

{左:IMG_0000.JPG000.jpg}
ここに文章を入力する。

と、写真が左側にきて、文章が右側に表示されるようです。
サイズは、アップロードする前に調整する必要があるようです。

頑張ってみて下さい♪


Posted by ブログ入門講座〜今日からブロガー at 2006年01月03日 21:01
 
 
AX