質問: ビジュアルエディタのここの部分なのですけれど ![拡張スタイル](https://teratail.storage.googleapis.com/uploads/contributed_images/e922d1a5e16a59dea393bdb838fe2c08.png) 「スタイル」で増やした部分にもcssで何が反映されるのかわかりやすくしたいです。 自分で調べてみたのですが、まさにこれと同じ事象のものを探せれませんでした。 テキストエディタで色づけさせているようにビジュアルエディタでも処理したいです。 ![テキストエディタ](https://teratail.storage.googleapis.com/uploads/contributed_images/d80887dcad09ade0cdd296d684c3ced2.png) 開発者ツールですが、下記の画像のようなものを作りたいです。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/e2b3a7b331393f5f2803572245dd0486.png) これを実装する方法を教えてください。 ――――――――――――――――――――――――――――――――――――――――――――――――― このようにしたいです。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/848e9384a08f0fd38ef892a46ced6140.png)
回答: skin.min.cssファイルを作って、サーバーにアップし、 functions.phpに(アップしたディレクトリーに合わせて)、たとえば ``` function admin_css() { echo ''; } add_action( 'admin_head', 'admin_css' ); ``` とコードを記入し、 デベロッパーツールで変更したいところのIDを確認して、希望のcssを記入してみてください。 たとえば、 ``` #mceu_125 { background: blue; } ``` とりあえず、わたしの環境ではこれでできました。 追記 寝ログさんのコードに、つけたいスタイルを記入して、たとえば ``` styles => array( 'color' => 'red') ``` 実はわたしのも回答を書く前にこれを試していたのですが、 反映されなかったので上記の回答をしました。 で、kei344さんのリンクをみて一部修正したらコードがいきました。 【Custom styles for TinyMCE 4.0 in WordPress 3.9 – Kathy is Awesome】 https://www.kathyisawesome.com/custom-styles-for-wordpress-3-9/ この記事のなかのリンクに http://wordpress.stackexchange.com/questions/112210/tinymce-format-dropdown-no-longer-showing-style-previews/116790#116790 というのがあって、デフォルトではcolorやbackgroundなどのスタイルは適用できないみたいです。 それで、それらを追加すればいいとのことなのです。 ``` function initialize_tinymce_styles($init_array) { $init_array['preview_styles'] = 'background background-color color font-size font-family font-weight text-decoration text-transform'; //あとは同じ ``` わたしはうまく追加できなかったので(もともとのものが効かなくなった) とりあえず必要なスタイルをすべて追加しました。 これで、にスタイルを追加して希望のスタイルにできるはずです。