リンクを出典アイコンにするUserCSS
用途
例
意識とは一般に、覚醒していること、または自分の状態や周囲の状況を認識できていることを指す✅️リンクを出典アイコンにするUserCSSでリンクをクリックできない問題#6157eecc1280f00000574cdb
クオリアとは、我々の意識にのぼってくる感覚意識やそれにともなう経験のことを指すhttps://bsd.neuroinf.jp/wiki/%E3%82%AF%E3%82%AA%E3%83%AA%E3%82%A2
特徴
リンクを短く表示できる
廉価版リンクのエイリアス表記として使える
(内部リンクの場合)双方向リンクとして使える
アイコン記法で出典を参照する方法ではリンクできなかった
とてもいい
アイコン記法を片方向リンクとして使えるのがメリットなこともあるなあと思う
1つの出典内に関係ない複数の話題が含まれる場合、それらがリンクされてしまう
ページに画像を置かなくてもすむ
アイコン記法で書く場合アイコン記法で出典を参照も画像無しで使えるが、短く表示できないのでメリットがなくなる
↑の「
」が「アイコン記法で書く場合」の出典を示すために使われていると気づくのにちょっと時間かかったw
」が「アイコン記法で書く場合」の出典を示すために使われていると気づくのにちょっと時間かかったwこのページで提案している手法のことを指しているのかと思った
括弧
() で囲んでみた18:50:59 自動で括弧がつくように変更してみた
この手法自体について議論しているときにしか発生しない問題なのでまあいいか
毎回画像を用意しなくていいのは便利
用意するとしてもabstractのスクショとかなのでぱっと見で意味がわからなかった
行リンクの場合は、行IDの一部も表示する
アイコン記法で出典を参照する方法では行リンクはできなかった
別の文字装飾記法と併用すれば、複数のアイコンを使い分けることもできる
UserCSSなのでsettingsに書いておけばprojectに参加していない人にも適用される
できないこと
内部リンク記法の2 hop linkを無効にしつつ、同じタブで開けるようにする
この点はアイコン記法で出典を参照する方法のほうが強い
出典を示したいけどリンクは作りたくないということはあまりない
参照が多いと出典のページで大きすぎるリンクの問題が発生することがある
改善アイデア
上付きでなくてもサイズをもっと小さくするのは良いかも
2021-10-03 17:48:45 できた
小さく表示するならカッコはいらないかもと思うんですが、どうでしょうか？
補足情報なんだな、というのは小さいことで伝わる
でも代わりに左右に余白をいれないと狭い感じかも
padding: 0 2px; くらい？paddingは指定しなくても良さそう
それなりに隙間が開いている
font-size: .8em; なら padding: 0 1px; で良い気がしてきた（わからん）小さすぎるとクリックしづらいことに気づいた
font-size: .8em; くらいがいいかも？2021-10-04 09:59:51 してみた
上付き文字にすると、ホバーした時に文字が上下にずれる
小さく表示するなら上付き文字にしなくてもいいかも
:not(.cursor-line) を外してみた。どうだろう？これはテストtestです
ずれなくなった
文字が常時若干下にずれるのは仕方ないか
それは太字記法と同じ問題だし仕方ない
なるほどです
vertical-align の値リンクを出典アイコンにするUserCSS#61596bd91280f00000737957 を微調節すればもう少しずれを小さくできるかも自プロジェクトではvertical-align外してるけど、小さくすることもできるのか
大きさを小さくするのではなく、文字の位置を上下できる
2021-11-28 18:39:19 ずれなくした
from 笑い声
リンクを出典アイコンにするUserCSSをアイコン記法と一緒に使うとアイコンも上付きになってしまうのか
なんでだろう？
vertical-alignの仕様っぽい？
vertical-align ではなく position: relative; top:-0.5em; を使えば直りそう直った
対応できないことはないし、対応したほうがより便利になるかもしれない
ただ外部リンクは参考文献ごとにページを作成する方法でwrapしてほしい
そちらのほうがより便利だ
2021/10/3 対応しました
✅️特定のサイトへのリンクの場合は、そのサイトのfaviconを出す
wikipediaならWマークにするとか
ちょっと難しいかも？
まあそのうちやってみるか
2022-02-05 19:20:28 wikipediaに対応させてみた
行リンクなどScrapboxのURLに対して使うとき、入力が少しだけ面倒
[ や ] が前後にあるとURLをリンクに変換してくれない一旦
] を消す手間が入る [ を入力（ ] も補完される）→ . を入力→一旦 ] を消す→URL貼り付け→ ] を入力あ、それは
[.<Space><Space><Left><C-V> で解決できます [. [URL] ] という形にするこれならURLを貼り付けてもちゃんとリンクに変換されます
後ろにスペースが1つ入りますが、フォントサイズが小さいので気になりません
うちのproject/takker でよく使っているので参考にしてみて下さい
なるほど、その手があったか
全然関係ないけどキー記法がVimmerの書き方だ
けどVimmer以外に伝わるのだろうか？
ScrapBubbleでも読めた
嬉しい副作用
以下、2024-05-03までの実装
これ以降の更新はリンクを出典アイコンにするUserCSS：実装ページで行う
code
/scrasobox/チェックボックスになるタグ 2をベースに作った
文字装飾記法として
. を使っている差し替え可能
./ でアイコンを別のものにできる全体設定
style.css.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.5em;
}(optional)
() で囲むstyle.css.disabled(css).line:not(.cursor-line) .deco-\.::before {
content: "(";
}
.line:not(.cursor-line) .deco-\.::after {
content: ")";
} [. ] 内のリンクを消すtext-indentではるか地平線の彼方にふっとばすことで、実質的に非表示にしている
2022-02-05 18:58:39 リンクを出典アイコンにするUserCSS: リンクの最初の3文字を表示するバージョンをあてる
差分.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 {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;
}行リンクのIDは表示されるよう、↑の効果を打ち消しておく
2022-02-05 19:01:22 リンクを出典アイコンにするUserCSS: リンクの最初の3文字を表示するバージョンをあてた
差分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 {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の直前に
# をつけるstyle.css.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
content: "#";
}
上2つのブロック(~ リンクを出典アイコンにするUserCSS#6157eaf41280f00000ad87ae)は何をやってるんでしょうか？
解説書いてみました
感謝です！
すごい発想で草
アイコンを設定する
既定の設定
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";
}
カスタム設定
/ を入れるとノートみたいなアイコンになるカスタム設定の例として入れただけ
style.css/* 斜体を取り消す */
.line .deco-\..deco-\/ {
font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
font-weight: 400;
content: "\f15c";
}特定のリンクへのアイコンを変える
(特定のリンクにアイコンをつけるUserCSSに統合しました)
なんか複雑な感じになってきた
「リンクを出典アイコンにするUserCSS: リンクの最初の3文字を表示+特定サイトではfaviconを出す」みたいなページを作って新しく書くのもありかも
gitで管理したほうがいいか
読もうとしたけど複雑で挫折してしまったw
昔の情報は別ページに切り出した方が読みやすそう
コード周りは一旦このままにして、新しい実装を別ページに書くことにしました
このコードは文芸的プログラミングの限界の一例として置いときます
出典リスト