twitter: Web画面を改造中
TwitterのWeb画面を改造中。まだ完成形ではないんだけど、現在の表示イメージを載せておくよ。
このWeb画面は、Google ChromeにPBTweet+と言う拡張を入れて機能アップ、さらにChrome Stylistで見た目を自分好みに改造して実現しています。
見た目の変更はFirebugが無いと苦労するかと思ったけど、Chrome標準の「要素を検証」で簡単に該当エレメントを取得できるのよね。これなら思う存分にいじれるわ。
あとはメンション入力時のアドレス補完機能を実装したいなー。Chrome拡張で良いのが無いか探してみよう。
以下、自分用のメモ書きとして、Stylistのルールを載せておきます。
textarea#status { /* ツイート入力欄 */
height:4em; /* default:2.5em; */
width:95%; /* default:515px */
}
#container { /* content + side_base */
width:95%; /* default:763px; */
}
#currently { /* 最新のツイート */
display:none; /* default:(not set) */
}
#content { /* メインコンテンツ */
width:100%; /* default:564px; */
}
ol.statuses .thumb { /* アイコン表示領域 */
height:34px; /* default:50px; */
width:34px; /* default:50px; */
margin:0; /* default:0 10px 0 0; */
}
ol.statuses .thumb img {
height:32px; /* default:48px; */
width:32px; /* default:48px; */
}
ol.statuses .actions {
line-height:1em; /* default:1.25em; */
right:0px; /* default:10px; */
top:0px; /* default:8px; */
}
ol.statuses span.status-body {
/* 個別ツイート本文 */
margin-left:40px; /* default:56px */
min-height:40px; /* default:48px; */
width:95%!important;/* default:425px; */
max-width: 100%!important;
}
ol.statuses li.status, ol.statuses li.direct_message {
line-height:1.4; /* default:16px; */
padding:2px; /* default:10px 0 8px; */
/* default:(not set) */
border-top:1px solid #CCC;
}
ol.statuses {
font-size:15px; /* default:14px; */
}
ol.statuses > li.last-on-page,
ol.statuses > li.last-on-refresh {
/* default:1px solid #CCCCCC !important; */
border-bottom:none;
}
.meta {
display:inline; /* default:block; */
font-size:9px; /* default:11px; */
}
#side_ad_base{
display:none; /* default:(not set) */
}
#trends{
display:none; /* default:(not set) */
}
#rssfeed{
display:none; /* default:(not set) */
}
.status-body a.tweet-url.web {
font-size:11px; /* default:14px; */
}
.status-body a.tweet-url.screen-name{
position:absolute; /* default:(not set) */
left:0; /* default:(not set) */
top:34px; /* default:(not set) */
font-size:8px; /* default:15px; */
color:#999; /* default:#088253 */
max-width:34px; /* default:(not set) */
}
body#profile #container ol.statuses .latest-status .entry-content {
font-size:1em;
}
body#profile ol.statuses li.latest-status {
border-top-width:0;
line-height:1.5em;
padding:0;
}