お世話になっております。

 

マーカーを「細線」にして、「追加CSS」で太さを細くして使っていましたが、別のブログでも同じように調整して使おうと思い、ワードプレスの管理画面を見ていたところ、

「SWELL設定」＞「エディター設定」＞「カスタム書式」タブの下の方に

「カスタム書式CSS」

という項目を見つけ、「こに書いたCSSは、フロント側とエディター側の両方で読み込まれます。」ということで、そこに、使っていたCSSをコピペして保存してみました。

/* marker */
.mark_blue {
	background: linear-gradient(transparent 85%,var(--color_mark_blue) 0%);
}

.mark_green {
	background: linear-gradient(transparent 85%,var(--color_mark_green) 0%);
}
.mark_orange {
	background: linear-gradient(transparent 85%,var(--color_mark_orange) 0%);
}
 .mark_yellow {
	background: linear-gradient(transparent 90%,var(--color_mark_yellow) 0%);
}

/**/

 

 

投稿画面で確認してみると、編集画面（エディター側？）では反映されていましたが、プレビュー画面や実際の投稿画面（フロント側？）では反映されていませんでした。

chromeのシークレットモードで試したり、

プラグイン「Load My Files for Gutenberg」を無効化しても試しましたが、

やはり、同じ状態のままでした。

 

「カスタム書式CSS」内のCSSを削除し、

カスタマイザーの「追加CSS」にだけ記載しところ、

編集画面（エディター側）ではマーカーのCSSが反映されない状態になり、プレビュー画面（フロント側）ではCSSが反映されて細くなりました。

 

 

「カスタム書式CSS」内と　カスタマイザーの「追加CSS」に　両方に　CSSを記載したら、

編集画面（エディター側）でも、プレビューや実際の投稿（フロント側）　でも　太さが意図したものになりました。

 

 

しばらくは、「カスタム書式CSS」内と　カスタマイザーの「追加CSS」に　両方に　CSSを記載して使おうと思いますが、

これは、たまたま「マーカーの細線」の場合に限っては、「カスタム書式CSS」で指定してもフロント側とエディター側の両方に反映されていない、ということですか？

はじめて「カスタム書式CSS」を使ったので、いまいちわかっていません。

「Load My Files for Gutenberg」の影響が残っているとかでしょうか？