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は全ての兄弟要素がカウント対象)

続きを読む class指定付きnth-child

Calckeyに全ユーザ用CSSを適用する

Calckey自鯖の全ユーザにカスタムCSSを反映させる。
コントロールパネルに機能追加されるまでの暫定対応。

自分のみ適用したいCSSはChrome拡張機能StylusやCalckeyユーザ設定のカスタムCSSを使用する

構築と基本設定 身内用Calckey鯖を無料で立てる

CSS作成

  • CalckeyのカスタムCSS機能はBetterDiscordの様にライブプレビュー出来ないので、Stylusで作成する
    • 適用URLを追加して他のCalckeyサーバにも使える (Misskeyには使用不可)
  • !importantをつけまくる
続きを読む Calckeyに全ユーザ用CSSを適用する

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で使えるリストブロックはolulのみ。
dlを作成出来るプラグインを探す。

続きを読む WordPressで定義リストdlを使う

リンクにサイトアイコンを表示

CSSの疑似要素でリンクにサイトアイコンを付ける。
URLで判別する為、よく使うリンク先をいくつかCSSに記載しておく。

アイコンDL

続きを読む リンクにサイトアイコンを表示

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

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

適用前・適用後
続きを読む YouTubeの動画タイトルを全文表示