カードのdescription要素に条件を指定して一致していたらcssを適用するUserScript

https://gyazo.com/4af73311a12744c1e66e6441b0d66797

code:script.js

(() => {

function applyOpacity() {

// .description内のテキストを見て👉があったら目立たせないようにスタイル変更する

document.querySelectorAll('li.page-list-item').forEach(li => {

if (li.dataset.opacityApplied) return; // 適用済みならスキップ

const spans = li.querySelectorAll('.description span');

if (hasEmoji) {

li.style.opacity = '0.5';

li.dataset.opacityApplied = 'true'; // 適用済みフラグをセット

}

});

}

// 初回実行

applyOpacity();

// ページ遷移・レイアウト変更時に再実行

scrapbox.on('layout:changed', applyOpacity);

scrapbox.on('page:changed', applyOpacity);

// DOM追加を監視してカード継ぎ足されたら発火するように

const observer = new MutationObserver(() => {

applyOpacity();

});

observer.observe(document.body, {

childList: true,

subtree: true,

});

})();

内容

左・真ん中の薄いカードが該当し、目立たないようにしている

左のカードの意図:

1. 「検索欄に入力して使ったワード」をタイトルに設定

検索ワードとわかるように、プレフィックスとして「🔍」を付加している

2. 「辿り着きたかったページ」を本文に書いてリンクで繋げる

ページ内の記載は自由

真ん中のカードの意図:

1. 「表記ゆれワード」をタイトルに設定

このまま使っても違和感はないのでタイトルに装飾はしない

これが重要

2. 「本来使いたいワード」を本文に書いてリンクで繋げる

本当はこっちを使ったほうが良いよとわかるように、プレフィックスとして「👉」を付加している

右のカードはデザインいじっていないデフォルトのもの

Scrapboxのページ構成的に左のカードの真ん中のカードでやることが異なる

左のカードはUserCSSで比較的簡単に実現できる

code:css

opacity: .5;

}

真ん中のカードはCSSで判定するのは難しい

そういう作業はJavaScript = UserScriptでやる

履歴