ねこまぐろBlog

ネットなどの備忘録なブログ。たまに創作ネタメモとか?

Twitterのweb版UIでTLの画像添付などを非表示にするユーザスタイルシート(2018年1月版)

追記 2018/1)どんどん新しい記述が増える。Chromeの対応方法載せました。Import楽過ぎた。

追記 2017/11)全面的に修正。まだ取得できてないのがあるかも

パソコンブラウザ版のTwitter用で、画像やらタイムラインのログを見返すのに縦に長くて困るとかそういう感じなので非表示にしましたユーザスタイルシートです。 1年くらい使ってるけど記事にしてみたよー(2015年1月)。その間に記述変わってるんですよね。

主にFirefoxのStylish用です。Chromeの追加方法を下記に載せてみました。意図的に古いFirefoxのStylish使ってるけど、今はどちらも同じですかね…。

個別へ飛んだ時(時間の所から)は表示されるようになってます( /userID/status/~ )。なので興味あるなら見れます。

@-moz-document url-prefix('https://twitter.com/'){
.VideoGuide/* 左カラムのライブ動画 */,
#timeline div[data-component-context="suggest_activity_tweet"]/* TL:いいね */,
#timeline div[data-component-context="suggest_recycled_tweet_inline"]/* TL:いいね */,
#timeline div[data-component-context="suggest_pyle_tweet"]/*TL:○さんがフォローしています */,
#timeline div[data-card2-name="summary"]/* TL:TwitterCard */,
#timeline div[data-card2-name="summary_large_image"]/* TL:TwitterCard-Large */,
#timeline div[data-card2-name="promo_website"]/* TL:プロモのTwitterCard */,
#timeline div[data-card2-name*="promo_video_website"]/* TL:プロモのTwitterCard-動画 */,
#timeline div[data-card2-name*="promo_image_convo"]/* TL:プロモのツイート機能付き画像 */,
#timeline div[data-card2-name*="promo_video_convo"]/* TL:プロモのツイート機能付き動画 */,
#timeline div[data-card2-name*="direct_store_link_app"]/* TL:PlayStore */,
#timeline div[data-card2-name*="live_video"]/* TL:プロモの動画 */,
#timeline div[data-card2-name*="live_event"]/* TL:プロモ */,
#timeline div[data-card2-name*="moment"]/* TL:モーメント */,
#timeline div[data-card2-name*="periscope_broadcast"]/* TL:動画 */,
#timeline div[data-card2-name="player"]/* TL:動画、つべ・にこ */,
#timeline div[data-card2-name="audio"]/* TL:動画 */,
#timeline .AdaptiveMediaOuterContainer/* TL:埋め込み画像・動画 */,
#timeline .QuoteTweet-container/*TL:引用ツイート(1行線になるので個別ツイートから開く) */,
#timeline li[data-item-type="recap_entry"]/* TL:最近のハイライト  */,
#timeline li[data-item-type="who_to_follow_entry"]/* TL:おすすめユーザー  */,
.wtf-module/* 左カラムのおすすめユーザー&知り合いを見つけましょう */,
.import-prompt/* 知り合いを見つけましょう */
{display:none !important;}
/* ユーザ個別ページは非表示しなくていいなら #timeline を .top-timeline-tweetbox にしてね */
/* アップデート確認→ https://blog.tailtame.com/tips/css/20150119-twitter.html */
} 

IEの場合は最初と最後を消して ie.css などのファイルを作るといいです。画像付きの詳しいサイト→ Internet Explorer 11でユーザースタイルシートを使う

不要なものは削除して使ってください。「#timeline , {display:none!important;}」みたいにカンマを「{}」の前に置くとエラーになるので注意。CSSは「a {hogehoge}」「c, b, a {hogehoge}」って感じに書くのです。

@-moz-document url-prefix('https://twitter.com/'){
#timeline div[data-screen-name="TwitterJP"] .AdaptiveMediaOuterContainer/* TLの埋め込み画像・動画、で特定ユーザは表示。サンプルは@TwitterJP */
{display:inline !important;}
}

特定ユーザの画像だけ表示する場合もできたから別枠で置いてみました。「TwitterJP」の部分がIDです。

@-moz-document url-prefix('https://twitter.com/'){
#timeline div[data-screen-name="user_a"],
#timeline div[data-screen-name="user_b"],
#timeline div[data-screen-name="user_c"]
{display:none!important;}
}

単純に特定ユーザを非表示にする場合はこちら。検索してるとブロックしてるユーザが…(ブロックし過ぎかな)

適応前と適応後

適応前
Twitterのweb版UIでTLの画像添付を表示した通常時
適応後
Twitterのweb版UIでTLの画像添付を非表示した適応時

253pxも節約! なんかこのモザイクサムネイルを見ているだけで腹立ってきたのでそのうち変えたい…。

Google Chrome(派生含む)の場合

上記はFirefox用の記述ですが、Chromeの場合はStylishアイコンを右クリック→ オプション→ 新しいスタイルを作成(左カラム)→ 「名前を入力してください」にTwitterなど適当な名前を付ける→ Mozilla Formatの下のImportをクリックして入力欄に↑のコードを張り付ける→「Append to style」でOK(「Overwrite style」は上書きのようですね。どちらでもいい)

フォロー誤爆防止用のユーザスタイルシート

@-moz-document domain("twitter.com") {
/* button.cancel-text, キャンセル */
button.pending-text, /* フォロー許可待ち */
/*button.unblock-text, ブロック解除 */
/*button.blocked-text, ブロック中 */
/*button.unfollow-text, 解除*/
button.following-text, /* フォロー中 */
button.follow-text/* フォローする */
{display:none!important;}
}

誤爆防止用のフォローボタンだけ別途非表示にしていたのを忘れてました……。ブロック中は表示にしてるので適当に変更してください。

おまけ

.js-tweet-text{white-space: normal !important;}/* 改行無効 */

改行無効。長いのよねぇ。具体的にはこういう用です→[twitter]うざいプロモ…(※見た瞬間ブロックしました)

/* 絵文字をグレースケール化 */
span.Icon--protected,
div.stream-container img[src*="/emoji/v2/72x72/"],
div.stream-container img[src*="/emoji/v1/72x72/"]{filter: grayscale(100%);width:13px;height:13px;}

絵文字をグレスケ化もできたり。スマホでは普通にカラーで見てるからまあ。

追記ログ

追記 2017/4)追加。TLに表示されるフォロワーが追加した「いいね」を消す。公式RTは全オフ派なので…。

追記 2016/10)追加。フォローしている相手のいいねがTLにまとめて表示されるやつです。使いやすいように1行コピペできるようにしてるので整理したい。

追記 2016/8)修正。

追記 2015/12)今は「#timeline .AdaptiveMedia」で全部消せるのかな?

by id:tailtame

Posted at 2018-01-30 21:08 in tips » css

新はてなブックマーク用ユーザスタイルシートで旧っぽい配置にした

2017年7月3日、とうとうこの日が来てしまった……。 怨念のブクマページ→はてなブックマーク - はてなブックマーク新ユーザーページを正式リリースいたします - はてなブックマーク開発ブログ

来てしまったものはしょうがないのでいつも通りにユーザスタイルシートで変更。右の広告まで消えたから真ん中にも置いてください><

@-moz-document url-prefix(http://b.hatena.ne.jp/自分のID/){
.entry-image-block, /* サムネ消し */
#right-container /* 右カラム消し */
{display:none !important;}
#center-container{width:700px !important;} /* 横幅変更 */
#left-container{float:right !important;} /* 左カラムを右に移動 */
.left-column-line{background:none!important;} /* 左カラムの縦線を削除 */
}

というか『 /id/ 』にアクセスしたら『 /id/hotentry 』にリダイレクトするの勘弁してくれませんかね…? 『 /id/bookmark 』でいいのにさー。お気に入りページをブクマしてるからから削ってアクセスが楽だったので面倒……。

あと、スマホ版も『 /id/touch 』から『 /id/bookmark 』、『 /id/favorite.touch 』から『 /id/favorite 』にリダイレクトで変更されるようになりましたねー。

by id:tailtame

Posted at 2017-07-04 08:13 in tips » css

pixivで特定ユーザの作品サムネイルを非表示にする方法(2013年5月版)

いつの間にやら、pixivのサムネイルにユーザIDが入らなくなったので、新しい対策です。

追記 2013-10)いつのまにかサムネイルのユーザID復活してますね…なんなの>< と言うわけで、 IEのユーザスタイルシートでpixivの特定ユーザを非表示にする方法へどうぞ。

いや、ほら…パクリ素材とかあるじゃないですか(どれとは言わないが)。

と言うわけで、検索結果にユーザ名とリンクが追加されたのでそれを利用します。

/* 特定ユーザのサムネイルを非表示にする */
.image-item a.user[href*="member_illust.php?id=***"], /* この行を追加して行ってね! */
.image-item a.user[href*="member_illust.php?id=***"],
.image-item a.user[href*="member_illust.php?id=***"]
{
overflow:visible !important;position:absolute !important;left:10px;top:10px !important;
width:156px !important; height:156px !important;background-color:#FFF;
}

多分IEでも動くんじゃないかなー。タイトル下にあるアカウント名のリンクから調べて *** に数字入れてね。

そこまでして見なくても…って感じではあるので…まあ、実際見る時間は減ってるわ(´д`;)

Posted at 2013-05-12 18:33 in tips » css

IEのユーザスタイルシートでpixivの特定ユーザを非表示にする方法

ぼかしもしないタイトルですね。 pixivとTINAMIのタイトルからサムネイルを非表示にするユーザCSS*Firefox+Stylishも参照ください。

CSSが分からない人にも…と言う事で書いてます。

追記)2012-07-30 先月くらいからpixivが仕様変更により pixiv.net/img数字/img/userID/ と数字フォルダが付いたため、 img[src*="/img/userID/"] にするといいかと思います。(まー /img/userID/ が被る事はないだろう)

前提条件として、IE7、IE8、IE9が必要です。 もう強制アップデートが行われたはずなので、大抵はIE8かIE9ですね。

マイドキュメントにでも、「ie-css.css」と言うファイル名を作ります。 拡張子が「.css」ならなんでもいいです。毎度読み込むみたいなので削除しない場所へ置きましょう。

非表示にしたいユーザの画像の上で右クリック→アドレス「 http://img*.pixiv.net/img/***/~ 」と***(ユーザID)の部分をコピーします。

img[src*="pixiv.net/img/***/"]{display:none !important;} /* ここにPNとか書けばいい */

↑は1ユーザの場合、↓は増やす場合。↑の行をそのまま増やす方が分かりやすいかな。

img[src*="pixiv.net/img/***/"]/* コメント1→カンマ(,)を忘れず */,
img[src*="pixiv.net/img/***/"]/* コメント2 */,
img[src*="pixiv.net/img/***/"]/* コメント3最後はカンマ不要 */
{display:none !important;}

IEを立ち上げ、ツール(IE9は歯車アイコン)→インターネットオプション→全般→ユーザ補助→ユーザスタイルシート、 の「自分のスタイルシートでドキュメントの書式を設定する」にチェックを入れて、 「参照」で作成した「ie-css.css」を読み込みます。

pixivでサムネイルが消えていれば成功です。

おわり。

pixivとTINAMIのタイトルからサムネイルを非表示にするユーザCSS*Firefox+Stylishと違うのは、 「@-moz-document url-prefix」が使えないので細かい事は出来ないがユーザ非表示だけなら上記の通りです。

追記)属性セレクタはIE7も対応してますね、と修正。

Posted at 2012-04-16 23:41 in tips » css

ツールバーのGreasemonkeyを差し替えたのとCSS覚え書き

こういうので自分でtipsと入れるのもなんですね。覚え書き覚え書き。ブログ更新率も上げたいし。前置き。

Firefox4になってステータスバーがなくなって、アドオンバーになるという改悪をかましてはくれましたが(まだ本移行してないけど、Status-4-Evarは入れてます)、 いろんな面でFirefox愛なのでさておき。

Greasemonkeyが先日の更新でツールバーに移動してから、 お猿さんアイコンが見ている…状態なので変えたいなー、 と思っていたら、ヒントを貰ったので変えました。 ありがとうございます! アドオンのCSSって見れるんですね。まだ知らない事がたくさんだ! カスタマイズ欲を刺激する!

と言うわけで、 chrome://greasemonkey/skin/browser.css から一行目を弄り…。

/* ツールバー置き換え Greasemonkey */
#greasemonkey-tbb {
  list-style-image: url("tt-th24x24_toyohime20110415.png") !important;
}

Stylishだと「挿入→Chrome フォルダパス」から画像指定すると楽ですよね。 まあ、画像をFirefoxにドラッグ&ドロップしてURL欄からコピーの方が…(`・ω´・) あまり差し替えないだろうから、userChrome.cssに入れました。

ツールバーのGreasemonkeyを差し替えた前後の図

こんな感じになりましたー。また豊姫ですよ、とさっくり描いた(*´∀`*) 24x24だから潰れますね。Firefoxの豊姫化してみたいものだ。

24x24の豊姫アイコン*20110415版

最後に画像を置いて終わり ヾ(・ω・)ノ

Posted at 2011-04-15 21:13 in tips » css

pixivのユーザ装飾を無効にするユーザCSS*Firefox+Stylish

水色で目に優しいpixivカラーですが、ユーザ装飾で目が死ぬ配色ばかりなので固定させていただきました。背景が薄オレンジで文字が白とか勘弁…。

/* プロフィールのユーザCSS無効 */
@-moz-document url-prefix(https://www.pixiv.net/member.php?id=){
table.prof_table, table.ws_table{
border:1px solid #B7B7B7 !important;
}
table.prof_table .td1, table.ws_table  .td1{
background-color:#E9F5FF !important;
border-bottom:1px solid #B7B7B7 !important;
color:#333333 !important;
}
table.prof_table .td2, table.ws_table  .td2{
background-color:#FFFFFF !important;
border-bottom:1px solid #B7B7B7 !important;
color:#333333 !important;
}
.prof_table a:link{color:#2690B9 !important;}
.prof_table a:visited{ color:#9d5b8b !important;} /* 個人的変更 */
}

おまけ。いつの間にかTwitterもbold対象(クッション無しの直通)になってますね。一応追加。

/* プレミアムの文字装飾無効 */
@-moz-document url-prefix(https://www.pixiv.net/member_illust.php?mode=medium){
div#illust_comment span, div#illust_comment strong{ color:#000 !important; font-weight:normal !important;}
div#illust_comment a[href*="member_illust.php?mode=medium"], div#illust_comment a[href*="nicovideo.jp"], div#illust_comment a[href*="twitter.com"]{ font-weight:bold !important;}

そのうち怒られそうだw(プレミアム特典消滅させてるし)

追記 2010-06-15

.td2に背景色が必要だったので修正しました

Posted at 2010-05-14 17:53 in tips » css

pixivとTINAMIのタイトルからサムネイルを非表示にするユーザCSS*Firefox+Stylish

※現在pixivの改悪仕様変更によりalt要素がなくなったため、タイトルによる非表示が出来ません(マイページトップを除く)、下記の追記をごらんください。 *2011-06-07


“腐女子”だけど、常時“ボーイズラブ”の絵を見たいわけでもないし、 苦手な絵柄と同性愛として見たくない二次創作もあります。 見て不快な気持ちを直接的ではないとは言え吐き出すのも悲しいので、 腐女子イラストを投稿する皆さんがつけてくれたタイトル「腐(腐向け)」を利用して非表示にするユーザCSSを書いてみました。

FirefoxのStylishと言うアドオンを利用しているため、常時無効にする事が出来るので便利です。 私もたまに無効にして腐向け絵を楽しんでます。 無効化については過去に書いたStylishでテキストを純粋に読むユーザCSS(自分向け) - 猫谷の一言メモにて。 ちなみに「新しいスタイルを書く」から「非表示サムネイル」と名前をつけて作ってます。

imgのalt要素を利用しています。alt要素=タイトルなため、タイトルにつけられている文字を入れると非表示になります。

pixiv

/* pixivのタイトルからサムネイルを非表示にする */
@-moz-document url-prefix(https://www.pixiv.net/){
img[alt*="腐"]{visibility: hidden !important;} /* 非表示 */
img[alt*="豆腐"]{visibility: visible !important;} /* 表示 */
}

Firefox+StylishでAlt要素の単語から除外@pixiv

TINAMI

/* TINAMIのタイトルからサムネイルを非表示にする */
@-moz-document url-prefix(http://www.tinami.com/){
a[title*="腐"] img{visibility: hidden !important;} /* 非表示 */
a[title*="豆腐"] img{visibility: visible !important;} /* 表示 */
}

Firefox+StylishでTitle要素の単語から除外@TINAMI

特定ユーザを非表示する?(pixiv限定)

pixivはユーザ別に表示を消せたりします。URLに含んでいるせいですね。 一例として私、猫谷美甘(pixiv id=55535)から記述します。 tailtameの部分がidです。そこはプロパティから各自でどうぞ。

a img[src*="pixiv.net/img/tailtame/"]{display:none !important;}

どうしてもこのユーザはちょっと…という場合にいいのかもです。 不快な気持ちを心の中とは言え、吐き出すのは悲しいですしね。二度言った。

見方を変えると、これは特定のユーザのみを強調する事が出来るんですよね……。

スタックフィードの画像の大きさを変える(pixiv限定)

画像にaltがないから↑の画像オフ出来ないよー&画像でか過ぎて縦長過ぎるんだぜ! と言う事でサイズを変えてみた。

@-moz-document url-prefix(https://www.pixiv.net/stacc/){
img[src*="pixiv.net/img/"]{max-height:75px !important;max-width:75px !important;}
}

75pxで半分のサイズです。50pxとか好きにしたらいいのかもですねぇ。

まとめ

と言うわけで、そんな感じで。サムネイルでの破壊力は意外と大きいです。セーフサーチ「中」でグロ画像のサムネイルで軽く来るものがあったりしますしね。 男性向け寄りでもたまに発生しますがまあ…。なんとなくタイトルに「東方」やらつけ始めました、がそこは好き好きですねぇ。

あと、pixivにはタグで非表示するGreaseMonkeyがあるのですが(Greasemonkey使ってフィルタかけちゃえ: 膳ブログ)、一度ページを読み込むのでpixiv側の負荷が高いと思います。 こちらのCSSだと、通常読み込むタイトルから非表示なので非常に簡単です。

他はチラッと見た分で、PIAPROpgn コミュニティサイトでも出来ますが需要あるのか…?w PiXAは出来ませんね。残念だなーw

「百合」とかも流行らないかなぁ。腐女子は自重文化だからまったく違う方向ではですよねー。

追記

2010-06-13 「豆腐」のタイトルを表示するように追加しました。他にもありますが…なんだっけ。

2010-08-26 「スタックフィードの画像の大きさを変える(pixiv限定)」を追記しました。

2011-06-07 仕様変更により、alt要素でのタイトルから除外が無効になっています。Greasemonkey使ってフィルタかけちゃえ: 膳ブログのGreaseMonkeyによる除外をご利用ください…。pixivへ負荷かかるから嫌なんですけどね…。完全一致なので適応は色々と。名前付けて保存してから適応した方がいいよ!

Posted at 2010-04-27 17:07 in tips » css

moo-allianceのHTMLとCSS調整や整理した

moo-allianceのHTMLとCSS調整や整理しました。 前に改装したのは2004年頃だっけ、と言う感じなValid HTMLに目覚めた頃でした。ようやく名簿制終了とか色々とやりました。すっきり。確定ではないけどHTMLとCSS弄りました。そして変わらないトップ……あー、もう永遠でいいよ! みたいな。リメイクしてみようかなぁ。でもそのままのほうがいいでしょうね。うん。

作成の際に、luzu.in/css/の8番“Memory 2”を参考にしました。こうかなー、って感じでソースは見てないのですけど……マイナスしていが意外なほど便利で!

しかし、もうちっとさわやかな緑カラーに出来なかったものか…再考だなぁ。

h3が面白いことになったのでしばらく放置で!w Fx3とIE7で見てみた。

今回、最終調整にFirefoxのアドオン”firebug”が役に立ちました。すごいなぁ、これ。

Posted at 2008-07-19 00:48 in 日記

Categories
Archives
Tagging

Page 1 of 1: 1

スポンサーリンク

2006年12月から計測のページビューカウンター。