枠で囲ったテキストリンク(3) | ちょっとした「Webお役立ち情報」とかを主に書いてます。

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

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


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

こちら⇒つぎの記事へつなげる枠で囲ったテキストリンクのつくり方



こちら⇒ちょっとおされ~な囲み枠のついたテキストリンクVol.2

の補足です。

枠で囲ったテキストリンクを横幅を狭く表示させる方法


このブログの記事幅は600ピクセルです。

450ピクセルの方もいらっしゃると思います。

枠で囲ったテキストリンクを横幅を狭く表示させ
せてみます。






<div align="center"><span style="border-style: solid;border-color:#666666;background-color:#F2F2F2; border-width: 2px;padding: 10px 74px 5px 74px;border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;box-shadow: 5px 5px 5px #99cccc;"><a href="http://ameblo.jp/wantan-52/" target="_blank"><b><font size="4">⇒この続きは、明日の朝刊で・・</font></b></a></span></div>


上のタグコードのなかのピンク色のこの箇所
padding: 10px 74px 5px 74px
が枠の余白を指定するコードです。
左から順番に(上)、(右)、(下)、(左)に
法律で決まってます^^;

左右の余白を74pxから40pxにしてみます。(↓)




<div align="center"><span style="border-style: solid;border-color:#666666;background-color:#F2F2F2; border-width: 2px;padding: 10px 40px 5px 40px;border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;box-shadow: 5px 5px 5px #99cccc;"><a href="http://ameblo.jp/wantan-52/" target="_blank"><b><font size="4">⇒この続きは、明日の朝刊で・・</font></b></a></span></div>


上のように横幅が小さくなります。

さらに表示させる文字数を少なくすると、もっと狭くなります。(↓)



枠で囲ったテキストリンクを
幅を狭く表示させる方法をご案内しました。


なにかの参考になると、うれしいのですが。


☆ブヒ ゞ(^_-)v

ワンタンさんをフォロー

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

Ameba人気のブログ