javascript版はテキストリンク
php版は非表示になってしまうみたいなんですが
みなさんもそうですか?
http://www.tumblr.com/buttons
IE9の開発者ツールで確認しましたが、Javascript、PHPともに同じ動作でした。
「display」プロパティに「inline-block」が指定されている状態で、「text-indent」を指定した場合の挙動の違いが原因のようです。(※IE8以降はテキストのみ移動しますが、IE7では背景画像も移動してしまいます。)
最も簡単な方法としては、Tumblrのシェアボタンの前(※同じ行)にテキストや画像など何か出力するだけで大丈夫です。(※Tumblrのボタンは一番左に表示せず、FacebookやTwitterなどのボタンの右側に表示してみてはいかがでしょう?)
その他の方法としては、「inline-block」ではなく「block」を指定して、各種ボタンを並べて表示する場合は、「float」を指定してもいいと思います。
その他には、次のように背景画像ではなく、画像として表示してもいいと思います。
<a href="http://www.tumblr.com/share/link?url=<?php echo urlencode(INSERT_URL_HERE) ?>&name=<?php echo urlencode(INSERT_NAME_HERE) ?>&description=<?php echo urlencode(INSERT_DESCRIPTION_HERE) ?>" title="Share on Tumblr"><img src="http://platform.tumblr.com/v1/share_1T.png" alt="Share on Tumblr" width="81" height="20"></a>
※画像URLと幅、高さは、使用するボタン画像に合わせて変更してください。
※Javascriptの場合も原因は同じですので、同様の方法で対処可能です。
※出力されるコードが同じですので、おそらくRuby on Railsでも同様の現象が発生すると思いますが、同じ方法で対処可能だと思います。
コメント(0件)