SNSの画像表示を小さくしよう
created 2024-08-17 modified 2025-03-22
$ SNS の精神影響を減らす
(SNS の精神影響を減らすために その1)
画像のサイズを小さく、色も落ち着いた色にしてみよう。
ブラウザの拡張機能で Stylus というものがある。これは CSS を閲覧者側で独自に追加定義して、
他人が作ったWebサイトの画面デザインを、自分の好みのものに変えてしまおうというもの。
ところが これはなかなかに大変。
他人が作ったWebサイトなので、htmlタグ構造を解析し、効果的に指定を行う必要がある。
Webサイト作成者が変更をしたら追随する必要があり不毛な作業になる。
CSS の仕様はなかなかにややこしい。
それでも、やる。
SNSで「事故」を起こして「自己嫌悪」しないように、アクティブ・セーフティーの行動を取ろう。
Stylusの基本は割愛して CSS をここにメモしていく。
Twitter [X]
2025-03-04 更新
/* twitter */
/* 画像自体を小さくする */
div[aria-labelledby^="id"] :has(>img)
{
max-height: 140px;/**/
max-width: 249px; /*calc(140px*16/9);*/
filter: grayscale(50%);/**/
}
/* 画像を含む領域を小さくする */
div[aria-labelledby^="id"] :has(img)
/*, div[aria-labelledby^="id"] :has(a)*/
, div[aria-labelledby^="id"] :has(div[aria-label="画像"])
, div[aria-labelledby^="id"] :has(div[aria-label*="埋め込み動画"])
{
max-height: 140px;/**/
}
/* 消す */
div :has(>div[role="progressbar"]) /* タイムラインのツイートボックス */
,div:has(>aside[aria-label*="プレミアム"])
,div[aria-label="タイムライン: トレンド"]
,div:has(>aside[aria-label="おすすめユーザー"])
,div[aria-label="タイムライン: 会話"] >div >div:has(h2) ~div /* もっと見つける */
{
display:none;
}
facebook はなかなかに難解というか腐ったというか、奇妙な構造をしていて、一筋縄では行きません。暫定です。
2025-03-22 更新
/* facebook */
/*
先頭のページのエンティティは div data-pagelet="FeedUnit_"
ユーザページのエンティティは div data-pagelet="TimelineFeedUnit_"
なので、
先頭だけ適用したければ div[data-pagelet^="FeedUnit_"]
両方とも適用したければ div[data-pagelet*="FeedUnit_"] と書けばよい
*/
div[data-pagelet^="FeedUnit_"]
{
/*
個別の投稿のdiv、に含まれるimgに サイズと輝度を指定したい
本文中の絵文字や いいねの種類を示す小さな画像には referrerpolicy 属性がない。属性指定で除外
*/
& img[referrerpolicy]
,& video
{
filter: grayscale(33%);/*100%で白黒。0%で素のまま*/
max-height: 200px;
object-fit: contain;
}
/*
画像を小さくしたのでその領域も小さくしたい...が、奇妙な作りで制御が難しい。
- 画像投稿の画像の枚数などによりレイアウトが変わる
- 階層的に100%を超えるサイズにしたり、戻したり
- レイアウト枠のdivには":r"か":R"から始まり":"で終わる IDがついている...ものが多いが
a から img の間に何も属性がない div がある
*/
& div[id^=":"] :has(img[referrerpolicy])
,& a div :has(img[referrerpolicy])
{
top: 0px;
max-height: 200px;
padding-top: 0%;
padding-bottom: 0%;
object-fit: contain;
}
/* 画像投稿は先頭の2枚?だけを表示 */
& div:has(>a[aria-label$="のようです"]):nth-of-type(n+3)
{
display: none;/**/
}
} /* end FeedUnit_ */
div[data-pagelet*="FeedUnit_"]
{
&:has(a[aria-label="リール動画"])/* リール動画(友人含む) */
,& :has(a[aria-label="作成"])/* リール */
,& :has(a[aria-label*="すべて見る"])/* 知り合いかも */
,& :has(span[class="x193iq5w xeuugli x13faqbe x1vvkbs x10flsy6 x6prxxf xvq8zen x1s688f x1fey0fg"])/* 広告. フォローする という文字列のspan*/
,& :has(a[aria-label*="ストーリーズを見る"])
,& :has(img[alt*="猫"])
{
display: none !important ;
}
} /* end FeedUnit_ */
/* ストーリーズ */
div[data-pagelet*="Stories"]
{
display: none;
}