リンクを出典アイコンにするUserCSS
https://gyazo.com/e1eac65d64da3bb286d12139b7f1a3d0
用途
例
特徴
リンクを短く表示できる
(内部リンクの場合)双方向リンクとして使える
とてもいいyosider.icon
1つの出典内に関係ない複数の話題が含まれる場合、それらがリンクされてしまう
ページに画像を置かなくてもすむ
↑の「https://gyazo.com/63517e9c1611ddbf7af9d35e0ae6847c」が「アイコン記法で書く場合」の出典を示すために使われていると気づくのにちょっと時間かかったwyosider.icon
このページで提案している手法のことを指しているのかと思った
括弧()で囲んでみたtakker.icon
18:50:59 自動で括弧がつくように変更してみた
この手法自体について議論しているときにしか発生しない問題なのでまあいいか
example page that does not have an image.icon みたいに、画像がないとアイコンが長くなるyosider.icon
毎回画像を用意しなくていいのは便利yosider.icon
用意するとしてもabstractのスクショとかなのでぱっと見で意味がわからなかった
別の文字装飾記法と併用すれば、複数のアイコンを使い分けることもできる UserCSSなのでsettingsに書いておけばprojectに参加していない人にも適用される
できないこと
内部リンク記法の2 hop linkを無効にしつつ、同じタブで開けるようにする
出典を示したいけどリンクは作りたくないということはあまりないyosider.icon
改善アイデア
/icons/done.iconアイコンを上付き文字のように小さく表示する？ 上付きでなくてもサイズをもっと小さくするのは良いかもyosider.icon
2021-10-03 17:48:45 できた
/Icons2/すばら.iconyosider.icon
小さく表示するならカッコはいらないかもと思うんですが、どうでしょうか？yosider.icon
補足情報なんだな、というのは小さいことで伝わる
/icons/たしかに.icontakker.icon
でも代わりに左右に余白をいれないと狭い感じかも
padding: 0 2px;くらい？
paddingは指定しなくても良さそうtakker.icon
それなりに隙間が開いている
font-size: .8em;ならpadding: 0 1px;で良い気がしてきた（わからん）
小さすぎるとクリックしづらいことに気づいたyosider.icon
font-size: .8em;くらいがいいかも？
2021-10-04 09:59:51 してみたtakker.icon
上付き文字にすると、ホバーした時に文字が上下にずれる
小さく表示するなら上付き文字にしなくてもいいかもyosider.icon
カーソル行になる(.cursor-line)という意味でしょうかtakker.icon :not(.cursor-line)を外してみた。どうだろう？
ずれなくなったyosider.icon
/icons/よかった.icontakker.icon
文字が常時若干下にずれるのは仕方ないかyosider.icon
それは太字記法と同じ問題だし仕方ないtakker.icon
なるほどですyosider.icon
大きさを小さくするのではなく、文字の位置を上下できる
2021-11-28 18:39:19 ずれなくしたtakker.icon
なんでだろう？takker.icon
https://gyazo.com/5c4e33e591bcbf77a915f4333d79db91
vertical-alignではなくposition: relative; top:-0.5em;を使えば直りそう
直った
https://gyazo.com/eb98d2ae5a8facdbfb0cc1631b43abd0
/icons/助かる.iconyosider.icon
/icons/done.icon外部リンク記法にも対応する？
対応できないことはないし、対応したほうがより便利になるかもしれない
そちらのほうがより便利だ
2021/10/3 対応しました
/Icons2/すばら.iconyosider.icon
特定のサイトへのリンクの場合は、そのサイトのfaviconを出す
wikipediaならWマークにするとか
ちょっと難しいかも？
まあそのうちやってみるか
2022-02-05 19:20:28 wikipediaに対応させてみた
行リンクなどScrapboxのURLに対して使うとき、入力が少しだけ面倒yosider.icon
[や]が前後にあるとURLをリンクに変換してくれない
一旦]を消す手間が入る
[を入力（]も補完される）→. を入力→一旦]を消す→URL貼り付け→]を入力
あ、それは[.<Space><Space><Left><C-V>で解決できますtakker.icon
[. [URL] ]という形にする
これならURLを貼り付けてもちゃんとリンクに変換されます
後ろにスペースが1つ入りますが、フォントサイズが小さいので気になりません
うちのproject/takker でよく使っているので参考にしてみて下さい なるほど、その手があったかyosider.icon
全然関係ないけどキー記法がVimmerの書き方だkuuote.icon
けどVimmer以外に伝わるのだろうか？
https://gyazo.com/99d03dccea6beaee733f8077df2dd04a
嬉しい副作用
code
差し替え可能
./でアイコンを別のものにできる
全体設定
code:style.css
.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.5em;
}
(optional)()で囲む
code:style.css.disabled(css)
.line:not(.cursor-line) .deco-\.::before {
content: "(";
}
.line:not(.cursor-line) .deco-\.::after {
content: ")";
}
[. ]内のリンクを消す
code:差分.diff
+ .line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
- .line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span {
code:style.css
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
display: noneとは何が違う？yosider.icontakker.icon
display:noneはその要素の存在を描画から抹消しますyuki_minoh.icon
ユーザーは一切のインタラクションができなくなり、描画ボックスもないものとして扱われます
JavaScriptを使えばアクセスできますが、ユーザーはクリックや選択などの一切の関与ができなくなります
DOMからは抹消されませんが、描画からは抹消される、ということです
このルールは、この記法の効果がかかったテキストを子供に持つ要素を指定しています
Scrapboxには、たとえば文字選択など、テキストとユーザーのインタラクションを仮定した機能があります
その描画ボックスを抹消してしまうと例えばテキストを選択したときなどにイベントが発生せず困るということです
代わりにtext-indentであれば、描画ボックスを残しつつ、本来の表示を隠すことも可能です
今回は、幅ゼロの描画ボックスを「描画」しています
まぁ:not(.cursor-line)で、カーソルを合わせると効果がなくなるように設定されているので、違いはなかなかわかりにくいだろうなぁと思いますｗyuki_minoh.icon
なるほどyosider.icon
カーソルを合わせると効果がなくなるように指定するのも、diplay:noneを使わないのも、設定者の安全策（ユーザーへの配慮）といえると思います
理解するための極端な例がほしいなら、width:100px;とか指定してみれば、インデントと抹消の違いが一目瞭然です
結局このUserCSSでは機能的な違いはない？
ですねyuki_minoh.icon
行リンクのIDは表示されるよう、↑の効果を打ち消しておく
code:差分2.diff
+ .line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
- .line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index ~ span {
code:style.css
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
行idの直前に#をつける
code:style.css
.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
content: "#";
}
解説書いてみましたtakker.icon
感謝です！yosider.icon
すごい発想で草
/scrasobox/madobe.iconさんはどこでこのテクニックを知ったのだろうか
アイコンを設定する
既定の設定
code:style.css
.line .deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
/* padding: 0 1px; */
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
カスタム設定
/を入れるとノートみたいなアイコンになる
カスタム設定の例として入れただけ
code:style.css
/* 斜体を取り消す */
.line .deco-\..deco-\/ {
font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
font-weight: 400;
content: "\f15c";
}
特定のリンクへのアイコンを変える
なんか複雑な感じになってきたyosider.icon
「リンクを出典アイコンにするUserCSS: リンクの最初の3文字を表示+特定サイトではfaviconを出す」みたいなページを作って新しく書くのもありかも
gitで管理したほうがいいか
読もうとしたけど複雑で挫折してしまったw基素.icon
昔の情報は別ページに切り出した方が読みやすそう
出典リスト