他人に twicli を勧めようと思った時に、今まで使ってきた公式Twitterアプリと見た目がガラリと変わるのは、とっつきにくいだろうなぁ…と思って、できるだけ公式のデザインに近づけるべく、CSSを作った。
これを作るに当たって、twicli製作者の @NeoCat さんに、htmlの要素にclassをいくつか追加していただいた。本当にありがとうございました。
目次
スタイルシートの適用方法
「＋」タブ ＞ ▼設計 > ユーザースタイルシート
の欄に貼り付けてください。
※間違っても「プラグイン」や「抽出条件」の欄に貼り付けないように（一度やってしまった経験がある…ｗ）。
動作環境はUbuntuのvivaldiやFirefox、スマホはandroidのvivaldiやFirefoxで確認してます。OSやブラウザ、使用フォント等によって表示が崩れる恐れがあるので、その時は適宜スタイルシートを調整してください。
※追記：表示色違いも作りました。
ユーザースタイルシート
以下をコピペするか、コピペしにくい時は、twicli_stylesheet_001.txt を一度ダウンロードして、ファイルを開いてコピペしてください。
/*ツイート本文（ステータス）のフォントサイズ・色など*/
#tw .status,#tw2 .status,#re .status{
font-size: 1rem; /*フォントサイズ*/
color:black; /*フォント色*/
background-color:white;
margin:7px 10px 5px 60px;
display:block;
text-align:justify;
}
/*行間*/
#tw,#tw2,#re,#reps .status{line-height:1.3125;}
/* 引用 */
.quoted {
border: solid 1px rgb(204, 214, 221);
margin: 13px 0 0 0;
background-color:rgba(0,0,0,0);
border-radius: 10px;
}
/*引用リツイート内の文章*/
#tw .quoted .status,#tw2 .quoted .status,#re .quoted .status,#reps .quoted .status{
margin:7px 10px 5px 5px;
display:block;
padding-left:0;
text-align:justify;
}
/*選択されたツイート中の引用*/
#tw .selected .quoted,#tw2 .selected .quoted,#re .selected .quoted {
border: solid 1px rgb(179, 179, 179);
margin: 13px 0 0 0;
background-color:#efefef;
}
/* 「リツイート直後のツイートを探す」「ツイート前後のツイートを探す」 */
#rep {
font-size: 1rem;
display: none;
background-color: white;
position: absolute;
width: 85%;
left: 7%;
border: 2px solid #649cff;
border-radius: 10px;
z-index: 2;
padding: 2px;
overflow: hidden;
color:black;
}
#rep hr{border-bottom:none; margin: 5px 0;}
/*「リツイート直後のツイートを探す」「ツイート前後のツイートを探す」内の本文*/
#reps .status{
margin:7px 10px 5px 60px;
display:block;
padding-left:0;
text-align:justify;
}
/*ツイート内のリンク（URL）*/
.status a.link::before{
content: "\A" ; /*URLの前で改行*/
}
.status a.link {
text-decoration: none;
border: none;
background-color: transparent;
color:rgb(27, 149, 224); /*フォント色*/
font-size: 9pt; /*フォントサイズ*/
}
/*リンク文字*/
a{
font-size:1rem;
color:rgb(94, 98, 100);
text-decoration: none;
}
/*ハッシュタグ*/
.hashtag {color:rgb(27, 149, 224);}
/*投稿欄*/
#fst {
position: absolute;
left: 1px;
top: 1px;
width: 85%;
font-size: 1rem;
overflow: hidden;
border-radius: 4px;
}
/*投稿ボタンの変更*/
#go img{display:none;}
#go {
position: absolute;
left: 86%;
top: 4px; /*領域の上部からの位置*/
height: 25px; /*領域の高さ*/
width: 13%; /*領域の幅*/
color: black;
float: left;
overflow: hidden;
text-align: center;
}
#go:before {
content: "ツイート"; /*投稿ボタン*/
display: block;
width:auto;
/*投稿ボタンの上下の広さを調整するのはpadding-topとpadding-bottom*/
padding-top: 6px; /*投稿ボタン内の上部*/
padding-bottom:6px; /*投稿ボタン内の下部*/
font-size:9px; /*フォントの大きさ*/
font-weight: bold;
font-family: sans-serif;
color:white;
background-color:rgb(29,161,242);
border-radius: 15px;
}
#go:hover {
color: #666;
text-shadow: 1px 1px 0px #fff;
}
/*投稿欄入力リセットボタンの非表示*/
#rst {
display: none;
}
/* ツイート内のアイコン（プロフィール画像） */
.uicon {
float: left;
width: 48px;
height: 48px;
margin:4px 7px 0 4px;
border-radius: 50%;
}
/*プロフィール情報におけるアイコン（プロフィール画像）*/
.uicona {border-radius: 50%;}
.uicon2 {border-radius: 50%;}
/*アカウント名とユーザー名を入れ替える*/
a.user{
display: inline-flex;
flex-wrap: nowrap;
max-width:73%; /*長いアカウント・ユーザー名が適切な位置よりもズレていたら、ここを小さい値にする。*/
overflow:hidden;
}
/*「リツイート直後のツイートを探す」「ツイート前後のツイートを探す」内のアカウント・ユーザー名*/
#rep a.user{
display: inline-flex;
flex-wrap: nowrap;
max-width:70%; /*長いアカウント・ユーザー名が適切な位置よりもズレていたら、ここを小さい値にする。*/
overflow:hidden;
}
/*アカウント名*/
.uid,.quoted.uid,#reps .uid{
margin-top:8px;
order:2;
}
/*ユーザー名*/
.uname{
margin-top:8px;
margin-right:3px;
color: #2d353c;
order:1;
font-weight: bold;
flex-shrink:0;
}
.uname_paren{display:none;}
.uname_paren2{display:none;}
/* リツイート数*/
.rtinfo{
display: inline-block;
color: #999;
font-size: 9pt;
line-height: 1;
float:right;
}
/* いいね（fav）数 */
.favinfo {
display: inline-block;
color: #999;
font-size: 9pt;
line-height: 1;
float:right;
}
/*投稿時間*/
.utils{
display:block;
text-align:right;
clear:both;
}
.prop{ font-size: 9pt;}
/*fav（いいねアイコンの位置）*/
.fav {
float: right;
cursor: pointer;
margin:13px 10px 0 8px;
}
/*fav（いいね）アイコンを星からハートに替える*/
.fav > img { opacity: 0; z-index: 9; position: absolute; }
.fav > span:before {
background-image: url("images/icon_like_empty.png"); background-size: contain;
width: 12px;
height: 12px;
display: inline-block;
content: ".";
color: transparent;
line-height: 0; }
.fav > img[src*="loading"] + span:before { background-image: url("images/icon_like_loading.png"); }
.fav > img[src*="full"] + span:before { background-image: url("images/icon_like_full.png"); }
/*画像*/
/*マウスオーバーで動かないようにするには、thumbnail-imageとthumbnail-image:hoverのmax-width・min-widthの値を同じにする。*/
.thumbnail-image {
border: none;
max-width:130px!important;
min-width:130px;
border-radius: 6px;
display: block;
float: left;
}
.thumbnail-image:hover {
border: none;
max-width:130px;
border-radius: 6px;
display: block;
float: left;
}
.thumbnail-link {
border: none;
display: block;
float: left;
margin-left:60px;
}
/*投稿欄・メニュー*/
#control {
border-bottom: 1px solid white;
background-color: white;
}
/*上部メニュー全体*/
#menu {
background-color:white;
}
/*上部メニューのタブ*/
#menu2 a{
font-size: 13pt;
background-color:white;
color:#575757;
border:solid 1px grey;
box-shadow: 0 0 5px grey inset;
}
/*新着タブの色*/
#menu a.new {
background-color: rgb(220, 241, 254);
}
/*選択したタブ*/
#menu a.sel {
height: 20px;
margin-bottom: 0;
background-color: #67c5ff;
color: #002;
border-bottom-color: #fff;
}
/*@タブで「返信先：〜さん」*/
#re.tw.tw-parent a.mention::before {
content: "返信先:";
margin-right: 3px;
font-size: 0.9rem;
}
#re.tw.tw-parent a.mention::after {
content: "さん\A";
}
/*ユーザー情報*/
#user_info_b {
margin: 0px;
text-align: center;
position: relative;
border:none;
}
/*「@」タブ隣の自分のタイムライン内のツイート*/
#tw2c .fromme .status {
margin-right: 28px;
}
/*メインタイムラインほかの背景色*/
#tw,#tw2c.tw-parent,#re{
background-color:white;
}
/* 自分宛のツイートの背景色 */
.tome { background-color:white; }
/* 自分のツイートの背景色 */
.fromme {background-color: white;}
/* 選択されたツイートの背景 */
.selected,#tw .selected .status,#tw2 .selected .status,#re .selected .status{
background-color: #efefef;
}
/*ツイートの枠*/
.tw-parent > div > div {
margin: 2px 5px 3px 5px;
border-bottom: 1px solid silver;
}
#tw > div {
border-bottom: none;
}
/*投稿アプリの非表示*/
.separator,.source {
display: none;
}
/*返信（リプライ）*/
a.button.reply::before {
content: "返信";
font-size:0.8rem;
margin-left:15px;
}
/*前の発言*/
a.button.inrep::before{
content: "前の発言";
font-size:0.8rem;
margin-left:12px;
}
/*引用ツイート内のジャンプ*/
a.button.inrep.overlay::before{
content: "";
font-size:0;
margin-left:0;
}
/* 右下の▼マーク */
.popup {
padding: 0px 8.7px 0px 6px;
color: #888;
}
small {
font-size: 0.9rem; /*▼の大きさ*/
}
/*右下▼マークからのポップアップメニュー*/
.popup_menu {
display: none;
position: absolute;
left: 0;
top: 200px;
z-index: 6;
width: 220px;
font-size: smaller;
padding: 1px;
border: none;
background-color:rgba(0,0,0,0);
}
.popup_menu a {
background-color: #ffffff;
color: #000000;
text-decoration: none;
padding: 6px 5px 6px 10px;
font-size: 0.8rem;
border-radius: 8px;
border-bottom: black 1px solid;
box-shadow: 2px 2px 2px 1px #383c65;
}
a.button.popup::before {
content: none;
}
#popup hr{display:none;}
/*ポップアップ時の画面全体を隠す影*/
}
#popup_hide {
background-color: #258dff;
}
/*以下、ポップアップメニューの非表示*/
/*「このユーザを抽出」を非表示*/
#regexp_add_ID{display:none;}
/*「1時間ツイートを隔離」を非表示*/
#isolate_menu{display:none;}
/*「RT:を付けて引用」を非表示*/
#popup_status_quote{display:none !important;}
/*「Twitter / ユーザ」を非表示*/
#popup_link_user{display:none;}
/*「Twitter / ツイート」を非表示*/
#popup_link_status{display:none;}
/* NGワードを有効にする */
a#pickup-NG{display:none;}
/*写真・動画拡大画面へのジャンプ*/
a.button::before {
content: "Popup View";
font-size: 0.7rem;
margin-left: 3px;
}
/*写真・動画拡大画面の「⇔」の非表示*/
#rep a.close.both{display:none;}
/*写真・動画拡大画面の「☓」ボタンの左寄せ。スマホの場合、いいねマークの誤タップを防ぐためにこちらのほうがよい*/
#reps {
margin-bottom: 10px;
}
#reps img {
max-width: 94%!important;
}
#reps video {
max-width: 94%!important;
}
/*写真・動画拡大画面の「☓」ボタンの右寄せ。ただし、スマホだと、いいねを誤タップする恐れが高くなる。*/
/* #reps {
margin-top: 26px;
margin-bottom: 10px;
}
#reps img {
max-width: 94%!important;
}
#reps video {
max-width: 94%!important;
}
#rep a.close.cl{float:right;}
*/
調整・設定・操作方法
とくにスマホの場合、長いアカウント・ユーザー名が適切な位置から下方向へズレる恐れがあるので、
/*長いアカウント名・ユーザー名が適切な位置よりもズレていたら、ここを小さい値にする。*/
のところで調節してください。
また、最低限やっておいた方がいいと思う設定は、以下の通り。
- 「自動更新間隔」をお好みに。
- 「ctrl+enter/shift+enterで発言」にチェックを入れる。
- 改行するつもりでEnterキーを押してしまい、ツイートが投稿されてしまうのを防ぐ。
- 投稿する時は、Ctrl＋Enterか、投稿欄の右側にある「ツイート」ボタンを押す。
- 「▼サムネイル」で「サムネイルの位置」を「下」に。
さらに、操作方法について。
