ココログの「Twitter連携機能」の画像をCSSで改造してみた

　最近ココログでは、各記事下のフッター部分に「記事をtwitterに投稿するボタン」が設置されるようになりました。ただ、そのボタンが小さい「t」画像だけなので、とても分かりにくいです。ということで、CSSで画像を分かりやすくすることにしました。

　→twitter連携機能について （お知らせココログ）

■CSS

　CSSに詳しいというわけではありませんが、試行錯誤の結果、以下のようになりました。

.entry-footer-links-twitter a{
width: 80px;
height: 30px;
display: block;
float: left;
background: url(http://visconti.air-nifty.com/css/twitter_name2.jpg);
background-repeat: no-repeat;
}

　CSSだけではhtmlに画像や文字を付け加えられないので、背景画像を使いました。該当クラス部分に80×30pxの領域を作り、そこに背景画像を表示させました。そしてそれを「display: block」でブロック要素化して、領域全体をリンクされるようにしました。

　表示される画像はいろいろと試してみましたが、結局「Twitter」という文字を画像にしたものにしました。その方がフッター部分の統一感がありますので。難点としては、画像だけに文字とは異なり、ブラウザの設定で大きさが変わらないことです。なので、環境によっては大きすぎたり、小さすぎたりするかと思います。これは仕方がないですね。

　というわけで、Twitterボタンを分かりやすくしたわけですが、私自身はTwitterを使っていませんので、いまいち使い勝手や便利さがわかりません。(^^; Twitterに興味がない訳ではないのですが、現状ではブログでいっぱいいっぱいという感じです。