タグ: CSS

YouTubeの動画タイトルを全文表示

Pixivの作品タイトルと同様、全文読めないのでStylusで解決。
タイトル部分の幅を広く、フォントを少し拡大し、太字解除。
アイコンは無駄に空いているチャンネル名の横に移動。

適用前
適用後

CSS適用

#details.ytd-rich-grid-media {
	flex-direction: column;
}

#meta.ytd-rich-grid-media {
	overflow-x: hidden;
	padding-right: 0;
}

/*動画タイトル*/
ytd-rich-grid-media[mini-mode] #video-title.ytd-rich-grid-media {
	overflow: visible;
	display: contents;
	font-size: 1.45rem;
	font-weight: 400;
}

h3.ytd-rich-grid-media {
	margin: 6px 0;
	padding-left: 4px;
}

/*チャンネルアイコン*/
#avatar-link.ytd-rich-grid-media {
	margin-top: -36px;
	order: 1;
}

/*チャンネル名・再生回数*/
ytd-video-meta-block,
.ytd-video-meta-block[meta-block] {
	flex-direction: column;
	margin-left: 48px;
	max-width: 210px;
}

/*メニュー*/
#menu.ytd-rich-grid-media {
	position: relative;
}

ytd-menu-renderer.ytd-rich-grid-media {
	position: absolute;
	top: unset;
	bottom: -2px;
	right: -8px;
}

/*バッジ*/
.title-badge.ytd-rich-grid-media,
.video-badge.ytd-rich-grid-media,
#buttons.ytd-rich-grid-media>*.ytd-rich-grid-media {
	margin: 6px 2px 2px 48px;
	position: absolute;
}

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

縦レイアウト派

OBSのUI詰まりすぎ問題

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

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

続きを読む OBSのUIを調整 (テーマ配布)

リンク下線を整える

テキストリンクの下線が英字のディセンダや( )でブツブツ途切れる。
気になるので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で下線を直接スタイリング可能になった。ただし線の太さは指定出来ない。

メイリオをやめろ

特にMac使い、Win用に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等で指定されている)。

続きを読む メイリオをやめろ

WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORE SERVER。
(特にWordPress限定ではない。)

VSCode設定

Sass編集

大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassを入れる。

コンパイル

拡張機能Live Sass Compilerを入れる。ステータスバーWatch Sassで監視開始。.sass/.scss保存時に.cssが自動生成される。

続きを読む WordPressのCSSを高速更新