WordPressのリッチエディタにはTinyMCEが使われている。リッチエディタを使うのはソースコードなどタグを記事本文として流し込むときだけなので、あまり気にしなかったが、使っている人から、なぜ明朝体のでかいフォントなのかと言われた。皆さんはどうしているのだろうか。ここではリッチエディタにオリジナルのCSSを適用する方法を調べてみた。

リッチエディタはiframeで実現されているため、擬似的にhtml-head-bodyの構造を取っている。ここに適用されているCSSは以下の3つだが、このうち”wordpress.css”が変更の対象となる。

• wp-includes/js/tinymce/themes/advanced/css/editor_content.css
• wp-includes/js/tinymce/plugins/wordpress/wordpress.css
• wp-includes/js/tinymce/plugins/spellchecker/css/content.css

変更するにはまず適用するCSSを作成する。その際に、変更するwordpress.cssを当該CSSで@includeする。
フォントの指定を含め、一般的な設定をするのなら以下のようなCSSになるはず。使用しているテーマのCSSから必要な部分だけ持ってくればよい。

CSS

/*
rich_editor.css
ver 0.1 by Junon
*/
@import url('http://www.techdego.com/wp-includes/js/tinymce/plugins/wordpress/wordpress.css');
body {
   margin: 0;
   padding: 0　10px;
   background-color: #fff;
   color:#000;
   font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ　Ｐゴシック", sans-serif;
   font-size: 0.8em;
   line-height: 1.4;
}
p a:link {
   text-decoration: none;
   color: #186FD0;
   border-bottom: 1px dotted #186FD0;
}
p a:visited, p a:active {
   text-decoration: none;
   color: #666;
   border-bottom: 1px dotted #186FD0;
}
p a:hover {
   text-decoration: none;
   color: #186FD0;
   border-bottom: 1px solid #186FD0;
}
p { margin: 1em 0; }
li { margin-top: 1em; }
ul li { list-style: square; }
ul li ul { margin-bottom: 0.3em; }
ul li ul li { list-style: circle; }
a:link img, a:hover img, a:visited img, a:active img{ border: none; }
.alignleft { float: left; }
.alignright { float: right; }
.clearer { clear: both; }
code, pre { font-family: "courier new", courier, monospace; }

上記をTinyMCEに適用すればよいのだが、今回は自分のテーマに付随させてテーマを外せばエディタのCSSも変わるようにする。

上記のCSS（ここではrich_editor.cssとする）をテーマのstyle.cssと同じ階層に保存する（背景画像をテーマと共有するため）。

テーマのfunctions.php（無ければ新規に作成）の最後に以下のコードを記述する。

PHP

function replace_editor_css($css_file) {
   $css_file = get_option('siteurl') . '/wp-content/themes/**theme-name**/rich_editor.css';
   return $css_file;
}
add_filter('mce_css', 'replace_editor_css');

ちなみに、上記の部分を別のphpファイルにして、pluginsフォルダに入れるとプラグインになる。テーマを変えてもCSSを適用したいならプラグイン化をお勧めする。

なお、上記のPHPがやっているのは、’tiny_mce_config.php’で”content_css : “のオプション（デフォルトはwordpress.css）を書き換えているだけ。
これでこのように独自のCSSのクラスがそのまま表示されるようになる。