外部リンクを区別するUserCSS
from Settings
外部リンク記法を区別するUserCSS
/takker/外部リンクを区別するUserCSS
/noratetsu/●別タブで開くリンクにアイコンを添えるの設定も参考にした
テスト
test
https://google.com
アイコンを付けないリンク
scrapbox.ioへのリンク
井戸端の参加者一覧
リンク付き画像
2022-02-07 18:48:52 Chrome for Androidで確認したらアイコンが出てしまっていた
リンクつき画像をクリックしたときの動作が変わった影響だろうか？
リンク付き画像のみ、spanタグにclass="model-image"が付与されていない
spanやその下のaタグからは外部リンクと判別できない？
:has()があればaが子にimgを持っているかどうかで判別できるが…
https://i.gyazo.com/da78df293f9e83a74b5402411e2f2e01.png https://google.com
cf. リンクなし画像
https://i.gyazo.com/da78df293f9e83a74b5402411e2f2e01.png
location記法
N35.6576943,E139.7452035,Z16 東京タワー
test:/icons/すごい.icon
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"])::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 0.8rem;
content: ' \f35d';
display: inline-block;
}
aタグではなく、aの子のspanの最後尾につけてみる
code:style.cssx
/* 外部リンクにiconをつける */
.line span:not(.pointing-device-map) > a.link:not([href^="https://scrapbox.io"]) span:last-of-type::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 0.8rem;
content: ' \f35d';
display: inline-block;
}
https://gyazo.com/d56b9ec6fae249615d0e872c42a8849d
おかしくなった
:not(.empty-char-index)なspanのうち最後尾のものをセレクトできたらいける…？
css selectors - How do I select the "last child" with a specific class name in CSS? - Stack Overflow
span.empty-char-indexは空白をもっているので:emptyも使えない
html - CSS selector for empty or whitespace - Stack Overflow
先頭にサイトのアイコンをつけているのは別のUserCSS
特定のリンクにアイコンをつけるUserCSS
みたいなの
2021/7/5
Font Awesomeについてイマイチ良く分かっていないのですが、Font Awesome 5 Freeからは\f08eがPRO版じゃないと使えないっぽい？imo.icon
だとしたら適当に代わりのアイコンにするとかかしら
kamon icon（nota製アイコン）のlink-onなど?blu3mo.icon
（kamonをどう使うのかよく分かってない）
me tooimo.icon
ちょい調べてみますが先に出来る方いらっしゃったらお願いいたします🙏
/kembo/Scrapbox のアイコンを使い回すなど?
\f35dにexternal-link-altとかいうのがあったのでとりあえずそいつを指定しました
Settings.icon
UserCSS.icon