ビジュアルエディタのeditor-style.cssが利かない場合
2018年6月17日
tinemceのeditor-style.cssが読み込めない場合は、cssのセレクタに問題があって読み込めてないのかもしれない。
■html
<body class="aaa"><main><?php the_content() ?></main></body>
■style.css
body.aaa main p.red{color:red;}
上記の場合、editor-style.cssに下記のように記述しても動作しない。
■editor-style.css①
body.aaa main p.red{color:red;}
例えば、下記のようにすると動作する。
■editor-style.css②
body.mce-content-body p.red{color:red;}
ビジュアルであれテキストであれ、エディタはiframeで読み込んでいるようだ。
その中の自動で読み込まれたbody要素には、フロントで出力されるbodyのclass、singleとかarchiveとかが記載されない。
上記のようにmce-contentなど複数自動で専用のクラスが付く。
従ってstyle.cssからコピペしたbody.〇〇などのクラスセレクタは動作しない。
例えば body.archive main h2などといったセレクタは動作しない。
後、<?php the_content() ?>を何かでくくってある場合、例えば上記の場合はmain要素でくくってあるが、これもセレクタとしては動作しない。
wordpressのエディタはiframeによって<?php the_content() ?>の部分のみ表示され、<?php the_content() ?>の親要素はすぐbody要素になってしまうからである。
editor-style.cssを反映させるのであれば、上記に気を付けて反映させる必要がある。
median.weblike.jp
