WEB – ページ 2

class指定付きnth-child

指定クラスを持つ要素のn番目、奇数・偶数個などの条件で装飾する。

課題

SNSのTLで投稿の背景色を交互に変えたい。
兄弟要素が投稿のみの場合は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をつけまくる

身内用Calckey鯖を無料で立てる

サーバを1㍉も知らない素人が手探りでCalckey鯖を立てた記録。
Gandiで購入したドメインを、メインとメールはCORESERVER、サブドメインはOCI無料枠のCalckeyに割り当てる。Cloudflareは不使用。

CalckeyはMisskey v12の派生で、違いは色々あるが個人的にはキャラ画像等の差替が大きい。

calckey – Codeberg.org　※現在はFirefishの旧リポジトリになっている

GandiドメインをCORESERVERで使う

新規ドメインに新規サイトを割り当てる際の設定。
CORESERVERのマニュアルではValue Domainのネームサーバを使うようにあるが、外部DNSでも問題なく接続出来た。(Cloudflareとは相性が悪いという話がある)

ドメイン設定

Gandiのネームサーバを使用

CORESERVERにログイン後、サイト設定でIPをコピー
Gandiにログイン後、ドメイン > 設定するドメイン名をクリック
DNSレコード > 詳細設定 > DNSレコードを編集
@ A～TXTレコード4行を以下に書き換え、ゾーンファイルを保存
- @ 10800 IN A (CORESERVERのIP)
  @ 10800 IN MX 10 (契約サーバ名).coreserver.jp.
  @ 10800 IN TXT "v=spf1 ip4:(CORESERVERのIP) ~all"

WordPressのjQuery読込削除

WordPressのヘッダで古いjqueryとjquery-migrateが読み込まれているので、削除した上で高速なjsDelivrのCDNで新しいverを読み込む(プラグイン等で使用されている為)。

function.php編集

function enqueue_scripts() {
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery-js', '//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

参考

WordPressでjqueryとjquery-migrateの2つの読み込みを解除する方法 | Musible

Gandiでドメインを購入

これまでValue Domainで購入・管理していたが、Gandiで新しく2文字ドメインを買った。

Gandi.net

日本語の情報は少ないがサイトは概ね日本語対応。
参考記事の紹介リンクを使おうとした所、紹介プログラムはメンテナンス中との事。

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を作成出来るプラグインを探す。