twitter: Web画面を改造中

Chrome,twitter

twitterのWeb画面 改造後

TwitterのWeb画面を改造中。まだ完成形ではないんだけど、現在の表示イメージを載せておくよ。

このWeb画面は、Google ChromeにPBTweet+と言う拡張を入れて機能アップ、さらにChrome Stylistで見た目を自分好みに改造して実現しています。

見た目の変更はFirebugが無いと苦労するかと思ったけど、Chrome標準の「要素を検証」で簡単に該当エレメントを取得できるのよね。これなら思う存分にいじれるわ。

あとはメンション入力時のアドレス補完機能を実装したいなー。Chrome拡張で良いのが無いか探してみよう。

以下、自分用のメモ書きとして、Stylistのルールを載せておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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;
}