$ SNS用StylusCSS

SNS の精神影響を減らすために、画像表示を小さくしよう

問題

SNSが自分の精神に影響を及ぼす。誰かの投稿に羨ましいなと心を乱したり、つい余計な一言をコメントしたくなったり。
実際に余計なことを発言してしまうと後悔する。自分の愚かさを反省するが、自分から出た言葉は取り消せないので、
くだらない投稿を繰り返して問題発言を「薄めようと」してしまったりする。悪循環だ。

推測原因

思うに 以下が精神に余計な影響を与える。

• SNSの画面設計にて画像サイズがでかすぎる。
• 自分が積極的に調べようとしてはいないことの表示が多い。

対策

専用アプリは使わず、ブラウザを使って閲覧する。広告ブロック拡張機能をインストールする。でもまだ足りない。

画像のサイズを小さく、色も落ち着いた色にしてみよう。

ブラウザの拡張機能で Stylus というものがある。これは CSS を閲覧者側で独自に定義して、
他人が作ったWebサイトの画面デザインを、自分の好みのものに変えてしまおうというもの。

ところが これはなかなかに大変。
他人が作ったWebサイトなので、htmlタグ構造を解析し、効果的に指定を行う必要がある。
作成者が変更をしたら追随する必要があり不毛な作業になる。
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;
}

リンクメモ

• tips:cssのセレクター