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' );
[ダッシュボード]-[設定]-[パーマリンク設定]を押し、CSS変更を反映させる
これでビジュアルエディタ内でもH2タグなどに色をつけて見やすくなる。
参考サイト
WordPressテーマ「SANGO」をご使用頂く方々には、できる限り自由にカスタマイズをして頂きたいと考えています。そこで、このページではSANGOのテーマフォルダーに含まれるそれぞれのファイルの役割をまとめておきたい ...