adbird(広告鳥) 備忘録

公式Twitter風 twicliユーザースタイルシート(ブラック)

の表示色違いです。以下、説明は同じです。


twicli起動後、下記のユーザースタイルシートを、

「+」タブ > ▼設計 > ユーザースタイルシート

の欄に貼り付けてください。
※間違っても「プラグイン」や「抽出条件」の欄に貼り付けないように(一度やってしまった経験がある…w)。

動作環境はUbuntuvivaldiFirefoxスマホandroidvivaldiFirefoxで確認してます。OSやブラウザ、使用フォント等によって表示が崩れる恐れがあるので、その時は適宜スタイルシートを調整してください。

とくにスマホの場合、長いアカウント・ユーザー名が適切な位置から下方向へズレる恐れがあるので、

/*長いアカウント名・ユーザー名が適切な位置よりもズレていたら、ここを小さい値にする。*/

のところで調節してください。

また、最低限やっておいた方がいいと思う設定は、以下の通り。

  • 「自動更新間隔」をお好みに。
    • あまりに更新間隔が短いとAPI制限に引っかかるし、自動更新されるとスクロールして見ていたツイートを見失う(たいがい、見ていたツイートは上の方へ移動してしまっている)ので、特にスマホの場合は思い切り長い時間に設定して、手動で更新する(投稿欄に何も書かずに「ツイート」ボタンを押す)つもりの方がいいと思う。
  • 「ctrl+enter/shift+enterで発言」にチェックを入れる。
    • 改行するつもりでEnterキーを押してしまい、ツイートが投稿されてしまうのを防ぐ。
    • 投稿する時は、Ctrl+Enterか、投稿欄の右側にある「ツイート」ボタンを押す。
  • 「▼サムネイル」で「サムネイルの位置」を「下」に。

さらに、操作方法について。

  • twicli内だけで写真・動画を表示・再生したい場合(別タブやTwitterアプリに遷移したくない場合)は、写真や動画のURL(https://〜/photo/1 や https://〜/video/1)のあとにある「Popup View >」をクリックすると、写真や動画がポップアップ表示される。
    • サムネイル画像のリンク先が、写真なのか、動画なのかは、URLの最後が /photo/1 なのか、/video/1 なのかで、見分ける。

ユーザースタイルシート

以下をコピペするか、コピペしにくい場合は、 twicli_stylesheet_002.txt を一度ダウンロードしてから、ファイルを開いてコピペしてください。

/*ツイート本文(ステータス)のフォントサイズ・色など*/
#tw .status,#tw2 .status,#re .status{
    font-size: 1rem; /*フォントサイズ*/
    color:rgba(217,217,217,1.00); /*フォント色*/
    background-color:black;
    margin:7px 10px 5px 60px;
    display:block;
    text-align:justify;
}

/*行間*/
#tw,#tw2,#re,#reps .status{line-height:1.3125;}

/* 引用 */
.quoted {
    border: solid 1px rgb(87, 93, 97);
    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(87, 93, 97);
    margin: 13px 0 0 0;
    color:rgba(217,217,217,1.00);
    background-color:#212225;
}

/* 「リツイート直後のツイートを探す」「ツイート前後のツイートを探す」 */
#rep {
    font-size: 1rem;
    display: none;
    background-color: black;
    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;
    color:rgba(217,217,217,1.00);
}

/*ツイート内のリンク(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(136, 153, 166);
    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: rgba(217,217,217,1.00);
    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;
}

/*上部メニュー全体*/
#menu {
    background-color:black;
}
/*上部メニューのタブ*/
#menu2 a{
    font-size: 13pt;
    background-color:black;
    color:rgba(217,217,217,1.00); 
    border:solid 1px grey;
    box-shadow: 0 0 5px grey inset;
}
/*新着タブの色*/
#menu a.new {
    background-color: rgb(157, 167, 174);
}
/*選択したタブ*/
#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,#tw2h,tw2.tw,#control,#option{
    background-color:black;
    color:rgba(217,217,217,1.00);; /*フォント色*/
}
table {
    color: rgba(217,217,217,1.00);
}

/* 自分宛のツイートの背景色 */
.tome { background-color:black; }

/* 自分のツイートの背景色 */
.fromme {background-color:black;}

/* 選択されたツイートの背景 */
.selected,#tw .selected .status,#tw2 .selected .status,#re .selected .status{
    background-color: #212225;
    color:rgba(217,217,217,1.00);
}

/*ツイートの枠*/
.tw-parent > div > div {
    margin: 2px 5px 3px 5px;
    border-bottom: 1px solid #636363;
}
#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:;
    margin-left: 3px;
}

/* 右下の▼マーク */
.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;
    color: rgba(217,217,217,1.00);
    } 
#reps img {
    max-width: 94%!important;
}
#reps video {
    max-width: 94%!important;
}

/*写真・動画拡大画面の「☓」ボタンの右寄せ。ただし、スマホだと、いいねを誤タップする恐れが高くなる。*/
/* #reps {
    margin-top: 26px;
    margin-bottom: 10px;
    color: rgba(217,217,217,1.00);
    }
#reps img {
    max-width: 94%!important;
}
#reps video {
    max-width: 94%!important;
}
#rep a.close.cl{float:right;}
*/

公式Twitter風 twicliユーザースタイルシート(ダークブルー)

前回の 公式Twitter風 twicliユーザースタイルシート(デフォルト) の表示色違いです。

公式Twitter風 twicliユーザースタイルシート(ブラック) もあります。

以下、説明は同じです。


twicli起動後、下記のユーザースタイルシートを、

「+」タブ > ▼設計 > ユーザースタイルシート

の欄に貼り付けてください。
※間違っても「プラグイン」や「抽出条件」の欄に貼り付けないように(一度やってしまった経験がある…w)。

動作環境はUbuntuvivaldiFirefoxスマホandroidvivaldiFirefoxで確認してます。OSやブラウザ、使用フォント等によって表示が崩れる恐れがあるので、その時は適宜スタイルシートを調整してください。

とくにスマホの場合、長いアカウント・ユーザー名が適切な位置から下方向へズレる恐れがあるので、

/*長いアカウント名・ユーザー名が適切な位置よりもズレていたら、ここを小さい値にする。*/

のところで調節してください。

また、最低限やっておいた方がいいと思う設定は、以下の通り。

  • 「自動更新間隔」をお好みに。
    • あまりに更新間隔が短いとAPI制限に引っかかるし、自動更新されるとスクロールして見ていたツイートを見失う(たいがい、見ていたツイートは上の方へ移動してしまっている)ので、特にスマホの場合は思い切り長い時間に設定して、手動で更新する(投稿欄に何も書かずに「ツイート」ボタンを押す)つもりの方がいいと思う。
  • 「ctrl+enter/shift+enterで発言」にチェックを入れる。
    • 改行するつもりでEnterキーを押してしまい、ツイートが投稿されてしまうのを防ぐ。
    • 投稿する時は、Ctrl+Enterか、投稿欄の右側にある「ツイート」ボタンを押す。
  • 「▼サムネイル」で「サムネイルの位置」を「下」に。

さらに、操作方法について。

  • twicli内だけで写真・動画を表示・再生したい場合(別タブやTwitterアプリに遷移したくない場合)は、写真や動画のURL(https://〜/photo/1 や https://〜/video/1)のあとにある「Popup View >」をクリックすると、写真や動画がポップアップ表示される。
    • サムネイル画像のリンク先が、写真なのか、動画なのかは、URLの最後が /photo/1 なのか、/video/1 なのかで、見分ける。

ユーザースタイルシート

以下をコピペするか、コピペしにくい場合は、 twicli_stylesheet_003.txt を一度ダウンロードしてから、ファイルを開いてコピペしてください。

/*ツイート本文(ステータス)のフォントサイズ・色など*/
#tw .status,#tw2 .status,#re .status{
    font-size: 1rem; /*フォントサイズ*/
    color:rgb(255, 255, 255); /*フォント色*/
    background-color:rgb(21, 32, 43);
    margin:7px 10px 5px 60px;
    display:block;
    text-align:justify;
}

/*行間*/
#tw,#tw2,#re,#reps .status{line-height:1.3125;}

/* 引用 */
.quoted {
    border: solid 1px rgb(87, 93, 97);
    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(87, 93, 97);
    margin: 13px 0 0 0;
    color:rgb(255, 255, 255);
    background-color:rgb(25, 39, 52);
}

/* 「リツイート直後のツイートを探す」「ツイート前後のツイートを探す」 */
#rep {
    font-size: 1rem;
    display: none;
    background-color: rgb(21, 32, 43);
    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;
    color:rgb(255, 255, 255);
}

/*ツイート内のリンク(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(136, 153, 166);
    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: rgb(255, 255, 255);
    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;
}

/*上部メニュー全体*/
#menu {
    background-color:rgb(21, 32, 43);
}
/*上部メニューのタブ*/
#menu2 a{
    font-size: 13pt;
    background-color:rgb(21, 32, 43);
    color:rgb(255, 255, 255); 
    border:solid 1px grey;
    box-shadow: 0 0 5px grey inset;
}
/*新着タブの色*/
#menu a.new {
    background-color: rgb(157, 167, 174);
}
/*選択したタブ*/
#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,#tw2h,tw2.tw,#control,#option{
    background-color:rgb(21, 32, 43);
    color:rgb(255, 255, 255);; /*フォント色*/
}
table {
    color: rgb(255, 255, 255);
}

/* 自分宛のツイートの背景色 */
.tome { background-color:rgb(21, 32, 43); }

/* 自分のツイートの背景色 */
.fromme {background-color:rgb(21, 32, 43);}

/* 選択されたツイートの背景 */
.selected,#tw .selected .status,#tw2 .selected .status,#re .selected .status{
    background-color: rgb(25, 39, 52);
    color:rgb(255, 255, 255);
}

/*ツイートの枠*/
.tw-parent > div > div {
    margin: 2px 5px 3px 5px;
    border-bottom: 1px solid #636363;
}
#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;
    color:rgb(255, 255, 255);
    } 
#reps img {
    max-width: 94%!important;
}
#reps video {
    max-width: 94%!important;
}

/*写真・動画拡大画面の「☓」ボタンの右寄せ。ただし、スマホだと、いいねを誤タップする恐れが高くなる。*/
/* #reps {
    margin-top: 26px;
    margin-bottom: 10px;
    color:rgb(255, 255, 255);
    }
#reps img {
    max-width: 94%!important;
}
#reps video {
    max-width: 94%!important;
}
#rep a.close.cl{float:right;}
*/

公式Twitter風 twicliユーザースタイルシート(デフォルト)

他人に twicli を勧めようと思った時に、今まで使ってきた公式Twitterアプリと見た目がガラリと変わるのは、とっつきにくいだろうなぁ…と思って、できるだけ公式のデザインに近づけるべく、CSSを作った。

公式Twittertwicli

これを作るに当たって、twicli製作者の @NeoCat さんに、htmlの要素にclassをいくつか追加していただいた。本当にありがとうございました。

目次


スタイルシートの適用方法

twicli起動後、下記のユーザースタイルシートを、

「+」タブ > ▼設計 > ユーザースタイルシート

の欄に貼り付けてください。
※間違っても「プラグイン」や「抽出条件」の欄に貼り付けないように(一度やってしまった経験がある…w)。

動作環境はUbuntuvivaldiFirefoxスマホandroidvivaldiFirefoxで確認してます。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;}
*/

調整・設定・操作方法

とくにスマホの場合、長いアカウント・ユーザー名が適切な位置から下方向へズレる恐れがあるので、

/*長いアカウント名・ユーザー名が適切な位置よりもズレていたら、ここを小さい値にする。*/

のところで調節してください。

また、最低限やっておいた方がいいと思う設定は、以下の通り。

  • 「自動更新間隔」をお好みに。
    • あまりに更新間隔が短いとAPI制限に引っかかるし、自動更新されるとスクロールして見ていたツイートを見失う(たいがい、見ていたツイートは上の方へ移動してしまっている)ので、特にスマホの場合は思い切り長い時間に設定して、手動で更新する(投稿欄に何も書かずに「ツイート」ボタンを押す)つもりの方がいいと思う。
  • 「ctrl+enter/shift+enterで発言」にチェックを入れる。
    • 改行するつもりでEnterキーを押してしまい、ツイートが投稿されてしまうのを防ぐ。
    • 投稿する時は、Ctrl+Enterか、投稿欄の右側にある「ツイート」ボタンを押す。
  • 「▼サムネイル」で「サムネイルの位置」を「下」に。

さらに、操作方法について。

  • twicli内だけで写真・動画を表示・再生したい場合(別タブやTwitterアプリに遷移したくない場合)は、写真や動画のURL(https://〜/photo/1 や https://〜/video/1)のあとにある緑の「>」マークスマホだと押しにくいので修正した)「Popup View >」をクリックすると、写真や動画がポップアップ表示される。
    • サムネイル画像のリンク先が、写真なのか、動画なのかは、URLの最後が /photo/1 なのか、/video/1 なのかで、見分ける。

LaTeXの細かい設定(再定義)

元のclsファイルなどを検索

使用している、元となるclsファイルなどがどこにあるかを $ kpsewhich 〜.cls で探す。例えば、Lualatex(LuaTeX-ja)で ltjsarticle.cls の場合。

$ kpsewhich ltjsarticle.cls
/usr/local/texlive/2018/texmf-dist/tex/luatex/luatexja/ltjsarticle.cls

自分のstyファイルを作成する。

原稿.texのプリアンブルで再定義してもいいのだけど、できるだけ内容と装飾は分離して、原稿.texのほうはすっきりさせたいので、自分のstyファイルを作成する。

1.前述の ltjsarticle.cls ファイルをテキストエディタ(僕の場合、geany)で開く。

$ geany /usr/local/texlive/2018/texmf-dist/tex/luatex/luatexja/ltjsarticle.cls

2.変えたい設定の定義のところっぽいところを見つけて、コピー。

3.コピーした箇所を、新規ファイルにペーストして、任意のスタイルファイル(例:adbird.sty など)にして保存。保存先はコンパイルする原稿.texと同じフォルダ内でOK。

変更したい箇所が

\def\@〜{
…
…
}

のように@を含む場合、直前に makeatletter を直後に makeatother を書く。

\makeatletter
\def\@〜{
…
…
}
\makeatother

LaTeX文書のプリアンブルなどで「@」を含むようなコマンドが現れるような定義・再定義を行う場合には、その定義・再定義の部分に \makeatletter を置く必要があり、定義・再定義が済んだら、\makeatother を用いて \makeatletter の効果を取り消すことになるという点に注意してください。(吉永 徹美『LaTeX2e辞典~用法・用例逆引きリファレンス』翔泳社、2009)

\newcommand{\〜}{〜}

の箇所は

\renewcommand{\〜}{〜}

にする。

あとは根気よくトライ・アンド・エラーを繰り返しながら、スタイルファイルをいじっていく。

原稿.tex

\documentclass[11pt,a4paper]{ltjsarticle}

\usepackage{adbird}%作成したstyファイル名を書く(拡張子は必要ない)

\title{}
\date{}
\author{}

\begin{document}

\end{document}

PDFに簡単な文字入力

追記:LibreOfficeのDrawや、GIMP、Xournalなどの方が簡単…。


ある既存の単一ページのPDFデータに、ちょっとしたタイトルめいたテキストをページの上部に入れたいときに。

Pandoc、wkhtmltopdf、pdftkが必要。

スクリプト(textinpdf.sh)

テキストエディタで、以下の内容をtextinpdf.sh として保存。

#挿入したい文字列をtextinpdf.mdに保存
touch textinpdf.md
echo %mdtitle >> textinpdf.md
echo "$1" >> textinpdf.md

#pandocでmdをhtmlに変換、調整。フォントサイズ等の変更はこちら。
pandoc textinpdf.md -s -o textinpdf.html
sed -i '/header/d' textinpdf.html
sed -i '/h1 class/d' textinpdf.html
sed -i -e 's/<p>/<p style="font-family:'IPAexゴシック';font-size:15pt;">/g' textinpdf.html

#wkhtmltopdfでpdfに変換。
wkhtmltopdf --disable-smart-shrinking --margin-top $2 --margin-left $3 textinpdf.html textinpdf.pdf

#textinpdf.pdfを背景として重ねる。
pdftk $4.pdf background textinpdf.pdf output $4_`date +%Y%m%d`.pdf

#不必要なファイルを削除。
rm -f textinpdf.md
rm -f textinpdf.html
rm -f textinpdf.pdf

実行

上記 textinpdf.sh を、文字を入れたいPDFデータ(ここでは Test.pdf )と同じフォルダ内に入れて、

 $ sh textinpdf.sh "ここにテキスト" 13 20 Test

を実行。

  • "ここにテキスト" :ダブルクォート(" ")の中にテキストを書く。
  • 13       :ページ上からの位置。
  • 20       :ページ左からの位置。
  • Test      :文字列を入れたいPDFデータの名前。拡張子はいらない。

お年玉付き年賀【切手】

あけましておめでとうございます。

年が明けて、返信のための無地の年賀ハガキを求めて、近所の郵便局を2軒まわったけど、インクジェット用の無地はあっても普通紙の無地が完売していた…。

カラー印刷なんてどうせ年賀状印刷(印刷枚数も少ない)のときだけだし…ということで、僕の家にあるのはモノクロのプリンタしかない。

年賀状は年賀ハガキ(普通紙の年賀ハガキ)をセブンイレブンに持ち込んで、通信面をカラー印刷(GIMPなどでデザインして、PDFかJPGデータにしてUSBメモリに入れていく)して、宛名面だけを自宅のモノクロプリンタで印刷している。

セブンイレブンでのハガキプリントではインクジェット用ハガキは使えないので、普通紙・無地の年賀ハガキがないのは困った…。

郵便局には、くまモンのイラストの入っている普通紙の年賀ハガキは残っていたのだけど、すでに無地を想定して年賀状デザインを作っているし、鹿児島県人の僕が熊本のくまモンのデザインを使うのはどうなのよ…ということで却下。

どうしようと考えて、ふと「年賀ハガキではなく、もしかしたら、年賀切手というのがあるんじゃないのか?」とスマホで検索したら、やはりあった!

しかも、寄付金3円分だけ高くなるけど、「寄附金付お年玉付年賀郵便切手」というのがある!

寄附金付お年玉付年賀郵便切手を買って(寄付金付きが付いていない年賀切手は売り切れていた)、印刷面をセブンイレブンで印刷(切手の貼っていないハガキは自分で用意する必要なく、セブンイレブンのマルチコピー機にすでに「備え付けはがき」がセットされている)。
自宅で宛名を印刷して、貼った年賀切手の下に赤で「年賀」と書いてポスト投函。

レーザープリンタセブンイレブンでの年賀状印刷を想定しているのに、無地の普通紙の年賀ハガキがなかった場合、年賀切手という手がありますよ、というお話でした。