ココログの「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に興味がない訳ではないのですが、現状ではブログでいっぱいいっぱいという感じです。
| 固定リンク
「日記・その他」カテゴリの記事
- TS-XW Racer Sparco P310 Competition Mod を購入(2017.12.31)
- SSDを増設し、Windows10を導入した(2015.12.27)
- Kobo Aura H2O を購入した(2014.12.31)
- 「ゴールドブレンド 挽き豆包み」を購入した(2013.12.07)
- 村田園の万能茶が最近のお気に入り(2013.11.27)
この記事へのコメントは終了しました。
コメント
最近Twitterを始めましたが、情報発信手段としては物足りません。反応の遅いチャットというところでしょうか・・・
投稿: pelikan_1931 | 2010年2月20日 (土) 19時28分
pelikan_1931 さん、こんにちは。
Twitterはそんな感じですか。Web黎明期はWeb上で行うチャットが流行りましたが、リアルタイム性のないチャットというのはちょっとアレですね。情報発信をしたい人には向かなそうですね。
投稿: EF Mania | 2010年2月21日 (日) 08時39分
twitterが反応の遅いチャットってのはだいぶ実情と違うと思いますよ。
使い方次第なので、反応の遅いチャットのようにも使えますけどね。
文房具ブログとtwitterの両方をやっている方は大勢いますが、twitter寄りになって
ブログの更新頻度が落ちるという傾向があるので、ブログの更新を第一に考える場合は
手を出さない方が正解だと思います。
投稿: 緑 | 2010年2月21日 (日) 21時39分
緑 さん、こんにちは。
Twitterはチャットとは異なりますか。なにぶん、経験していないだけにイメージがなかなか湧かないです。
複数同時進行はなかなか難しそうですね。私は外出先で携帯機器を使って投稿したりするのは苦手ですので、家でまとまった文章を投稿するブログの方が合ってそうです。
投稿: EF Mania | 2010年2月23日 (火) 15時03分