こちら⇒つぎの記事へつなげる枠で囲ったテキストリンクのつくり方
と
こちら⇒ちょっとおされ～な囲み枠のついたテキストリンクVol.2
の補足です。
枠で囲ったテキストリンクを横幅を狭く表示させる方法
このブログの記事幅は６００ピクセルです。
４５０ピクセルの方もいらっしゃると思います。
枠で囲ったテキストリンクを横幅を狭く表示させ
せてみます。
<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
＞＞いいね！？