WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で

add_editor_style("editor-style.css");

を記述することで、ビジュアルエディタにeditor-style.css が適用されます。

しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。

そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。

ビジュアルエディタは次のような body 要素で囲まれています。（投稿タイプや公開ステータス、ブラウザ等によって一部の class の値が異なります）

<body id="tinymce" class="mce-content-body content post-type-post post-status-auto-draft post-format-standard locale-ja mceContentBody wp-editor wp-autoresize html4-captions has-focus" data-id="content" contenteditable="true" style="overflow-y: hidden;">

この中のたくさんある class の値から、"mce-content-body", "content", "mceContentBody" あたりを、公開画面の記事部分を囲む div などの要素に適用し、editor-style.css の中で

.mce-content-body selector {
  property: value;
}

のように記述すれば、ビジュアルエディタと公開画面の両方に適用させることができます。

ただ、あらかじめテンプレートを登録して記事やページに挿入することができるプラグインTinyMCE Templates を利用する場合は、class の値が限られます。このプラグインによる「テンプレートの挿入」画面に表示される、プレビュー部分の body 要素は次のように簡単なものです。

<body class="mceContentBody">

よって、必然的に "mceContentBody" を使うことになります。

.mceContentBody selector {
  property: value;
}

なお、ビジュアルエディタの枠内の余白など、公開画面には適用せず、ビジュアルエディタの中だけで適用させたいスタイルがある場合があります。この場合、.mceContentBody 以外の class 値か、#tinymce を editor-style.css の中で使用すれば公開画面には適用されません。