『SANGO』hタグのスタイルをビジュアルモードにも適用するには
hタグのCSSを指定しても、ビジュアルモードでは変わらない
「.entry–content」のclassで各hタグのスタイルを指定しても、記事投稿時「ビジュアル」モードの編集画面では適用されません。
「ビジュアル」モードは別のスタイル指定が必要です。
「まあ、プレビューでデザイン確認するし特に指定しなくていいか」というのも一つの手ですが、ここは指定してしまったほうが確認時間が削減できるので指定してみることにします。
[editor-style.css]（親テーマ内）に指定したCSSを追加
H2, H3タグなどに指定したいCSSを[editor-style.css]（親テーマ内）に追加します。
[editor-style.css]は、だいたい親テーマ内の [library] – [css]の階層にあります。
body#tinymce.wp-editor h2, body#tinymce.wp-editor .h2 {
/*▼ こちらにh2タグの内容を記入 ▼*/
/*▲ こちらにh2タグの内容を記入 ▲*/
}
body#tinymce.wp-editor h2::before, body#tinymce.wp-editor .h2::before {
/*▼ こちらにh2タグの内容を記入 ▼*/
/*▲ こちらにh2タグの内容を記入 ▲*/
}
body#tinymce.wp-editor h3, body#tinymce.wp-editor .h3 {
/*▼ こちらにh3タグの内容を記入 ▼*/
/*▲ こちらにh3タグの内容を記入 ▲*/
}
body#tinymce.wp-editor h3::before, body#tinymce.wp-editor .h3::before {
/*▼ こちらにh3タグの内容を記入 ▼*/
/*▲ こちらにh3タグの内容を記入 ▲*/
}
[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が反映されるようになります。
ただし、上記設定で反映されるのは「ビジュアル」モード内のみです。
実際に投稿する記事のCSSを再度変更した場合は、併せてこちらも修正する必要があります。
以上です。
設定がうまくいかない場合は、コメント欄よりお知らせください。
コメントを残す