今回は、「CKEditor for Movable Type」プラグインでエディタにスタイルシート（デザイン）を反映編させる方法をメモしておきます。
エディタのスタイルシートは、「編集領域に関する設定」で編集することが可能ですが、
ブログによってスタイルシートを変更することが多かったので、「その他の設定」にて設定することが多いです。
今回はその方法のメモになります。
「その他の設定」の「Other setting types.」を「カスタム」に変更します。
【設定値】に以下の設定を入力し、下部の「変更を保存」ボタンをクリックします。
// エディタに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’」がエディタ調整用スタイルシートです。
「,」で繋げることで、複数のスタイルシートを設定することができます。
スタイルシートの数は、例えばエディタ用にスタイルシートを別途用意する場合は、１つで良いかと思います。
エディタ調整用スタイルシート
エディタ用に別途スタイルシートを用意するよりも、公開ページのスタイルシートをエディタにも使用した方が、変更の際の調整が１度で済み便利です。
しかし、公開ページのスタイルシートをエディタに使用した場合、背景色など若干調整が必要な場合があります。
その場合は、エディタ調整用の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に上マージンを設定しており、エディタの一番最初に使用する場合にのみ上マージンをやめる設定です。
必要に応じて設定しています。
コメント