マーキング
https://gyazo.com/5166ea0d2ac938a949bd6d011268abd3
行頭にマークを付ける。
＃タグ や リンク とは異なる。
場所の印 として使うことを想定しているので、関連ページなどには影響しない。
さらに・・・
プロジェクト内の同じマークを検索する機能を追加する。
必ずしも分類や整理を要求するものではなく、印を付けた他の場所の抽出に使う。
マークがカテゴリとしてページになったりはしないが、インデックスにはなる（という主旨）。
ただし、マーキングでカテゴライズすることがダメという訳でもない。
「執筆途中」 「部外共有事項」 「要再検討」 「㊙取り扱い注意」 などの印として使ったりもする。
この場合、タグ添付した分類と似た機能になるが、ページ単位 か 行の場所 かの違いがある。
プロジェクト検索は検索結果がページ単位で列挙される。
ブラウザのページ内検索は、記載位置を巡回して検索結果が示される。
マークの検索は、この両方が使えるようにする。
カスタムマークとして任意の文字（文字列）を指定できる。
Font Awesome のアイコン文字を使うと、検索欄内で表示されない（豆腐化する）場合があるので非推奨。
絵文字を使うのが良いかもしれない。
🐸🌟🔥☀📝 😍🤩🤪😜😵💫😭💀💩 💥💦🔔💻💡📕📗📘📙🔖💼📁📂📌📍✂🔄 ▶ ◀ 🔽🔼🔅🔆❓🔴🟠🟡🟢🔵🟣🟤⚫⚪ 🟥🟧🟨🟩🟦🟦🟪🟫⬛⬜🔶🔷 🔺🔻💠🚩🏴 🔍🔎📷📸 🐞🪲 🌸🌻🌼🌷🌱🪴🌳🌿☘🍀 🍷🌐⛲🛴⚓🛟🚀 ⌚⏱⚡✨ 🎀🧿🎨💎📰🔑🔒 🔧🔗🛒⚠⛔🚫🔞🦋 🧡💛💚💙
マーキングで改行されない。マークの有無は本文のレイアウトに影響しない。
マークを付けた行に続けて本文を書くことも可能。
[<} 🐸] [<} ◎] [<} 🐕ここ掘れワンワン！]
動作
🐸
マークは、行頭（ページ左余白部分）に表示され、マウスホバーすると背景色が変わる。
マーク・サーチを行うユーザスクリプトを備える。
https://gyazo.com/0ad9fb98f7f0aeb8a3bb18c75c6b8b35
マウスホバーでまず背景色が緑色になる。
ユーザースクリプト（マーク・サーチのプログラム）がアクティブなら、ホバー状態を0.5秒維持すると、マーク記号の背景色が赤く変わる。この段階で、マークの記号文字がクリップボードにコピーされる。
赤く変わらないときは、ページリロードを行うことで、マーク・サーチのプログラムが機能する（ようになるはず）。
さらに、背景色が赤の状態を１.5秒間継続する（マウスじっとしてる）と、マーク記号をプロジェクト内検索する。
クリップボードは、ブラウザのページ内検索（Ctrl-F・Ctrl-V)でも使える。
使用するブラウザによっては、サイトにポップアップの送信やリダイレクトを許可するよう設定変更が必要かもしれない。
マークを表示するCSS。
code:style.css
position: absolute;
display: inline-block;
font-size: 20px;
font-weight: bold;
left: -32px;
top: -3px;
color: green; /* 表示位置、色、サイズはお好みで */
z-index: 1;
}
background-color: lightgreen; /* ホバーで緑色に背景色が変わる */
}
マウスホバーによるアクションのユーザースクリプト。 マーク・サーチをしないなら不要。
code:script.js
let timer1, timer2;
element.addEventListener('mouseenter', function() {
const textToCopy = this.innerText;
timer1 = setTimeout(() => {
navigator.clipboard.writeText(textToCopy); // クリップボードへマークをコピー
this.style.backgroundColor = 'red'; // 背景色を変更
timer2 = setTimeout(() => {
}, 1500); // 1.5秒 じっとしてたら検索
}, 500); // ホバーで赤くなるまでの時間 0.5秒
});
element.addEventListener('mouseleave', function() {
clearTimeout(timer1);
if (timer2) {
clearTimeout(timer2);
this.style.backgroundColor = ''; // 背景色の設定をクリア
}
});
});
待っていたら始まるインタラクション という風変わりなインターフェースを作ってみたかった（マがさした）。
不具合があるかもしれない。あしからず。
参考
UserCSS.icon
UserScript.icon