MOMIZINE

続・Operaのパネルでtwicliを使う

Opera, Twitter

Twitterクライアントtwicliの後追いカスタマイズmb-twicliをやめて、ユーザCSSだけで自分の使いやすい形を追求してみました。なーんか不具合出てきて原因が特定できなかったのとCSSでやれないことはないとわかったのが理由です。

Operaのパネルでtwicliを使うでもユーザースタイルシートの部分は触れましたが、当時に比べて悪いほうに洗練したつもりです（画像参照）。

　

Operaのサイドパネルに表示云々は上記リンクを参考にしてもらえたら幸いです。以下はuser stylesheetに記載している内容について細かく触れています。

TL上に表示される賑やかなアイコンはとてもブラウザのサイドに常駐させるにふさわしくないこと。ユーザ単体で開いたときにアイコンがでるのはいいと思いますが、それ以外のアイコンは非表示にしました。これでとりあえず文字だけが流れるTwitterの基本になります。

/*TLのアイコン*/
#tw2c img[width="32"],
#tw img[width="32"]{
display:none;
}

デフォルトの背景色のオレンジが目立ってしまい、業務中のtwicliが危ぶまれるので#fefefeと白に近い灰色に修正。

同様にReplyと自分がpostした色も淡く調整。色は自分の趣味なので、変更する場合はカラーチャート辺りを見ながら#xxxxxxの変わりにredとか記載すると色は変わります。

/*背景色*/
#tw2{background-color:#fefefe !important;}

/*Replyの背景色、自Postの背景色*/
#tw .fromme, #tw2 .fromme {background-color:#fff5ee;}
#tw .tome, #tw2 .tome {background-color:#f5fffa;}

これが肝で、通常のtwicliの場合、ユーザ名と日付で改行されず１行で表示されます。ソースコードを見ると日付はspanで右寄せにしようとしていますが、class=utilsのところはinline要素なので右側によりません。なのでdisply=blockを使ってblock要素にして名前とステータスと日付・返信ボタンでそれぞれを改行して整形します。

/*ユーザ名、ステータス、日付で改行*/
.utils,#tw2 .status,#tw .status{
display:block;
}

これに付随してbrせずに改行されるので削除。そもそもいらないような気がする。

/*改行*/
br{
display:none;
}

趣味ですが、一覧でリンクに下線があると下線まみれになるのでマウスカーソルを合わせたときだけ下線表示にして後は文字の色でリンクを判断します。twitterならリンクの色も同色でもいいぐらいかもしれません。

/*アンカー*/
#tw2 a,#tw a{
text-decoration:none;
}
#tw2 a:hover,#tw a:hover{
text-decoration:underline;
}

これまた趣味ですが返信ボタン、発言を追尾するボタンには四角くボーダーがはいっていますが、別に不要かな？

#tw2 .button,#tw .button{
border:0px !important;
}

入力は基本的にOperaのアドレスバーから投稿しますが返信などステータスのidを拾っての返信はこちらをつかっています。

通常は%で右側の余白が作られ、そこに各ボタンが配置されますが、width=hoge%とか好きではないので100%に。送信ボタンは使わずエンター、入力文章の削除ボタンも右側ぴったりにあわせてみました。ここのボタンはdisplay:noneでも自分の使い方には特に問題はありません。

/* 入力画面 */
#control #fst{
width:100% !important;
margin-right:10px !important;
}

/* 送信ボタン */
#go,#rst{
left:auto !important;
right:0 !important;
}

更新毎に新規タイムラインの受信分を下線を太くして表示されますが、なんかタイムラインの更新間隔なんて気にならないので削除。逆にスクロールさせたときに気になる。

/*下線*/
#tw div { border-bottom: none;}

ダイレクトメッセージ、送る人は大抵「@hogehoge Dしました。」って書くので後から読む、通常のTwitterでは不要なのでタブごと非表示に。ユーザタブもユーザ名クリックして名前出すほどでもないので削除。

/*ユーザタブ、ダイレクトメッセージ*/
#user,#direct{
display:none !important;;
}

まとめ

以下コピペして張り付ければtwicliのmomizineユーザCSSです。

#tw2c img[width="32"],#tw img[width="32"]{display:none;}
#tw2{background-color:#fefefe !important;}
#tw .fromme, #tw2 .fromme {background-color:#fff5ee;}
#tw .tome, #tw2 .tome {background-color:#f5fffa;}
br{display:none;}
.utils,#tw2 .status,#tw .status{display:block;}
#tw2 a,#tw a{text-decoration:none;}
#tw2 a:hover,#tw a:hover{text-decoration:underline;}
#tw2 .button,#tw .button{border:0px !important;}
#tw div { border-bottom: none;}
#control #fst{width:100% !important;margin-right:10px !important;}
#go,#rst{left:auto !important;right:0 !important;}
#user,#direct{display:none !important;}

おまけとか。

regexp.jpのタブ例です。挨拶はいらない、殺伐としたタイムラインを楽しみたい自分のためのフィルタリング

挨拶::オハヨ|おはよ|おっはよ|ただいま|おかえり|お帰り|オヤスミ|おやすみ|お休み:1

メインのタイムライン上でフィルタリングしたものに色つけたいなぁ。なんかregexp.jsかませるとid="tw-xxxxx"のところにclass="tabu番号"とか割り当ててくれないかなぁ。

ツイートする

Permalink | コメント(0) | トラックバック(3) | 18:26