SANGOのビジュアルエディターでH2などのCSSを変更する方法

SANGOのサポートページに変更方法が書いてあるけど、なぜかうまく行かなかったので別の方法で設定できた。

手順

直接、親テーマの library/css/editor-style.cssを変更する（念のため要バックアップ）
子テーマのfunctions.phpに以下のコードを追加する
[ダッシュボード]-[設定]-[パーマリンク設定]を押し、CSS変更を反映させる

直接、親テーマの library/css/editor-style.cssを変更する

見出しのH2タグなどに指定したいCSSをeditor-style.cssに追加する


body#tinymce.wp-editor h2, body#tinymce.wp-editor .h2 {
position: relative;
 margin: 2em 0 1.0em;
 font-size: 1.4em;
 line-height: 1.4;
 margin-bottom: 0.375em;

 padding: 0.5em;
 background: #7BD36B;
 color: white; 
}

body#tinymce.wp-editor h2::before, body#tinymce.wp-editor .h2::before {
 position: absolute;
 content: '';
 top: 100%;
 left: 0;
 border: none;
 border-bottom: solid 15px transparent;
 border-right: solid 20px rgb(149, 158, 155);
}

子テーマのfunctions.phpに以下のコードを追加する


function extend_tiny_mce_before_init( $mce_init ) {

$mce_init['cache_suffix'] = 'v='.time();

return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'extend_tiny_mce_before_init' );