MovableTypeの記事作成を楽にするエディタCSS運用のコツ

Movable Type（MT）でサイトを構築する際、管理者やライターにとって最大のストレスの一つが「記事作成画面のエディタ（リッチテキストエディタ）の見た目が、公開後のサイトのデザインと全然違う」という問題です。
見出しのデザイン、文字の大きさ、行間などが実際の表示と乖離していると、改行位置の調整や装飾の確認のために、何度も「プレビュー」ボタンを押す羽目になります。これは積み重なると大きなタイムロスです。
今回は、Movable TypeでエディタCSSを「最小限の手間で、最大限の効果を出す」ための運用のコツを解説します。

1. なぜ「エディタCSS」の運用は挫折しやすいのか？

多くの開発者が、最初は「公開サイト用のCSS（style.css）」をそのままエディタCSSとして読み込もうとします。しかし、これには2つの大きな落とし穴があります。

背景色の干渉:
公開サイトがダークモードや背景画像のあるデザインの場合、エディタの入力エリアまで真っ黒になったり、入力しづらくなったりする。
セレクタの不一致:
公開サイトのCSSは .main-content h2 のように入れ子で書かれていることが多く、エディタ内（body 直下に見出しが来る）ではスタイルが適用されない。

これらを解決しようとして、エディタ専用にCSSをフルスクラッチで書こうとすると、今度は「本番サイトのデザイン修正のたびに、エディタ用CSSも直さなければならない」という二重管理の地獄が始まります。

2. 賢い運用のコツ：共通パーツを「分離」して管理する

エディタCSSを簡単に運用する最大のコツは、「すべてを共通化しようとしないこと」です。

共通化すべきは「本文パーツ」のみ
サイト全体のレイアウト（ヘッダーやフッター、サイドバー）のスタイルはエディタには不要です。必要なのは、記事本文（エントリーボディ）の中で使われるタグのスタイルだけです。

h2, h3, h4（見出し）
p（段落・行間）
a（リンク色）
ul, ol, li（リスト）
blockquote（引用）
strong, em（強調）

実践的なファイル構成
Sass（SCSS）を使用している場合は、以下のように管理するのが理想的です。

_variables.scss: 色やフォントサイズの変数
_entry-content.scss: 本文内タグのスタイル（ここがキモ！）
style.scss: 公開用（1+2+その他レイアウト）
editor-style.scss: エディタ用（1+2のみを読み込む）

このように、「本文の装飾ルール」だけを独立したファイルにしておけば、一箇所を直すだけで本番サイトとエディタの両方に反映されます。

3. MTの管理画面で設定する際のポイント

Movable Typeの設定は非常に簡単です。

CSSのアップロード:
作成した editor-style.css をサーバーにアップロード（またはMTのインデックステンプレートで作成）。
設定の適用:
・MT8/9の場合：各サイトの「設定」＞「投稿」内にある「WYSIWYGエディタの設定」＞「コンテンツCSSファイル」に、CSSのパスを記述します。
・特定のテーマやプラグインを使用している場合は、その設定画面から指定します。

TinyMCEの「ボディクラス」を活用する
エディタ内の body タグに、本番サイトと同じクラス（例: .entry-content）を付与するように設定すると、CSSのセレクタを書き換える必要がなくなります。

JSON（TinyMCE の一般設定例）
{
"content_css": "/path/to/editor-style.css",
"body_class": "entry-content"
}
※「body_class」の部分は、MT標準では body.entry / body.page / body.content_data が使えます。
※最新バージョンのMovableType 9 では、標準エディタが Tiptapに変更しています。

4. 運用の手間を減らす「割り切り」の技術

完璧主義はエディタCSS運用の敵です。以下の3点は「あえて無視する」のがコツです。

ウェブフォントは読み込まない:
Google Fontsなどをエディタに読み込むと、管理画面の動作が重くなる原因になります。標準のゴシック体/明朝体で十分です。
複雑なアニメーション:
ホバー演出などはエディタでは確認不要です。
JavaScriptによる装飾:
スライダーやアコーディオンなどは、エディタ上では単なるリストやブロックとして見えていれば問題ありません。

「構造が正しく把握でき、文字の強弱（見出し感）が分かれば合格」という基準で運用しましょう。

5. まとめ：エディタCSSは「執筆者のための投資」

エディタCSSを整えることは、単なる見た目のこだわりではありません。
「公開してみたら見出しが大きすぎてバランスが悪かった」「リストのインデントが崩れていて読みづらい」といった、公開後の微調整作業をゼロにするための「工数削減施策」です。
特にMovable Type 8への移行などを検討している場合、ブロックエディタの導入と合わせてこの「パーツの分離管理」を取り入れることで、今後のメンテナンスコストは劇的に下がります。

運用フローのチェックリスト

記事本文用のスタイルだけを別ファイル（_entry.scss等）に切り出したか？
管理画面の「WYSIWYGエディタ」設定にパスを記述したか？
body_class を設定して、本番と同じセレクタが効くようにしたか？

まずは「見出し」と「行間」の設定から始めてみてください。それだけで、記事作成のストレスは半分以下になるはずです。