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;
}