●別タブで開くリンクにアイコンを添える
対象=別窓で開くリンク全て
Scrapbox外へのリンク
他のプロジェクトへのリンク
自プロジェクト内でもプロジェクト名を明記した場合のページリンク
style.css.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
.line span > a.page-link[target="_blank"]::after {
font-family: 'Font Awesome 5 Free';
content: ' \f360';
font-weight: 900;
font-size: 0.9rem;
padding-right: 0.5rem;
display: inline-block;
}
.line span > a.page-link[href^="/"]::after
によって、Scrapboxのページリンク(下線がないリンク)のうち、「/」で始まるリンクを対象に加えている。
アイコンが大きいと目立って気になるので少し小さくした。
FontAwesomeのリンクアイコンが表示できなくなったので修正。(2021/07/06)
経緯
外部リンクに関連するアイコン
なんとなくこちらを採用
元のものと近いのはこちら
右側に余白がないのでpadding設定
リンクのhrefが変わった?ことによってページリンク全部に外部リンクアイコンが表示されていたのを修正。(2022/03/28)
Before: .line span > a.page-link[href^="/"]::after
After: .line span > a.page-link:not([href^="/noratetsu/"])::after
注意 "/noratetsu/"
の部分に自分のプロジェクト名を入れる必要あり
単純にtarget属性を使えばいいと気づいたので修正。(2022/09/22)
備考
別タブで開くリンク用アイコンは非表示
最初のバージョン
old.css.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
.line span > a.page-link[href^="/"]::after {
font-family: 'FontAwesome';
content: ' \f08e';
font-size: 0.8rem;
display: inline-block;
}