Tweetボタンがおっきくなっちゃった!の巻

スポンサーリンク

Twitterの  オフィシャルTweetボタン  が ここから でゲットできるのだが、サイズがちっちゃい

しかーし

おっきくするのは簡単です!

 

おっきくしたら画質が崩れるのは避けられませんが、ある程度のサイズであれば
人間の目で見る限りまぁまぁな画質のまま引き伸ばすことが出来ます。

以下は上記紹介したページで取得できるHTMLソースの一例です。

<a href="http://www.twitter.com/trippyboy_com">
<img src="http://twitter-badges.s3.amazonaws.com/twitter-a.png" alt="trippyboy_comをフォローしましょう"/></a>

これを利用すると以下のボタンが出現します! ⇒ trippyboy_comをフォローしましょう

でもでもでも~ これじゃぁサイズが足りない人は
<img src=”URL or パス” の後に width=”横幅” または height=”高さ” を指定してあげます。
横幅も高さも両方共、どうしても自身で設定されたい方は両方を設定してください。
片方しか指定しない場合は自動でもう片方が調整されます。

では、上記のソースの<img src=”URL” の後に、「width=”150″」を足してみます。

ソース:

<a href="http://www.twitter.com/trippyboy_com">
<img src="http://twitter-badges.s3.amazonaws.com/twitter-a.png" width="150" alt="trippyboy_comをフォローしましょう"/></a>

ほら、おっきくなっちゃった! ⇒ trippyboy_comをフォローしましょう

 

さて、上記でボタンはできましたがマウスを乗っけても何も表示されないので、今度は<a href=”URL or パス”の後に
「title=”@trippyboy_comをフォローしてあげる”」を足してみました。

ソース:

<a href="http://www.twitter.com/trippyboy_com" title="@trippyboy_comをフォローしてあげる">
<img src="http://twitter-badges.s3.amazonaws.com/twitter-a.png" width="150" alt="trippyboy_comをフォローしましょう"/></a>

そうすると、マウスを乗っけたときに押したらどうなるかがわかるようになりますね!⇒ trippyboy_comをフォローしましょう

これぐらいでいいでしょうかヽ(*´∀`)ノ

今回は像のサイズの変更方法、<img src~に「width=”横幅”」または「height=”高さ”」のどちらか、
または両方をくわえる事でサイズの変更が出来ること
そしてリンク<a href~に「title=”マウスオーバーしたときにぴょこっと表示されるもの”」を付けることで、
ンク先の簡単な説明を表示することをみにつけましたね(*’▽’*)♪

以上

コメント

タイトルとURLをコピーしました