CSS – NILX.ORG

pixivの作品タイトルを全文表示

タイトルが15字程度で切れ、カーソルを合わせてもツールチップは出ない。
ユーザビリティが最悪なのでStylusで解決する。

CSS適用

.cTvdTb,
.dpYXxb {
	white-space: normal;
}

CSS Stylus Webブラウズ拡張機能

OBSのUIを調整 (テーマ配布)

OBSのUI詰まりすぎ問題

高DPI非対応で、元々狭いUIフォントが小さい上に字詰めされて凄い事になっている。全てに余白が無く、一部のみ枠線があり、不規則な配色(選択中のボタンは白、タブは黒、テキストのホバーは青)。

テーマCSSの編集で何とかする。

CSS OBS

リンク下線を整える

テキストリンクの下線が英字のディセンダや( )でブツブツ途切れる。
気になるのでCSSで調整。

CSS追加

a {
	text-decoration-skip-ink: none;
	text-underline-offset: 2px;
	text-decoration-color: #999;
}

`text-decoration-skip-ink: none`	下線を繋げる
`text-underline-offset:` _px	下線の位置を下げる
`text-decoration-color:` #___	下線の色を変える

従来はtext-decoration: noneした上でborder-bottomを付けていたが、CSS3で下線を直接スタイリング可能になった。ただし線の太さは指定出来ない。

CSS Web制作

メイリオをやめろ

特にMac使い、Windows用にfont-family: Meiryo, "メイリオ"を指定するな。今は游ゴシックがあるのだから余計な事をしないでくれ。游ゴシックも”Medium”無しでは細すぎるのでとにかく気安く指定するんじゃない。

と唸りながらStylusでメイリオサイトにfont-family: "Hiragino Kaku Gothic Pro" !important;を設定する事に疲れ、@font-faceで全てのメイリオをヒラギノ角ゴにしてやろうと思った。

CSS適用

@font-face {
	font-family: "メイリオ";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "Meiryo";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "ＭＳ Ｐゴシック";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

@font-face {
	font-family: "MS P Gothic";
	src: local("Hiragino Kaku Gothic Pro W3");
	src: local("Yu Gothic Medium");
	src: local("Noto Sans JP");
}

それぞれsrcは任意の一行に絞る。
ついでにMS Pゴシックも入れた(価格.com等で指定されている)。

効かない

游ゴシックは表示されるが、ヒラギノ角ゴやNoto Sans等が表示されない。

原因

chrome://flagsから#font-src-local-matchingが削除され、使用出来るフォントの範囲が制限されている。

参考:
Chromeのfont-faceでlocalのフォントが読み込めない問題の解決方法 (Windows) – Qiita
Chrome 84 で font-face が効かなくなった　のこと

解決方法

フォントファイルを右クリック > すべてのユーザーに対してインストール(要管理者権限)。
その前に一度アンインストールする。
その前にフォント使用中のソフトを終了する。
システムフォントの場合は2回アンインストールと再起動する。
Adobe Fontsやmojimo等、サブスクフォントは使えない。
……。

メイリオをやめろ。

CSS Font Stylus Webブラウズ拡張機能