generated at
特定のリンクにアイコンをつけるUserCSS
URLに応じてアイコンを変えるUserCSS
重複する設定があるため、別のページにした

共通設定
流石に2つもアイコンがついているとうざい
style.css
div.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):is( [href$=".pdf"], [href^="https://twitter.com"], [href^="https://github.com"], [href^="https://raw.githubusercontent.com"], [href^="https://gist.github.com"], [href^="https://ja.wikipedia.org"], [href^="https://en.wikipedia.org"], [href^="https://www.amazon.co.jp"], [href^="https://amazon.co.jp"], [href^="https://youtube.com/"], [href^="https://www.youtube.com/"], )::after { display: none; }
先頭にアイコンをつける
style.css
.line span:not(.deco-\.) > span > a.link:is( [href$=".pdf"], [href^="https://github.com"], [href^="https://raw.githubusercontent.com"], [href^="https://gist.github.com"], [href^="https://ja.wikipedia.org"], [href^="https://en.wikipedia.org"], [href^="https://www.amazon.co.jp"], [href^="https://amazon.co.jp"], [href^="https://youtube.com/"], [href^="https://www.youtube.com/"], )::before { display: inline-block; width: 1em; /*16px;*/ height: 1em; /*16px;*/ vertical-align: -1px;/*-3px;*/ text-align: center; background-size: contain; background-repeat: no-repeat; /* margin-right: 2px; */ }

個別の設定
Font Awesomeを常時使えるようにするUserCSSを入れている前提で書いているので、 font-family は省略しました
アイコンの位置がちょっと微妙かもtakker
直していただけると嬉しいです
PDF
サンプル
Helpfeelのアイデアは増井俊之さんの論文展開ヘルプ が元になっている
style.css
.line a.link:not(.icon)[href$=".pdf"]::before { content: '\f1c1'; font-weight: 400; /* use Regular Style */ margin-right: 1px; }
Github
サンプル
これhttps://gist.github.com/yuiseki/60da2a5b743c4ce835d7b75c4ca89b33 を使うと、訪問したサイトのOGP画像を勝手にGyazoってくれるらしい
便利そうなので使ってみたい
style.css
:is(.line, .line .deco) a.link:is( [href^="https://github.com"], [href^="https://raw.githubusercontent.com"], [href^="https://gist.github.com"], )::before { content: '\f09b'; font-weight: 400; margin-right: 1px; }
Wikipedia
サンプル
>『ご注文はうさぎですか?』は、日本の漫画家であるKoiによる4コマ漫画作品。略称は「ごちうさ」。『まんがタイムきららMAX』にて2010年12月号掲載の後、2011年3月号より連載中。https://ja.wikipedia.org/wiki/ご注文はうさぎですか?
style.css
:is(.line, .line .deco) a.link:is( [href^="https://ja.wikipedia.org"], [href^="https://en.wikipedia.org"], )::before { content: '\f266'; font-weight: 400; margin-right: 3px; }
リンクを出典アイコンにするUserCSSを使った場合は、wikipediaのタイトルだけを表示する
URLは https://ja.wikipedia.org/wiki/:pagename という形式なので、先頭から30文字だけ非表示にすればいい
.char-index はCSSの優先度を上げるために付けている
style.css
.line .deco-\. a.link:is( [href^="https://ja.wikipedia.org"], [href^="https://en.wikipedia.org"], ) span.char-index { display: inline-block; width: 0; text-indent: -9999px; } .line .deco-\. a.link:is( [href^="https://ja.wikipedia.org"], [href^="https://en.wikipedia.org"], ) span.char-index:nth-of-type(30) ~ span.char-index { display: inherit; width: inherit; text-indent: inherit; }
Amazon
サンプル
style.css
:is(.line, .line .deco) a.link:is( [href^="https://www.amazon.co.jp"], [href^="https://amazon.co.jp"], )::before { content: '\f270'; font-weight: 400; margin-right: 1px; }
YouTube
サンプル
style.css
:is(.line, .line .deco) a.link:is( [href^="https://youtube.com/"], [href^="https://www.youtube.com/"], )::before { content: '\f167'; /* Font Awesomeのアイコンの文字コード */ font-weight: 400; /* 通常はnormal(400), SOLIDアイコンはbold(700以上) */ margin-right: 1px; /* アイコンとリンク文字の間隔(隙間) */ }
テンプレート
css
:is(.line, .line .deco) a.link:is( [href^="https://<ドメイン>"], /* 複数記述できる */ )::before { content: '\f266'; /* Font Awesomeのアイコンの文字コード */ font-weight: 400; /* 通常はnormal(400), SOLIDアイコンはbold(700以上) */ margin-right: 1px; /* アイコンとリンク文字の間隔(隙間) */ }
これの他にも、共通設定にURLを追加しなければならない。

Twitterリンクのアイコンに従がうとすれば、リンクの頭にアイコンをつけるべきでは?Mijinko_SD
やっぱりそうかなtakker
先頭につけると、アイコンが装飾多寡に思えた
先頭と末尾の両方にアイコンが現れることになる
とはいえ先頭の方が統一感があるしわかりやすそうなのも確か
2022-02-06 19:21:38 先頭にしました

> 意識(いしき、Consciousness)は、一般に、「起きている状態にあること(覚醒)」または「自分の今ある状態や、周囲の状況などを認識できている状態のこと」を指すhttps://ja.wikipedia.org/wiki/意識
あり?smartphoneだとアイコンが表示されない?
明日以降直すかtakker
PCだけど表示されてないyosider
Firefoxでは見えてChromeからだと見えないtakker
doushite
18:03:42 原因: font-family: "Font Awesome 5 Brands" が何故かChromeで無効になっていた
これを追加すれば表示される
フォント周りめんどくさいな
もうglobalに設定しちゃえ
した
Chrome 97.0.4692.99(Official Build) (arm64) だと見えてないです基素
後でアプデしてみよう
ちゃんとテストしていませんでしたtakker
確かに見えていない
Chrome for Androidからも見えない
dev toolでCSSを書き換えたときはうまくいったんだけどな……
ご無理なさらずー。多少崩れていても自分は気にならないです基素
2022-02-13 13:46:38 解決しましたtakker
Chromeだと::beforeなどの疑似要素に親要素からのCSSが継承されない
このため font-family の設定が引き継がれず、アイコンが表示されなかった
リンクを出典アイコンにするUserCSS#61596bb01280f00000737949 Font Awesome 5 Brands を追加することで解決した
.line a.link より .link .deco-\. a.link のほうがCSSセレクタの優先順位が高い
このページのCSSで決めたアイコンではなく、リンクを出典アイコンにするUserCSSのdefault iconしか表示されない原因はこれ
.line .deco a.link にすることで解決した
やはり天才かyosider

Settings
UserCSS