FirefoxのサイドバーにTwitterを最適化するCSS
Firefoxでtwitter.comにアクセスするextensionはいろいろありますが、そもそもtwitter.comをサイドバーに表示すればよくね?というわけでUser CSS(ユーザースタイルシート)を書くよ。
→ userstyles.orgで最新版を公開してますよ!!!(Twitter in the Sidebar)

なにがうれしい???
- twitter.comで使える機能がすべて使える
- "in reply to"とか動くべき機能がふつうに機能する
- 表示できる項目がすべて表示される
- API制限にひっかからない
- Greasemonkeyがサイドバーで動くようになったので、どんどん便利に!
サイドバーにtwitter.comを表示する方法
- ここにあるリンクからtwitter.com( http://twitter.com/?sidebar )をドラッグしてブックマーク
- 上でブックマークしたtwitter.comのブックマークのプロパティを表示して"Load this bookmark in the sidebar"(日本語版だと"サイドバーで開く"だと予想)をチェック
- "Save Changes"(日本語版だと"保存"?)ボタンで保存
- 保存したtwitter.comのブックマークを開く
CSSを適用せずにとりあえずサイドバーでの表示を試したい場合
- m.twitter.comを上記手順でブックマーク
- 開く
- こうすると携帯版twitter.comがサイドバーに表示されるのでそれっぽい!
- 満足した方はここでおしまい!
サイドバーにtwitter.com を最適化するCSSを書く
Stylishを使う。
使い方
- ここにあるCSSをStylishに登録する
- 上に書いたやり方でtwitter.comをブックマークして、サイドバーにtwitter.comを表示する(0.4からhttp://twitter.com/?sidebarです。注意。)
- カーソルをサイドバー領域の以下の領域に移動すると、サイドバーとかヘッダ、フッタが表示されます
- 上端に持っていくとヘッダに表示されているリンク群
- 右端に持っていくとサイドバー
- 下端に持っていくとフッタに表示されているリンク群
- リロードしたいときは、
- サイドバーの"Home"を押すか、
- ブックマークしたtwitter.comをもう一度押してください
- リンクはサイドバーに開いたりブラウザ領域に開いたり、いろいろです。
CSS
Ver.20100127
- moreでページを継ぎ足したときの切れ目をわかりやすく。
- http対応が抜けてたので復活。
- どうでもいいけどバージョンは日付だけにした。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(https://twitter.com/?sidebar), url-prefix(http://twitter.com/?sidebar){
/* reset */
*{
margin:0 !important;
padding:0 !important;
font-family:HiraKakuPro-W3 !important;
font-size:11px !important;
line-height:1.5;
}
/* signin */
#signin_menu{
display:inline-block !important;
position:relative !important;
width:100% !important;
}
#header2 h1,
#header2 a,
#header2 img{
display:none !important;
}
/* container */
body{
margin-bottom:2.5em !important;
background:#fff !important;
}
#currently,
#header,
#content,
.wrapper,
.bar,
.info,
.columns,
#container,
#container ol,
#container ol li .status-body,
.columns,
#footer{
width:100% !important;
word-wrap:break-word !important;
}
#text,
.info #status,
#pagination{
width:99% !important;
height:3em !important;
}
.status-body{
min-height:1em !important;
}
/* entry */
li.hentry{
border-bottom:1px solid #ddd !important;
}
li.hentry:first-child{
border-top:1px solid #ddd !important;
}
/* entry:paging */
li.hentry.last-on-page{
border-width:0 0 2px 0 !important;
border-style:dotted !important;
border-color:#999 !important;
}
li.hentry.last-on-page+li{
border-width:10px 0 1px 0 !important;
border-style:solid !important;
border-color:#999;
}
li.hentry.last-on-page+li .thumb.vcard.author{
margin-top:2px !important;
}
li.hentry.last-on-page+li .status-body{
border-top:2px dotted #999;
}
li.hentry.last-on-page:last-child{
border-width:0 0 1px 0 !important;
border-style:solid !important;
border-color:#ddd !important;
}
/* images */
#content img{
display:none !important;
}
#content img#profile-image{
display:inline !important;
}
#content li span.status-body>a:first-child,
#content li span strong{
margin-left:1.6em !important;
}
#logo>img{
width:86px !important;
height:20px !important;
}
/* thumbnail hover enlarge */
#content li .thumb.vcard.author,
#content li .thumb.vcard.author img{
position:absolute;
z-index:9;
display:block !important;
width:1.4em !important;
height:1.4em !important;
}
#content li .thumb.vcard.author{
top:1px;
left:1px;
background:#fff;
}
#content li .thumb.vcard.author:hover,
#content li .thumb.vcard.author:hover img{
width:48px !important;
height:48px !important;
}
#content li .thumb.vcard.author:hover{
z-index:10;
-moz-box-shadow:0 0 5px #000;
}
#content li .thumb.vcard.author.thumb-inline,
#content li .thumb.vcard.author.thumb-inline img,
#content li .thumb.vcard.author.thumb-inline:hover,
#content li .thumb.vcard.author.thumb-inline:hover img{
display:inline-block !important;
width:1.6em !important;
height:1.6em !important;
}
/* rt icon */
#content li .big-retweet-icon{
margin-left:1.6em !important;
margin-right:0 !important;
}
#content li .big-retweet-icon+strong{
margin-left:0 !important;
}
/* background icon */
.xref.rss,
.save-search-link,
.delete-search-link{
padding-left:18px !important;
background-position:0px 0px !important;
}
/* entry */
#content span.lock-icon,
#content a.screen-name{
margin-right:.5em !important;
}
/* header */
#header{
text-align:center;
background:#fff;
z-index:100;
display:block;
position:fixed;
top:0;
opacity:0;
height:5px;
overflow:hidden;
}
#signin_menu+#header,
#header:hover{
height:auto !important;
opacity:1;
-moz-box-shadow:0 1px 2px #888;
}
#header a{
text-shadow:-1px -1px 1px #fff;
}
#header a:hover{
background:rgba(255,255,255,.9);
-moz-box-shadow:1px 1px 2px #fff;
}
/* sidebar */
#side_base{
position:fixed;
top:0;
right:0;
width:20px !important;
height:100%;
-moz-border-radius:0 !important;
overflow:hidden !important;
opacity:0;
border-style:none !important;
}
#side_base:hover,
#side_base:hover #side{
width:170px !important;
opacity:.925;
-moz-box-shadow:-1px 0 2px #888;
}
#side_base *{
font-size:11px !important;
}
#sidebar-search .submit{
padding:0.4em 0.9em;
}
ul.sidebar-menu li.loading a{
background-position:155px .2em !important;
}
#sidebar_search .submit{
padding:0 .9em !important;
background-position:-.3em -.6em !important;
}
/* sidebar top */
div.user_icon>a.url>span+span{
margin-top:1em !important;
}
/* sidebar thumbnail */
#following_list span,
#following_list a,
#following_list img{
width:24px !important;
height:24px !important;
margin:0px !important;
padding:0px !important;
}
#following_list span img:hover{
position:absolute;
-moz-box-shadow:0 0 10px #000;
}
#side,
#side_base,
#side *,
#side_base *{
line-height:1.25;
}
/* footer */
#footer{
text-align:center;
background:#fff;
z-index:100;
display:block;
position:fixed;
bottom:0;
opacity:0;
height:5px;
-moz-border-radius-bottomleft:0 !important;
-moz-border-radius-bottomright:0 !important;
}
#footer li{
display:block;
float:left;
margin:0 2px !important;
}
#footer:hover{
background:#000;
height:auto !important;
opacity:1;
-moz-box-shadow:0 -1px 2px #888;
}
/* dm */
.common-form{
margin-top:1em !important;
}
#dm_tabs>li>a>span{
padding:2em !important;
}
/* .actions */
.actions{
position:absolute;
top:1em;
left:.8em;
}
.actions a.fav-action{
position:absolute;
z-index:9;
display:block;
float:left;
opacity:.7;
-moz-border-radius:10px;
}
.actions a.fav-action{
top:-1.3em;
}
.actions a.fav{
opacity:1;
}
.actions-hover>li>span{
margin-right:10px !important;
padding:0 .5em !important;
}
.actions-hover>li>span:hover,
.actions a.fav-action:hover{
background:#ff3;
opacity:1;
-moz-box-shadow:0 0 10px #cc6;
-moz-border-radius:10px;
}
/* ad */
.promotion{
padding:.25em !important;
margin:.75em .5em !important;
}
.promotion,
.promotion *{
line-height:1.1 !important;
}
/* mention */
li>span>span>a.username[href$="/yourname"]{
text-shadow:0 0 1px #fff , 0 0 10px #f00 !important;
}
/* banner */
#introduce_retweet_banner{
margin-right:4px !important;
overflow:hidden !important;
}
#introduce_retweet_banner *{
float:left !important;
display:block !important;
}
/* rt */
.inline-form{
left:0 !important;
}
.inline-form .cancel{
margin:0 10px !important;
}
.tipsy{
left:0 !important;
}
/* better with pbtweet */
div.conv_chain span.entry-baloon,
div.conv_chain span.entry-baloon>span{
width:100% !important;
max-width:100% !important;
}
.pb-extra{
margin-top:-1em !important;
}
.entry-baloon{
display:inline !important;
}
.entry-baloon *{
line-height:1.25 !important;
}
.conv_chain{
position:relative;
margin:0 !important;
}
.conv_chain .actions{
position:absolute !important;
top:1.5em !important;
left:.8em;
opacity:.5;
}
.conv_chain .actions:hover{
opacity:1;
}
a.pb-snip-url:hover{
border:none !important;
}
#content .hentry img.twitpic_thumb{
display:block !important;
display:inline !important;
left:auto !important;
position:absolute !important;
right:.5em !important;
opacity:.6;
}
#content .hentry img.twitpic_thumb:hover{
opacity:1;
}
}
Ver.0.7(20100104)
- ヘッダのTwitterアイコンが歪んでましたごめんなさい。修正しました。
- ReplyとかRetweetのボタン、ホバー時に目立つようにしてみた。設定によっては、色が合わないかもしれない。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(https://twitter.com/?sidebar) {
/* reset */
*{
margin:0 !important;
padding:0 !important;
font-family:HiraKakuPro-W3 !important;
font-size:11px !important;
line-height:1.5;
}
/* signin */
#signin_menu{
display:inline-block !important;
position:relative !important;
width:100% !important;
}
#header2 h1,
#header2 a,
#header2 img{
display:none !important;
}
/* container */
body{
margin-bottom:2.5em !important;
background:#fff !important;
}
#currently,
#header,
#content,
.wrapper,
.bar,
.info,
.columns,
#container,
#container ol,
#container ol li .status-body,
.columns,
#footer{
width:100% !important;
}
#text,
.info #status,
#pagination{
width:99% !important;
height:3em !important;
}
.status-body{
min-height:1em !important;
}
li.hentry{
border-bottom:1px solid #ddd !important;
}
li.hentry:first-child{
border-top:1px solid #ddd !important;
}
/* images */
#content img{
display:none !important;
}
#content img#profile-image{
display:inline !important;
}
#content li span.status-body>a:first-child,
#content li span strong{
margin-left:1.6em !important;
}
#logo>img{
width:86px !important;
height:20px !important;
}
/* thumbnail hover enlarge */
#content li .thumb.vcard.author,
#content li .thumb.vcard.author img{
position:absolute;
z-index:9;
display:block !important;
width:1.4em !important;
height:1.4em !important;
}
#content li .thumb.vcard.author{
top:1px;
left:1px;
background:#fff;
}
#content li .thumb.vcard.author:hover,
#content li .thumb.vcard.author:hover img{
width:48px !important;
height:48px !important;
}
#content li .thumb.vcard.author:hover{
z-index:10;
-moz-box-shadow:0 0 5px #000;
}
#content li .thumb.vcard.author.thumb-inline,
#content li .thumb.vcard.author.thumb-inline img,
#content li .thumb.vcard.author.thumb-inline:hover,
#content li .thumb.vcard.author.thumb-inline:hover img{
display:inline-block !important;
width:1.6em !important;
height:1.6em !important;
}
/* rt icon */
#content li .big-retweet-icon{
margin-left:1.6em !important;
margin-right:0 !important;
}
#content li .big-retweet-icon+strong{
margin-left:0 !important;
}
/* background icon */
.xref.rss,
.save-search-link,
.delete-search-link{
padding-left:18px !important;
background-position:0px 0px !important;
}
/* entry */
#content span.lock-icon,
#content a.screen-name{
margin-right:.5em !important;
}
/* header */
#header{
text-align:center;
background:#fff;
z-index:100;
display:block;
position:fixed;
top:0;
opacity:0;
height:5px;
overflow:hidden;
}
#signin_menu+#header,
#header:hover{
height:auto !important;
opacity:1;
-moz-box-shadow:0 1px 2px #888;
}
#header a{
text-shadow:-1px -1px 1px #fff;
}
#header a:hover{
background:rgba(255,255,255,.9);
-moz-box-shadow:1px 1px 2px #fff;
}
/* sidebar */
#side_base{
position:fixed;
top:0;
right:0;
width:20px !important;
height:100%;
-moz-border-radius:0 !important;
overflow:hidden !important;
opacity:0;
border-style:none !important;
}
#side_base:hover,
#side_base:hover #side{
width:170px !important;
opacity:.925;
-moz-box-shadow:-1px 0 2px #888;
}
#side_base *{
font-size:11px !important;
}
#sidebar-search .submit{
padding:0.4em 0.9em;
}
ul.sidebar-menu li.loading a{
background-position:155px .2em !important;
}
#sidebar_search .submit{
padding:0 .9em !important;
background-position:-.3em -.6em !important;
}
/* sidebar top */
div.user_icon>a.url>span+span{
margin-top:1em !important;
}
/* sidebar thumbnail */
#following_list span,
#following_list a,
#following_list img{
width:24px !important;
height:24px !important;
margin:0px !important;
padding:0px !important;
}
#following_list span img:hover{
position:absolute;
-moz-box-shadow:0 0 10px #000;
}
#side,
#side_base,
#side *,
#side_base *{
line-height:1.25;
}
/* footer */
#footer{
text-align:center;
background:#fff;
z-index:100;
display:block;
position:fixed;
bottom:0;
opacity:0;
height:5px;
-moz-border-radius-bottomleft:0 !important;
-moz-border-radius-bottomright:0 !important;
}
#footer li{
display:block;
float:left;
margin:0 2px !important;
}
#footer:hover{
background:#000;
height:auto !important;
opacity:1;
-moz-box-shadow:0 -1px 2px #888;
}
/* dm */
.common-form{
margin-top:1em !important;
}
#dm_tabs>li>a>span{
padding:2em !important;
}
/* .actions */
.actions{
position:absolute;
top:1em;
left:.8em;
}
.actions a.fav-action{
position:absolute;
z-index:9;
display:block;
float:left;
opacity:.7;
-moz-border-radius:10px;
}
.actions a.fav-action{
top:-1.3em;
}
.actions a.fav{
opacity:1;
}
.actions-hover>li>span{
margin-right:10px !important;
padding:0 .5em !important;
}
.actions-hover>li>span:hover,
.actions a.fav-action:hover{
background:#ff3;
opacity:1;
-moz-box-shadow:0 0 10px #cc6;
-moz-border-radius:10px;
}
/* ad */
.promotion{
padding:.25em !important;
margin:.75em .5em !important;
}
.promotion,
.promotion *{
line-height:1.1 !important;
}
/* mention */
li>span>span>a.username[href$="/yourname"]{
text-shadow:0 0 1px #fff , 0 0 10px #f00 !important;
}
/* banner */
#introduce_retweet_banner{
margin-right:4px !important;
overflow:hidden !important;
}
#introduce_retweet_banner *{
float:left !important;
display:block !important;
}
/* rt */
.inline-form{
left:0 !important;
}
.inline-form .cancel{
margin:0 10px !important;
}
.tipsy{
left:0 !important;
}
/* better with pbtweet */
div.conv_chain span.entry-baloon,
div.conv_chain span.entry-baloon>span{
width:100% !important;
max-width:100% !important;
}
.pb-extra{
margin-top:-1em !important;
}
.entry-baloon{
display:inline !important;
}
.entry-baloon *{
line-height:1.25 !important;
}
.conv_chain{
position:relative;
margin:0 !important;
}
.conv_chain .actions{
position:absolute !important;
top:1.5em !important;
left:.8em;
opacity:.5;
}
.conv_chain .actions:hover{
opacity:1;
}
a.pb-snip-url:hover{
border:none !important;
}
#content .hentry img.twitpic_thumb{
display:block !important;
display:inline !important;
left:auto !important;
position:absolute !important;
right:.5em !important;
opacity:.6;
}
#content .hentry img.twitpic_thumb:hover{
opacity:1;
}
}
Ver.0.6(20091231)
- RT関連のバルーン(?)がはみ出さないようにした。
- ホバー時のアイコン最大化がされていない箇所があったので修正。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(https://twitter.com/?sidebar) {
/* reset */
*{
margin:0 !important;
padding:0 !important;
font-family:HiraKakuPro-W3 !important;
font-size:11px !important;
line-height:1.5;
}
/* signin */
#signin_menu{
display:inline-block !important;
position:relative !important;
width:100% !important;
}
#header2 h1,
#header2 a,
#header2 img{
display:none !important;
}
/* container */
body{
margin-bottom:2.5em !important;
background:#fff !important;
}
#currently,
#header,
#content,
.wrapper,
.bar,
.info,
.columns,
#container,
#container ol,
#container ol li .status-body,
.columns,
#footer{
width:100% !important;
}
#text,
.info #status,
#pagination{
width:99% !important;
height:3em !important;
}
.status-body{
min-height:1em !important;
}
#container ol li *{
font-family:HiraKakuPro-W3 !important;
}
#container ol li{
border-bottom:1px solid #ddd !important;
}
#container ol li:first-child{
border-top:1px solid #ddd !important;
}
/* images */
#content img{
display:none !important;
}
#content img#profile-image{
display:inline !important;
}
#content li span.status-body>a:first-child,
#content li span strong{
margin-left:1.6em !important;
}
#logo>img{/* dev */
width:100px !important;
height:20px !important;
}
/* thumbnail hover enlarge */
#content li .thumb.vcard.author,
#content li .thumb.vcard.author img{
position:absolute;
z-index:9;
display:block !important;
width:1.4em !important;
height:1.4em !important;
}
#content li .thumb.vcard.author{
top:1px;
left:1px;
background:#fff;
}
#content li .thumb.vcard.author:hover,
#content li .thumb.vcard.author:hover img{
width:48px !important;
height:48px !important;
}
#content li .thumb.vcard.author:hover{
z-index:10;
-moz-box-shadow:0 0 5px #000;
}
#content li .thumb.vcard.author.thumb-inline,
#content li .thumb.vcard.author.thumb-inline img,
#content li .thumb.vcard.author.thumb-inline:hover,
#content li .thumb.vcard.author.thumb-inline:hover img{
display:inline-block !important;
width:1.6em !important;
height:1.6em !important;
}
/* rt icon */
#content li .big-retweet-icon{
margin-left:1.6em !important;
margin-right:0 !important;
}
#content li .big-retweet-icon+strong{
margin-left:0 !important;
}
/* background icon */
.xref.rss,
.save-search-link,
.delete-search-link{
padding-left:18px !important;
background-position:0px 0px !important;
}
/* entry */
#content span.lock-icon,
#content a.screen-name{
margin-right:.5em !important;
}
/* header */
#header{
text-align:center;
background:#fff;
z-index:100;
display:block;
position:fixed;
top:0;
opacity:0;
height:5px;
overflow:hidden;
}
#signin_menu+#header,
#header:hover{
height:auto !important;
opacity:1;
-moz-box-shadow:0 1px 2px #888;
}
#header a{
text-shadow:-1px -1px 1px #fff;
}
#header a:hover{
background:rgba(255,255,255,.9);
-moz-box-shadow:1px 1px 2px #fff;
}
/* sidebar */
#side_base{
position:fixed;
top:0;
right:0;
width:20px !important;
height:100%;
-moz-border-radius:0 !important;
overflow:hidden !important;
opacity:0;
border-style:none !important;
}
#side_base:hover,
#side_base:hover #side{
width:170px !important;
opacity:.925;
-moz-box-shadow:-1px 0 2px #888;
}
#side_base *{
font-size:11px !important;
}
#sidebar-search .submit{
padding:0.4em 0.9em;
}
ul.sidebar-menu li.loading a{
background-position:155px .2em !important;
}
#sidebar_search .submit{
padding:0 .9em !important;
background-position:-.3em -.6em !important;
}
/* sidebar top */
div.user_icon>a.url>span+span{
margin-top:1em !important;
}
/* sidebar thumbnail */
#following_list span,
#following_list a,
#following_list img{
width:24px !important;
height:24px !important;
margin:0px !important;
padding:0px !important;
}
#following_list span img:hover{
position:absolute;
-moz-box-shadow:0 0 10px #000;
}
#side,
#side_base,
#side *,
#side_base *{
line-height:1.25;
}
/* footer */
#footer{
text-align:center;
background:#fff;
z-index:100;
display:block;
position:fixed;
bottom:0;
opacity:0;
height:5px;
-moz-border-radius-bottomleft:0 !important;
-moz-border-radius-bottomright:0 !important;
}
#footer li{
display:block;
float:left;
margin:0 2px !important;
}
#footer:hover{
background:#000;
height:auto !important;
opacity:1;
-moz-box-shadow:0 -1px 2px #888;
}
/* dm */
.common-form{
margin-top:1em !important;
}
#dm_tabs>li>a>span{
padding:2em !important;
}
/* .actions */
.actions{
position:absolute;
top:1em;
left:.8em;
}
.actions a.fav-action,
.actions span.reply{
position:absolute;
z-index:9;
display:block;
float:left;
opacity:.7;
-moz-border-radius:10px;
}
.actions a.fav-action{
top:-1.3em;
}
.actions a.fav{
opacity:1;
}
.actions span.reply{
}
.actions a.fav-action:hover,
.actions span.reply:hover{
background:#ff3;
opacity:1;
-moz-box-shadow:0 0 10px #cc6;
}
/* ad */
.promotion{
padding:.25em !important;
margin:.75em .5em !important;
}
.promotion,
.promotion *{
line-height:1.1 !important;
}
/* mention */
li>span>span>a.username[href$="/yourname"]{
text-shadow:0 0 1px #fff , 0 0 10px #f00 !important;
}
/* banner */
#introduce_retweet_banner{
margin-right:4px !important;
overflow:hidden !important;
}
#introduce_retweet_banner *{
float:left !important;
display:block !important;
}
/* rt */
.inline-form{
left:0 !important;
}
.inline-form .cancel{
margin:0 10px !important;
}
.tipsy{
left:0 !important;
}
/* better with pbtweet */
div.conv_chain span.entry-baloon,
div.conv_chain span.entry-baloon>span{
width:100% !important;
max-width:100% !important;
}
.pb-extra{
margin-top:-1em !important;
}
.entry-baloon{
display:inline !important;
}
.entry-baloon *{
line-height:1.25 !important;
}
.conv_chain{
position:relative;
margin:0 !important;
}
.conv_chain .actions{
position:absolute !important;
top:1.5em !important;
left:.8em;
opacity:.5;
}
.conv_chain .actions:hover{
opacity:1;
}
a.pb-snip-url:hover{
border:none !important;
}
#content .hentry img.twitpic_thumb{
display:block !important;
display:inline !important;
left:auto !important;
position:absolute !important;
right:.5em !important;
opacity:.6;
}
#content .hentry img.twitpic_thumb:hover{
opacity:1;
}
}
コメントなどあればどうぞ!
- 2010-01-25 (月) 17:14:42 はいん : FF3.6からTwitkitが使えないので、利用させていただきました。便利ですね! 幅を220pxに改造してみましたが、Latestだけはわからにで難儀しております……


Keyword(s):[twitter] [firefox] [css] [Stylish]
References:[TwitterSidebarCSS0.1] [TwitterSidebarCSS0.2] [TwitterSidebarCSS0.3] [TwitterSidebarCSS0.4] [TwitterSidebarCSS0.5(20091126)] [TwitterSidebarCSS0.5dev(20091118)] [TwitterSidebarCSS0.5dev(20091018)] [TwitterSidebarCSS0.5dev(20091025)] [TwitterSidebarCSS0.0]