このエントリーをはてなブックマークに追加

Twitter ウィジェットを、CSSだけでティッカー風1行表示にカスタマイズ

公式のTwitter ウィジェットを、CSSだけでティッカー風1行表示にカスタマイズする方法を紹介します。 twitter_ticker.png Twitter ウィジェット:http://twitter.com/about/resources/widgets

CSSだけで、超シンプルな1行表示にカスタマイズすることができます。
今回はプロフィールウィジェットを例に紹介します。

ウィジェット作成画面で、「一定間隔で更新」にチェック、エンドレス表示にしますか「はい」に設定することで、 指定した件数でくるくると更新表示されるようにします。
横幅は自動(auto)、高さは1行分くらいの25に設定します。

HTMLの解説

作成したウィジェットのコードをそのまま使用します。コードの改変は一切行いません。
管理しやすいように、idをtwitter_tickerとしたdivで囲みます。 <div id="twitter_ticker"> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 5, interval: 30000, width: 'auto', height: 25, theme: { shell: { background: '#ffffff', color: '#333333' }, tweets: { background: '#ffffff', color: '#333333', links: '#0000ff' } }, features: { scrollbar: false, loop: true, live: true, hashtags: false, timestamp: false, avatars: false, behavior: 'default' } }).render().setUser('lqd_jp').start(); </script> </div>

CSSの解説

非表示にしたい部分は、display: noneで指定しています。 サイズを0にしたり、しつこく指定しているのは、IEで一瞬チラ見えするのを防ぐためです。
また、デフォルトCSSが優先されないよう!importantを指定します。
そしてheightで表示エリアを1行の高さに限定します。
あとは:before擬似要素で「Twitter:」というラベルが表示されるようにしてみました。 #twitter_ticker { border: 1px dashed #CCCCCC; padding: 10px; } #twitter_ticker .twtr-hd { height: 0 !important; width: 0 !important; display: none !important; } #twitter_ticker .twtr-widget a img { height: 0 !important; width: 0 !important; display: none !important; } #twitter_ticker .twtr-bd p:before { content: "Twitter: "; } #twitter_ticker .twtr-widget .twtr-tweet-wrap { padding: 0 !important; } #twitter_ticker .twtr-timeline { height: 12px !important; margin: 0 !important; } #twitter_ticker .twtr-ft { height: 0 !important; width: 0 !important; display: none !important; } #twtr-widget-1 .twtr-bd, #twtr-widget-1 .twtr-timeline i a, #twtr-widget-1 .twtr-bd p { color: #333333 !important; font-size: 12px !important; height: 12px !important; line-height: 1 !important; overflow: hidden !important; }

実際のサンプル

一定の間隔で更新されます。
ここは横幅が狭いのでTweetが長いと途切れて表示されます。


WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter