WordPressテーマ「Cocoon」でインラインコードのスタイルが表示されないときの対処法

イヌ
イヌ

簡単だからためしてみてね!

ウサギ
ウサギ

ウサギもやってみる!

「インラインコード」のスタイルがうまく表示されない

イヌ:なんでか、うまいこといかないんですよ。

ウサギ:どういうことなの?

イヌ:たとえば、var dog = 'いぬ'; と書くよね。

ウサギ:うん。

イヌ:ビジュアルエディターで編集しているときは、きちんと以下のようにグレーの背景で囲われるんだよね。

ウサギ:うん、グレー背景だ。

イヌ:これがプレビューや本番で見ると、

ウサギ:あれ、普通の文字だね。

イヌ:なにかの原因で、プレビューと本番にスタイルがあたってない様子。

ウサギ:なるほどー。

解決策はスタイルをカスタマイズで追加しよう

イヌ:カスタマイズの追加CSSに、コードを加えるだけで直ります。以下のカスタマイズを開いて。

イヌ:追加CSSを開きます

イヌ:以下のテキストエリアに、

イヌ:以下のコードを追加します。

code, kbd { padding: 3px 5px 2px 5px; margin: 0 1px; background: #eaeaea; background: rgba(0,0,0,.07); font-size: 13px; } .code, code { font-family: Consolas,Monaco,monospace; direction: ltr; unicode-bidi: embed; }
Code language: CSS (css)

イヌ:で、本番を見ると、

ウサギ:おー、直った。よかったよかった。

イヌ
イヌ

困っている人は、試してみてください〜

ウサギ
ウサギ

試してみてね!
またね〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です