Google検索結果でスーパードラッグ(リンクのドラッグ)を使おうとすると「Googleレンズで画像を検索」が出てきて妨害される対策。いつものStylus追加。
.ea0Lbe {
display: none;
}タグ: CSS
class指定付きnth-child
指定クラスを持つ要素の内のn番目、奇数・偶数個などの条件で装飾する。
課題
SNSの投稿の背景色を交互に変えたい。
兄弟要素が投稿のみの場合はdiv.xxx:nth-of-type(odd)や:nth-child(odd)で奇数の投稿を指定可能。
(odd又は2n+1で奇数、even又は2nで偶数)
投稿の間に何らかの要素が入る場合、カウントは兄弟要素全てが対象となりdiv.xxxの奇数は取れない。
(div.nth-of-typeは兄弟要素のdivがカウント対象、div:nth-childは全ての兄弟要素がカウント対象)
Calckeyに全ユーザ用CSSを適用する
Calckey自鯖の全ユーザにカスタムCSSを反映させる。
コントロールパネルに機能追加されるまでの暫定対応。
自分のみ適用したいCSSはChrome拡張機能StylusやCalckeyユーザ設定のカスタムCSSを使用する
構築と基本設定 身内用Calckey鯖を無料で立てる
CSS作成
- CalckeyのカスタムCSS機能はBetterDiscordの様にライブプレビュー出来ないので、Stylusで作成する
- 適用URLを追加して他のCalckeyサーバにも使える (Misskeyには使用不可)
!importantをつけまくる
WordPressで定義リストdlを使う
2カラム・内容に応じてサイズ可変のリストを、スペース連打やテーブルを使わずに作りたい。
dl(定義リスト)のグリッド化で実装。
- 肉
- 食べる
- 野菜
- 食べない
<dl class="grd">
<dt>肉</dt>
<dd>食べる</dd>
<dt>野菜</dt>
<dd>食べない</dd>
</dl>dl.grd
display: grid
grid-template-columns: max-content 1fr
column-gap: .5emシンプルで理想的だが、WordPressで使えるリストブロックはol、ulのみ。dlを作成出来るプラグインを探す。
olの連番をcounter関数で表示
olの連番のピリオドを消す為、list-styleではなくcontent: counter()での表示にした。
CSS追加
liにcounter-increment: カウンタ名、li::beforeにcontent: counter(カウンタ名)を指定する。
リンクにサイトアイコンを表示
CSSの疑似要素でリンクにサイトアイコンを付ける。
URLで判別する為、よく使うリンク先をいくつかCSSに記載しておく。
アイコンDL
- GitHub
GitHub Logos and Usage > Download Invertocat logo - BOOTH
プレスキット – ピクシブ株式会社 > ピクシブプロダクトロゴ > ダウンロード > BOOTH - note
ロゴデータ – noteヘルプセンター > ロゴデータ・ガイドラインのダウンロード - Qiita
デザインガイドライン | Qiita ヘルプ > ダウンロード > Qiita > PNG - はてなブログ
はてなブログ – Hatena Brand Resources > ロゴデータをダウンロード
※余白が大きいのでCSS側でサイズ調整 - Twitter
Twitterについて | Twitterロゴ、ブランドガイドライン、ツイートツール > Twitterロゴ > ダウンロード
YouTubeの動画タイトルを全文表示
Pixivの作品タイトルと同様、全文読めないのでStylusで解決。
タイトル部分の幅を広く、フォントを少し拡大し、太字解除。
アイコンは無駄に空いているチャンネル名の横に移動。
pixivの作品タイトルを全文表示
タイトルが15字程度で切れ、カーソルを合わせてもツールチップは出ない。
ユーザビリティが最悪なのでStylusで解決する。
CSS適用
.cTvdTb,
.dpYXxb {
white-space: normal;
}