コードブロックのデフォルトを黒地に白文字にしたい
ブログに短いコードを載せるときにWordPress標準のコードブロックを使います。
私の使っているWordPressテーマ「Affinger6」だと明るいグレー背景に黒文字になります。やっぱりコードは黒地に白文字表示したい。
ブロックのオプションで「ワイド（黒）」を選べば黒字に白文字になるのですが、左右の幅がH2見出しよりも広くなってしまいます。
そんなわけでAffinger6のカスタマイズ機能のひとつ「追加CSS」を使ってコードブロックの背景と文字色を変えてみました。
この記事のコードブロックがその結果です。
コードエディターでタグやクラス名を調べる
カスタムCSSで指定するために、コードブロックのクラス名やタグを調べます。
ブロックエディタで新規投稿を作り、コードブロックを挿入します。
エディタをコードエディタに切り替えます。
コードエディタで見ると
<pre class="wp-block-code"><code>となっていました。この部分の色指定を変えるCSSを書きます。
追加CSSを設定する
外観：カスタマイズ：追加CSSで以下のCSSを入力します。
真っ黒だと疲れるので少しコントラストを下げました。
.wp-block-code{
background-color:#404040;
}
.wp-block-code>code{
color:#F0F0F0;
}
最初は.wp-block-codeにcolor:を書いていましたが、子要素のcodeの文字色は変わりませんでした。
そこで.wp-block-code>codeで子要素の<code>を直接指定しました。
過去記事にも反映させるには.postを指定するらしい
ちなみに、この設定だとこれから新しく投稿する記事にだけ、設定が反映されます。
追加CSSの各セレクタの先頭に.postというセレクタを追加すると既存の記事も変わるらしいです。
私は新規記事だけで良いので使いませんでした。