囲み枠つきテキストリンクに画像を添付する方法 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
おはようございます。

下のようなリンクの作成方法を、ご紹介します。



ふつうバナー(画像リンク)には、
テキストがついていません。
それにテキストをつけて、なおかつ枠線で
囲む方法です。


バナーにテキストをつけて枠線で囲むには・・


下のタグコードのなかの、それぞれ、あてはまる
箇所に、お好みの画像の画像URLリンク先の
URL
表示させたいテキスト枠線の色(カラーコード)
差し替えて記入して下さい。

<div align="center"><p style="width:150px;border:1px #009900 solid;padding:0px 20px 10px 10px;text-align:center;">
<a href="移動先のURL"title="オンマウス時のテキスト" target="_blank"><IMG SRC="画像URL" width="150" alt="画像の名前、説明"
<font size="4"><font color="#0000ff"><b>⇒続きはこちら</b></font></font></a>
</p></div>


※1)挿入する画像サイズの大きいもの
でも自動的に縮小されて表示されます。
※2)表示するテキスト数が多すぎると
二段になって、崩れたようになってしまいます。
その場合は字数を減らしてください。


なにかの参考になれば、うれしいのですが・・


☆ブィブィ ゞ(^_^)v



ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ