[Wordpress]codeにスタイル適応

ブロックコード（pre 内の code）には影響を与えず、文章中に出てくる単なる code（インラインコード）だけにスタイルを適用する方法は、主に2つあります。

環境や好みに合わせて使い分けてみてください。

方法1：:not() を使って1行で除外
方法2：一度すべてに適用し、ブロック内だけリセット
どちらを使うべき？

方法1：:not() を使って1行で除外

CSSの否定疑似クラス :not() を使うことで、「ブロックコードの中にある code 以外」という指定が可能です。現在の主要ブラウザであれば問題なく動作します。

/* .wp-block-code の中にある code 以外に適用 */
code:not(.wp-block-code code) {
    background-color: #f3f4f6;
    color: #d946ef;
    padding: 2px 4px;
    border-radius: 4px;
}

もし、WordPressに限らず「とにかく pre タグの中にある code をすべて除外したい」という場合は、以下のように書くこともできます。

/* pre の中にある code 以外に適用 */
code:not(pre code) {
    background-color: #f3f4f6;
    color: #d946ef;
    padding: 2px 4px;
    border-radius: 4px;
}

方法2：一度すべてに適用し、ブロック内だけリセット

WordPressのテーマカスタマイズなどで最も古くから使われており、一番予期せぬ表示崩れが起きにくい王道の書き方です。

一度すべての code にインライン用のスタイルを適用したあと、ブロックコード（.wp-block-code code）のスタイルだけを打ち消します。

/* 1. まず全ての code（インライン用）にスタイルを適用 */
code {
    background-color: #f3f4f6;
    color: #d946ef;
    padding: 2px 4px;
    border-radius: 4px;
}

/* 2. ブロックコード内の code だけ、背景や文字色をリセットする */
.wp-block-code code {
    background-color: transparent; /* 背景を透明に */
    color: inherit;            /* 文字色を親要素（テーマの色）に合わせる */
    padding: 0;                /* 余白をなくす */
    border-radius: 0;          /* 角丸をなくす */
}