ソースコードに二重に枠がつく – WordPress

WordPressの記事編集画面をビジュアルエディターにした際の
ソースコード入力機能を探していて、やっと見つけた[コード]入力機能。

実際にこの機能で入力した文章のHTMLタグを参照すると、
ちゃんと<pre>タグ内に<code>タグが入ったコードになっていた。

しかし、これを設定すると、実際のブログ記事画面で、枠が二重に表示されてしまっていた。

原因

ブログ記事の方のコードを参照すると、<pre>タグにも<code>タグにも、
CSSでborderがつけられており、
それが原因でborderが二重に表示されてしまっていた。

記事編集画面ではそんな問題は発生しなかったので、
私の利用しているテーマのCSSの問題かもしれない。

ちなみに私が使用しているWordPressテーマは、
MH Magazineの有料版です。

対策

テーマのカスタマイズ画面に「カスタムCSS」にて
内側の<code>タグの方にボーダーを無くすコードを追加。

code{
 border: none;
}

また、<code>タグの下にmarginで20pxも空間が開けられており、
<pre>タグ内で上に寄って表示されていたので、margin指定も追加。

code{
 border: none;
 margin: 0;
}

その後

サイトの見た目を変更したため、
現在このコードは以下のようになっている。

pre.wp-block-code code{
 border: none; 
 background: #背景色; 
 color: #文字色; 
 margin: 0;
} 

また、現在はコードをハイライトしてくれるプラグインを導入しており、
背景色と文字色はプラグインでカバーされているので問題ないのだが、
それが使えなくなった時のために、一応背景色と文字色の指定は消さないで置いてある。