画像をリンクさせる ブログ入門 中級編
ご質問を頂きました。
今写真やバナーにリンクを貼る方法がわからずに右往左往しています。
別に緊急を要するわけじゃないのですが、写真をクリックしてページに飛べたり、バナーを貼るときにリンク先に飛べたりさせたいな。。。って思っているのですが。。。
有名ブログ☆ランキング 総合16位！(^^;)
人気blogランキング現在23位！(>o<)
鬼ブログランキング/起業９位！(^^)
鬼ブログランキング/ブログカスタマイズ４位！(^^)／
今写真やバナーにリンクを貼る方法がわからずに右往左往しています。
別に緊急を要するわけじゃないのですが、写真をクリックしてページに飛べたり、バナーを貼るときにリンク先に飛べたりさせたいな。。。って思っているのですが。。。
有名ブログ☆ランキング 総合16位！(^^;)
人気blogランキング現在23位！(>o<)
鬼ブログランキング/起業９位！(^^)
鬼ブログランキング/ブログカスタマイズ４位！(^^)／
画像(写真やバナーなど)を管理画面：ファイルのアップロードから初期設定で、サムネイル(縮小画像)を作成にチェックが入ったまま、アップすると
ソースはこうなっています。
<a href="http://image.blog.livedoor.jp/blomal/imgs/3/6/36cb58c9.gif" target="_blank"><img src="http://image.blog.livedoor.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://image.blog.livedoor.jp/blomal/imgs/3/6/36cb58c9.gif" target="_blank">
これがリンク先を指定しているタグです。
<a href="URL" この URL ページが開きます。上記画像をクリックし、URL を確認してみて下さい。
http://image.blog.livedoor.jp/blomal/imgs/3/6/36cb58c9.gif
となっているはずです。
半角スペース＋target="_blank"> これで別ウィンドウを開く指定をしています。別ウィンドウを開きたくない場合は、これを削除します。
<img src="http://image.blog.livedoor.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 を入れてやればＯＫです。
上図の画像から、MT マスタースクール公式ページ URL：http://mt-master.net/ にリンクさせる場合は、
<a href="http://mt-master.net/" target="_blank"><img src="http://image.blog.livedoor.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 マスタースクール公式サイトが開きます。(^^)
４つもありますが、一つ、よろしくお願い致します。 m(_ _)m
有名ブログ☆ランキング 総合16位！(^^;)
人気blogランキング現在23位！(>o<)
鬼ブログランキング/起業９位！(^^)
鬼ブログランキング/ブログカスタマイズ４位！(^^)／
ソースはこうなっています。
<a href="http://image.blog.livedoor.jp/blomal/imgs/3/6/36cb58c9.gif" target="_blank"><img src="http://image.blog.livedoor.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://image.blog.livedoor.jp/blomal/imgs/3/6/36cb58c9.gif" target="_blank">
これがリンク先を指定しているタグです。
<a href="URL" この URL ページが開きます。上記画像をクリックし、URL を確認してみて下さい。
http://image.blog.livedoor.jp/blomal/imgs/3/6/36cb58c9.gif
となっているはずです。
半角スペース＋target="_blank"> これで別ウィンドウを開く指定をしています。別ウィンドウを開きたくない場合は、これを削除します。
<img src="http://image.blog.livedoor.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 を入れてやればＯＫです。
上図の画像から、MT マスタースクール公式ページ URL：http://mt-master.net/ にリンクさせる場合は、
<a href="http://mt-master.net/" target="_blank"><img src="http://image.blog.livedoor.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 マスタースクール公式サイトが開きます。(^^)
４つもありますが、一つ、よろしくお願い致します。 m(_ _)m
有名ブログ☆ランキング 総合16位！(^^;)
人気blogランキング現在23位！(>o<)
鬼ブログランキング/起業９位！(^^)
鬼ブログランキング/ブログカスタマイズ４位！(^^)／
サイトマップはコチラ ⇒ ◆コンテンツ一覧◆
この記事へのトラックバックURL
http://app.blog.livedoor.jp/blomal/tb.cgi/50258082
この記事へのトラックバック
kotaさんは、ホームページ型ブログ塾（Movable Type マスター・スクール）というオンライン講座の講師をされています。
いま話題のMT(Movable Type)でブログやホームページを作ってみたいという方に向けてどんなサイトでも作れるよう個別徹底指導をされています。
このマ...
MTマスターkotaさんの手相【手相は語る！成功者の素顔と成功の実態！】at 2005年12月17日 03:54
この記事へのコメント
OKIさま
さっそく画像の処理の仕方を説明していただいて有難うございます。
OKIさまの説明のしかたは超初心者の私でも判りやすいので大助かりです。
また判らないことがあった時はリクエストさせて頂きますので
どうぞよろしくお願い致します。
さっそく画像の処理の仕方を説明していただいて有難うございます。
OKIさまの説明のしかたは超初心者の私でも判りやすいので大助かりです。
また判らないことがあった時はリクエストさせて頂きますので
どうぞよろしくお願い致します。
Posted by
華
at 2005年12月10日 01:57
▼華さん
メールに、コメント、ありがとうございます。
> また判らないことがあった時はリクエストさせて頂きますので
> どうぞよろしくお願い致します。
また記事ネタに使わせて頂きますので、ご遠慮なくどうぞ♪ oKi
メールに、コメント、ありがとうございます。
> また判らないことがあった時はリクエストさせて頂きますので
> どうぞよろしくお願い致します。
また記事ネタに使わせて頂きますので、ご遠慮なくどうぞ♪ oKi
Posted by
ブログ入門講座〜今日からブロガー
at 2005年12月10日 03:12
こんばんわ！ランキングを拝見させて頂き、回覧いたしました！沢山アクセスがあって、マジ羨ましいっす！！それだけ、このＨＰに魅力があるって感じがします！(*^_^*)
で、相互リンクのほうなんですけど、私のＨＰ『★初心者でも安心♪ネット通販生活-Smile Life-★』と相互リンクしていただけないでしょうか？もしよろしければ、私のＨＰまで足をお運びください。基本的に今流行りの人気商品、ブランド物を商品を中心に販売させて頂いてます。そのほかにも今ニュースで取り上げられてる、『耐震偽装問題』について、いつ地震がおこるかわりません…そんな時に大事な『防災グッズ』などを多数取り揃えています！やって頂ける場合はＵＲＬをたどり、相互リンクについてのカテゴリに書き込んで頂きますようヨロシクお願いいたします。お返事お待ちしています(*^_^*)
で、相互リンクのほうなんですけど、私のＨＰ『★初心者でも安心♪ネット通販生活-Smile Life-★』と相互リンクしていただけないでしょうか？もしよろしければ、私のＨＰまで足をお運びください。基本的に今流行りの人気商品、ブランド物を商品を中心に販売させて頂いてます。そのほかにも今ニュースで取り上げられてる、『耐震偽装問題』について、いつ地震がおこるかわりません…そんな時に大事な『防災グッズ』などを多数取り揃えています！やって頂ける場合はＵＲＬをたどり、相互リンクについてのカテゴリに書き込んで頂きますようヨロシクお願いいたします。お返事お待ちしています(*^_^*)
Posted by
orange
at 2005年12月24日 03:13
orange さん、おはようございます。
oKi です。
コメント、ありがとうございます！
> 沢山アクセスがあって、マジ羨ましいっす！！
> それだけ、このＨＰに魅力があるって感じがします！(*^_^*)
みなさんのおかげです。(^^)
> 相互リンクしていただけないでしょうか？
了解です。よろしくお願い致します。
oKi です。
コメント、ありがとうございます！
> 沢山アクセスがあって、マジ羨ましいっす！！
> それだけ、このＨＰに魅力があるって感じがします！(*^_^*)
みなさんのおかげです。(^^)
> 相互リンクしていただけないでしょうか？
了解です。よろしくお願い致します。
Posted by
ブログ入門講座〜今日からブロガー
at 2005年12月25日 08:15
こんにちは！はじめして。
ヤプログを利用しているSSSSSSです。
ブログ記事の周りに画像を載せて飾りたいのですが…。
ヤリ方がわからず…。また、画像の大きさも正直どのようにしたら良いのかわかりません(^^;
どなたか、教えて頂けませんか？お願いします。
ヤプログを利用しているSSSSSSです。
ブログ記事の周りに画像を載せて飾りたいのですが…。
ヤリ方がわからず…。また、画像の大きさも正直どのようにしたら良いのかわかりません(^^;
どなたか、教えて頂けませんか？お願いします。
Posted by SSSSSS
at 2006年01月03日 17:37
SSSSSS さん、こんばんは。oKi です。
コメント、ありがとうございます。
> ヤプログを利用しているSSSSSSです。
> ブログ記事の周りに画像を載せて飾りたいのですが…。
ヤプログは、カスタマイズ度が低いため運営していませんが、
{左:IMG_0000.JPG000.jpg}
ここに文章を入力する。
と、写真が左側にきて、文章が右側に表示されるようです。
サイズは、アップロードする前に調整する必要があるようです。
頑張ってみて下さい♪
コメント、ありがとうございます。
> ヤプログを利用しているSSSSSSです。
> ブログ記事の周りに画像を載せて飾りたいのですが…。
ヤプログは、カスタマイズ度が低いため運営していませんが、
{左:IMG_0000.JPG000.jpg}
ここに文章を入力する。
と、写真が左側にきて、文章が右側に表示されるようです。
サイズは、アップロードする前に調整する必要があるようです。
頑張ってみて下さい♪
Posted by
ブログ入門講座〜今日からブロガー
at 2006年01月03日 21:01
