WordPressビジュアルエディタの明朝体フォントを変更する « - snipets

WordPressビジュアルエディタの明朝体フォントを変更する

「editor-style.css」ファイルを作成してテーマフォルダに保存。

やh4等必要なスタイルを記述する。

editor-style

functions.phpに下記を追加。

CSS
/* フォントを指定するクラス */ body.mceContentBody { font: 14px/1.8 "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; overflow-wrap: break-word; word-break: normal; } .editor-area a { color: #339933; text-decoration: underline; } .editor-area h3 { font-size: 20px; line-height:1.2em; font-weight: bold; padding: 0 0 6px 10px; margin: 0 0 40px 0; border-left: solid 5px #262626; border-bottom: solid 1px #262626; } .editor-area h4 { color: #000; font-size: 18px; line-height:1em; font-weight: bold; padding: 0 0 6px 0; margin: 60px 0 20px 0; border-bottom: dotted 1px #aaa; }

HTML

function
//--------------------------------------------------------------------------- // ビジュアルエディタのフォント変更 //--------------------------------------------------------------------------- add_editor_style('editor-style.css'); function custom_editor_settings( $initArray ){ $initArray['body_class'] = 'editor-area'; //オリジナルのクラスを設定する return $initArray; } add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );