今回は、「CKEditor for Movable Type」プラグインでエディタにスタイルシート(デザイン)を反映編させる方法をメモしておきます。

エディタのスタイルシートは、「編集領域に関する設定」で編集することが可能ですが、
ブログによってスタイルシートを変更することが多かったので、「その他の設定」にて設定することが多いです。
今回はその方法のメモになります。

「その他の設定」の「Other setting types.」を「カスタム」に変更します。
【設定値】に以下の設定を入力し、下部の「変更を保存」ボタンをクリックします。
CKEditor for Movable Typeの「その他の設定」画面


// エディタにidを付ける(既存CSSを流用するため)
config.bodyId = 'main';

// スタイルシートの設定
config.contentsCss = ['/css/style.css', '/css/editor.css'];

エディタにIDを付ける

config.bodyId = ‘main’; は、エディタのボックスに#mainというIDを追加する設定です。

この設定を設定することにより、CSSの「#main h2」等の設定を効かせることができます。

config.bodyId = ‘main’; を設定しない場合は、CSSの「#main h2」の設定が反映されません。
それは、エディタに#mainというIDが付いてない為です。

既存のスタイルシートで#mainをつけず直接h2から書いている場合は、不要な設定となります。

スタイルシートを設定する

config.contentsCss = [‘/css/style.css’, ‘/css/editor.css’]; が、スタイルシートの設定になります。

「’/css/style.css’」が公開ページのスタイルシート、
「’/css/editor.css’」がエディタ調整用スタイルシートです。

「,」で繋げることで、複数のスタイルシートを設定することができます。

スタイルシートの数は、例えばエディタ用にスタイルシートを別途用意する場合は、1つで良いかと思います。

エディタ調整用スタイルシート

エディタ用に別途スタイルシートを用意するよりも、公開ページのスタイルシートをエディタにも使用した方が、変更の際の調整が1度で済み便利です。
しかし、公開ページのスタイルシートをエディタに使用した場合、背景色など若干調整が必要な場合があります。
その場合は、エディタ調整用のCSSを別途用意し、後から読み込ませる方法が良いかと思います。
(上の設定例がそうです)

エディタ調整用CSS

@charset "UTF-8";

/*=================================

	editor css

=================================*/

body {
	width:700px;
	margin:10px;
	background:#fff;
}

body > h2:first-child { margin-top:0 !important;}

bodyでエディタの背景色等を調整します。

「body > h2:first-child」は、h2に上マージンを設定しており、エディタの一番最初に使用する場合にのみ上マージンをやめる設定です。
必要に応じて設定しています。