特定のリンクにアイコンをつけるUserCSS
URLに応じてアイコンを変えるUserCSS
外部リンクを区別するUserCSSとリンクを出典アイコンにするUserCSSの双方で用いる
重複する設定があるため、別のページにした
元ネタ：/noratetsu/●特定のリンクにfaviconをつける
共通設定
外部リンクを区別するUserCSSを無効にする
流石に2つもアイコンがついているとうざい
code: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;
}
先頭にアイコンをつける
code: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; */
}
リンクを出典アイコンにするUserCSS
個別の設定
Font Awesomeを常時使えるようにするUserCSSを入れている前提で書いているので、font-familyは省略しました
アイコンの位置がちょっと微妙かもtakker.icon
直していただけると嬉しいです
PDF
サンプル
展開ヘルプ
Helpfeelのアイデアは増井俊之.iconさんの論文展開ヘルプ が元になっている
code:style.css
.line a.link:not(.icon)href$=".pdf"::before {
content: '\f1c1';
font-weight: 400; /* use Regular Style */
margin-right: 1px;
}
Github
サンプル
progfay/scrapbox-parser
これhttps://gist.github.com/yuiseki/60da2a5b743c4ce835d7b75c4ca89b33 を使うと、訪問したサイトのOGP画像を勝手にGyazoってくれるらしい
便利そうなので使ってみたい
code: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/ご注文はうさぎですか?
code: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の優先度を上げるために付けている
code: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
サンプル
https://www.amazon.co.jp
code: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
サンプル
code: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; /* アイコンとリンク文字の間隔（隙間） */
}
テンプレート
code: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.icon
やっぱりそうかなtakker.icon
先頭につけると、アイコンが装飾多寡に思えた
先頭と末尾の両方にアイコンが現れることになる
とはいえ先頭の方が統一感があるしわかりやすそうなのも確か
2022-02-06 19:21:38 先頭にしました
リンクを出典アイコンにするUserCSSとの連携テスト
意識（いしき、Consciousness）は、一般に、「起きている状態にあること（覚醒）」または「自分の今ある状態や、周囲の状況などを認識できている状態のこと」を指すhttps://ja.wikipedia.org/wiki/意識
あり？smartphoneだとアイコンが表示されない？
明日以降直すかtakker.icon
PCだけど表示されてないyosider.icon
Firefoxでは見えてChromeからだと見えないtakker.icon
/vim-jp-emojis/doushite.icon
18:03:42 原因：font-family: "Font Awesome 5 Brands"が何故かChromeで無効になっていた
これを追加すれば表示される
フォント周りめんどくさいな
もうglobalに設定しちゃえ
した
Font Awesomeを常時使えるようにするUserCSS
Chrome 97.0.4692.99（Official Build） （arm64） だと見えてないです基素.icon
後でアプデしてみよう
ちゃんとテストしていませんでしたtakker.icon
確かに見えていない
Chrome for Androidからも見えない
dev toolでCSSを書き換えたときはうまくいったんだけどな……
ご無理なさらずー。多少崩れていても自分は気にならないです基素.icon
2022-02-13 13:46:38 解決しましたtakker.icon
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にすることで解決した
/icons/やはり天才か.iconyosider.icon
Settings.icon
UserCSS.icon