TinyMCE Advancedのカスタマイズ

WordPressのプラグインTinyMCE Advancedというものがあります。

これを使用することによって、ビジュアルエディタの機能を強化したりカスタマイズすることが出来るようになります。

TinyMCE Advanced(日本語版)

私の環境では「現在のテーマにCSSクラスをインポートします。」にチェックを入れると、CSSの関係か、投稿画面のテキストエリアが灰色に染まってしまい、使いにくくなってしまうためこの項目は使用していません。ですが、カスタマイズしたCSSをTinyMCE Advanced内で使用することが出来るようにする方法をがあるので今回はそれをメモっておきます。

このプラグインで設置できるボタンの一つであるstyleselect(日本語でスタイルと書かれているボタン)に新しい項目を増やす方法

/wp-content/plugins/tinymce-advanced/css/tadv-mce.css

ここにクラス名を追加することによってドロップダウンに表示されるようになります。

例:

.red{color: #CC0000;font-weight: bold;}

元から書かれてる.shutter {}と.shutterset {}は消してしまっても問題ありません。この二つ以外にもaligncenterなどの項目がありますがそちらも消したい場合は

/wp-includes/js/tinymce/themes/advanced/skins/wp5681d5theme/content.css

この中の/* WordPress styles */の下の方にaligncenterなどがあるのでそれを消せば表示されなくなります。

TinyMCE Advanced内でカスタマイズしたCSSを使う方法

/wp-content/plugins/tinymce-advanced/css/tadv-mce.css

tadv-mce.css内にCSSを書けば適用されます。

例:

a{color: #226db9;}

a:hover{color: #2783de;}

ここに書いた内容はTinyMCE Advanced内では使用されますが実際の記事には使用されていません。同じ内容をテーマの方のCSSにも記述する必要があります。

TinyMCE Advancedに日本語フォントを追加する方法

TinyMCE Advancedに日本語フォントを追加

こちらが参考になりました。

もしも、やったのに適用されていないという場合は、キャッシュがPC内に残っている可能性があるので、ブラウザのキャッシュを消したり、プラグインを停止後再度有効にしたり、Gearsを無効にしてみたりしてみてください。