imgタグがない画像に文字を回り込ませる簡単な方法 | サラリーマンの副業奮闘記

imgタグがない画像に文字を回り込ませる簡単な方法 | サラリーマンの副業奮闘記 記事一覧

imgタグがない画像に文字を回り込ませる簡単な方法

 まいど吉田屋です。


やっぱり、稼いでいる方の行動は早いですね〜


昨日ご紹介したJITAの身分証明、
すでに何人もの方から、「登録しました」との連絡をいただきました。



アフィリエイターのブログには、
全てWEB-IDの証明マークが貼られる時代が来るかもしれません。(笑


が、この証明マーク、
普通に貼り付けるだけだと、
実は、このように文字が回り込んでくれません。


WEB-ID証明マーク


吉田屋、ウラ技使ってます♪


 

WEB-IDの証明マークとは、
JITAがその身分を保証している印です。


JITAとは、内閣府が認証したNPO法人。


つまり、吉田屋の身分を、
公平な第三者が保証してくれているわけです。


このWEB-IDの証明マークは、
JITAから発行される次のようなタグを使います。



<script type="text/javascript">
<!--
var web_id='○○○';
-->
</script>
<script type="text/javascript"
  src="https://○○○">
</script>



このタグの後に、単純にテキストをつなげただけでは、
ちゃんと画像に回り込んでくれません。


画像の横に表示されるテキストは、
たった一行だけです。


一行だけ回り込み


ここで、HTMLタグを少しかじっている人なら、
「align属性を使えば、いいんじゃね?」
となるでしょう。


確かに、画像を表示するimgタグの中でalign="top"とすれば、
テキストが上端揃えになって、複数行が回り込んでくれるはずです。


が、しかし、
上のJITAから発行されるタグを、
もう一度、ご覧下さい。


これは、scriptタグで外部ファイルから画像を表示しています。
つまり、imgタグがないんです


当然、imgタグがないので、align属性が使えません。


試しに、



<script type="text/javascript"
  src="https://○○○" align="top">
</script>



としても、テキストは上端揃えにはなってくれません。


src属性が参照している外部ファイルも自分のものではないため、
中身をいじることができません。


ひょっとすると、こんなときでも、
HTMLタグだけで複数行を回り込ませる方法が
あるのかもしれません。


が、私はその方法を知りません。


というより、もっと簡単な方法を知ってます。


それは、スタイルシート(CSS)を使います。


まず、次のタグをCSSに書き込みます。



*.floatleft {
     float: left;
     margin-right: 14px;
}

*.floatright {
     float: right;
     margin-left: 14px;
}

*.floatend {
     clear: both;
}



画像を左に寄せて、テキストを右側に回り込ませるのが、「floatleft」。
反対に、画像を右に寄せて、テキストを左側に回り込ませるのが、「floatright」です。


marginで、画像とテキストの間に14pxの隙間を空けてます。
14を小さくすれば、隙間を狭めることができます。


ただし、このmarginを取ってしまうと、
画像とテキストがくっついてしまい、カッコ悪いですね。


テキストが画像に密着


最後の「floatend」は、回り込みを終わらせるタグです。


さて、CSSにこのように書き込んでから、
HTMLを書き直します。


やることは2つ。


一つ目は、テキストを回り込ませる画像を表示するタグを、
<div class="floatleft">〜</div>
で挟みます。


画像を左に寄せたいときは、
<div class="floatright>〜</div>
ではさみます。


二つ目は、タグの最後に、
<br class="floatend">
を追加します。


ここ、大事です。


これを忘れると、テキストの回りこみが残り、
サイト全体のレイアウトが崩れてしまうので、
必ず追加してください。


吉田屋の認証マークを表示する実際のタグは、
こうなってます。



<div class="floatright">
<script type="text/javascript">
<!--
var web_id='○○○';
-->
</script>
<script type="text/javascript"
  src="https://○○○">
</script>
</div>
吉田屋は、内閣府が認証したNPO法人JITAによって身分証明されています。安心してご購入ください。
<br class="floatend">



いちいち、HTMLタグに
「align」や「hspace」を使うより、簡単でしょ?


CSSに一旦、このタグを書き込んでしまえば、
画像にテキストを回り込ませたいときに、いつでも使えます。


参考にしてみてください。

comments(0)trackbacks(0)|2012.09.28 Friday | category:お得情報
このブログで人気のある記事を読む

ブログパーツ
このブログで人気のある記事を読む

コメント








   
トラックバック
この記事のトラックバックURL:

月間アーカイブ



(最近の記事一覧)
Copyright © 2018  imgタグがない画像に文字を回り込ませる簡単な方法 | サラリーマンの副業奮闘記 All Rights Reserved.
当サイトのテキストや画像等すべての転載転用・商用販売を固く禁じます
Designed by SEOテンプレートKAETEN X