SNSの画像表示を小さくしよう
created 2024-08-17 modified 2024-09-21
$ SNS の精神影響を減らす
(SNS の精神影響を減らすために その1)
画像のサイズを小さく、色も落ち着いた色にしてみよう。
ブラウザの拡張機能で Stylus というものがある。これは CSS を閲覧者側で独自に追加定義して、
他人が作ったWebサイトの画面デザインを、自分の好みのものに変えてしまおうというもの。
ところが これはなかなかに大変。
他人が作ったWebサイトなので、htmlタグ構造を解析し、効果的に指定を行う必要がある。
Webサイト作成者が変更をしたら追随する必要があり不毛な作業になる。
CSS の仕様はなかなかにややこしい。
それでも、やる。
SNSで「事故」を起こして「自己嫌悪」しないように、アクティブ・セーフティーの行動を取ろう。
Stylusの基本は割愛して CSS をここにメモしていく。
Twitter [X]
2024-08-23 更新
/*
twitter
個々のSNSリンク要素（投稿の引用、外部リンクなど）はこれを持っているらしい
div[aria-labelledby*="id"]
*/
/* 画像自体を小さくする */
div[aria-labelledby*="id"] :has(>img)
{
max-height: 140px;
max-width: 140px;
filter: grayscale(50%);
}
/* 画像を含む領域を小さくする */
div[aria-labelledby*="id"] :has(div[aria-label*="埋め込み動画"])
, div[aria-labelledby*="id"] :has(div[aria-label*="画像"])
, div[aria-labelledby*="id"] :has(img)
{
max-height: 140px;/**/
}
/* 自分の投稿ボタンを消す */
*[data-testid="toolBar"] {
display:none;
}
/* 受動的な話題を消す */
div[aria-label="タイムライン: トレンド"]
, div:has(>aside[aria-label="おすすめユーザー"])
, div[aria-label="タイムライン: 会話"] >div >div:has(h2) ~div /* もっと見つける */
{
display:none;
}
facebook はなかなかに難解というか腐ったというか、奇妙な構造をしていて、一筋縄では行きません。暫定です。
2024-08-18 更新
/* facebook */
/* 個別の投稿のdiv、に含まれるimgに サイズと輝度を指定したい */
/* 本文中のfacebook固有絵文字は span>img の構造。 div>img (div直下のimg) とすることで除外 */
/* いいね の種類を示す小さな画像は referrerpolicy 属性がない。属性指定で除外 */
div[data-pagelet^="FeedUnit_"] div > img[referrerpolicy]
{
filter: grayscale(50%);
height:100%;
max-height: 150px;
object-fit: contain; /*cover;*/
/*display: none;/**/
}
/*
画像を小さくしたのでその領域も小さくしたい...が、奇妙な作りで制御が難しい。
- 画像投稿の画像の枚数などによりレイアウトが変わる
- 階層的に100%を超えるサイズにしたり、戻したり
- aタグの使用が特徴的
- レイアウト枠のdivには":"から始まり":"で終わる IDがついている
*/
div[data-pagelet^="FeedUnit_"] div[id^=":r"] div :has(a[attributionsrc]),
div[data-pagelet^="FeedUnit_"] a[attributionsrc] div :has(img),
div[data-pagelet^="FeedUnit_"] div[id^=":r"] div :has(img),
div[data-pagelet^="FeedUnit_"] div[id^=":r"] div :has(video) {
max-height: 150px;/**/
/*padding-top: 0%;*/
inset: 0;
}
/* ストーリー */
div[data-pagelet="Stories"]
{
display: none;
}