menu
スポンサーリンク

ビジュアルエディタのeditor-style.cssが利かない場合


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を反映させるのであれば、上記に気を付けて反映させる必要がある。

連絡先など

MAIL mailmedian.weblike.jp
Skype median-weblike
所在地 埼玉県坂戸市

スポンサーリンク
スポンサーリンク

blog

プラットフォーム API 言語