フォーラムへの返信
-
`h1,h2,h3,h4,h5,h6 {
font-family: ‘Yu Gothic Medium’, ‘YuGothic Medium’, ‘Hiragino Kaku Gothic Pro’, sans-serif;
}`を記述するとセクションタイトルのみ、ゴシックになりました。※ページタイトルは明朝体のまま
上記の CSS を追加 CSS に書いたとすると、エディター上で出力される CSS は次のようになります。
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 { ... }なのでエディター（のコンテンツ入力欄の中）の h2〜h6 はゴシックになります。ページタイトル（記事のタイトルの入力欄ということですよね？）は
.editor-styles-wrapperの外になるので、ページタイトルにも反映させたければ.edit-post-visual-editor__post-title-wrapper .editor-post-title__inputにも CSS を当てる必要があります。ただ、前述したように追加 CSS やadd_editor_style()の CSS は全て.editor-styles-wrapperでラップさせるため、ページタイトルにも CSS を当てたい場合はwp_enqueue_style()を使う必要があります。基本フォントで設定するとエディター画面に広く反映されるようですね。
基本フォント設定で出力される CSS はタイトルとエディターに対してフォントを設定します。
もし基本フォント設定を無効化できれば、何か変わるのでしょうかね。
これは試していないのでわかりませんが、おそらくエディターに対して適用されているデフォルトのフォントが適用されるのではないですかね？いずれにしろ
.is-root-containerに対してフォントを指定するのがベターだと思います。Who liked:まーちゅうさん、ありがとうございます！ 修正しました。
body > *の CSS はカスタマイザーの追加 CSS ではなくてadd_editor_style()での指定ですかね？追加 CSS の場合、
.editor-styles-wrapper { font-family: 'Yu Gothic Medium', 'YuGothic Medium', 'Hiragino Kaku Gothic Pro', sans-serif; }だとやっぱり効きませんでした。エディターは
.editor-styles-wrapper > .is-root-containerという構造になっており、.is-root-containerにフォントの指定がされているので.editor-styles-wrapperでは効かないということになるのだと思います。add_editor_style()だと CSS 中のbodyが.editor-styles-wrapperに置換されるので、body > *=.editor-styles-wrapper > *、つまり.is-root-containerが対象となり反映される、ということなのかなと思いました。今後のアップデートで追加 CSS の場合でも body が
.editor-styles-wrapperに置換されるようにしても良いかもですね。Who liked:CSSの記述で、フロントとエディターの両方に反映されるところが利点と認識していたのですが、今回のフォント指定のように、CSSによってはエディター用のCSSを別に記述する必要がある、ということなのでしょうか？
HTML 要素や body 要素まわりはそうなっちゃいますね。Snow Monkey の追加 CSS は
add_editor_style()したときと同じでセレクタを分解してエディター用のclassでラップするという仕組みです。エディターの DOM を改変してフロントと合わせたりはしていないので、詳細度等の問題で全くフロントと同じようにはならないこともあります。下記でどうでしょうか？
:root, .is-root-container { --_base-font-family: 'Yu Gothic Medium', 'YuGothic Medium', 'Hiragino Kaku Gothic Pro', sans-serif; }Who liked:
