FrontPage  Index  Search  Changes  RSS  Login

FirefoxのサイドバーにTwitterを最適化するCSS

Firefoxでtwitter.comにアクセスするextensionはいろいろありますが、そもそもtwitter.comをサイドバーに表示すればよくね?というわけでUser CSS(ユーザースタイルシート)を書くよ。

userstyles.orgで最新版を公開してますよ!!!(Twitter in the Sidebar)

1e5b3cb0e9a04fd431bb90362ffb7fa8.png

なにがうれしい???

  • twitter.comで使える機能がすべて使える
    • "in reply to"とか動くべき機能がふつうに機能する
    • 表示できる項目がすべて表示される
  • API制限にひっかからない
  • Greasemonkeyがサイドバーで動くようになったので、どんどん便利に!

サイドバーにtwitter.comを表示する方法

  1. ここにあるリンクからtwitter.com( http://twitter.com/?sidebar )をドラッグしてブックマーク
  2. 上でブックマークしたtwitter.comのブックマークのプロパティを表示して"Load this bookmark in the sidebar"(日本語版だと"サイドバーで開く"だと予想)をチェック
  3. "Save Changes"(日本語版だと"保存"?)ボタンで保存
  4. 保存したtwitter.comのブックマークを開く

CSSを適用せずにとりあえずサイドバーでの表示を試したい場合

  1. m.twitter.comを上記手順でブックマーク
  2. 開く
  3. こうすると携帯版twitter.comがサイドバーに表示されるのでそれっぽい!
  4. 満足した方はここでおしまい!

サイドバーにtwitter.com を最適化するCSSを書く

Stylishを使う。

使い方

  1. ここにあるCSSをStylishに登録する
  2. 上に書いたやり方でtwitter.comをブックマークして、サイドバーにtwitter.comを表示する(0.4からhttp://twitter.com/?sidebarです。注意。)
  3. カーソルをサイドバー領域の以下の領域に移動すると、サイドバーとかヘッダ、フッタが表示されます
    • 上端に持っていくとヘッダに表示されているリンク群
    • 右端に持っていくとサイドバー
    • 下端に持っていくとフッタに表示されているリンク群
  4. リロードしたいときは、
    • サイドバーの"Home"を押すか、
    • ブックマークしたtwitter.comをもう一度押してください
  5. リンクはサイドバーに開いたりブラウザ領域に開いたり、いろいろです。

CSS

Ver.20100127

  • moreでページを継ぎ足したときの切れ目をわかりやすく。

c7087aa70a6eadc04185630854f8d487.png

  • 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だけはわからにで難儀しております……
Name: Comment: