やることは大きく分けて2つです。
1つ目は、functions.phpに投稿画面で読み込むCSSの設定をします。
2つ目は、投稿画面専用のCSSを作成します(※既にテーマ側で作成しているCSSをコピー&ペーストすれば、ほぼ済んでしまうので簡単です)。

まず、WordPressの投稿画面で使用するCSSの箇所を確認しておきましょう。
当サイトで説明すると…。

▼投稿画面で使用するCSSの箇所を確認

※画像をクリックすると、当記事の画像を拡大表示して順番に見ることができます

タイトル部分は、投稿画面の”タイトル”で入力するので関係ありません。

その次の文書は、”抜粋”で入力するので関係ありません。
※当サイトの場合です

その次のKeywordは、”カスタムフィールド”で入力するので関係ありません。
※当サイトの場合です

最後の赤枠部分が、投稿画面の文章として入力する箇所ですので、この部分だけ投稿画面専用のCSSを作成すればよいということになります。

ですから、functions.phpには、この赤枠部分に使用するCSSのクラス(例えば”.contents”)内の要素に対してのCSSが記述されている”投稿画面専用のCSSを別途読み込む”という設定をすればよいわけです。

1.全てのポストタイプで共通のクラスを使用

functions.phpに投稿画面で読み込むCSSの設定をします。
WordPressには、3つの投稿タイプ(投稿ページ・カスタム投稿ページ・固定ページ)がありますが、基本共通のクラスを使い回した方が管理も楽ですし、CSSも少なくて済みます。
このような場合の設定例です(※ポストタイプ別に複数のクラスを使用する場合もあると思いますので、そちらは次の項で紹介します)。

functions.php(パターン1)

// 全てのポストタイプで共通のクラスを使用
function custom_editor_settings($initArray){
    $initArray['body_class'] = 'contents';
    return $initArray;
}
add_editor_style('css/editor_style.css');
add_filter('tiny_mce_before_init', 'custom_editor_settings');

補足

投稿画面の文章を入力する箇所に使用しているCSSのクラスを指定します。
※上記画像で説明した赤枠部分ですね。
CSSのクラスは、”contents”としました(3行目です)。

投稿画面専用のCSSのパスを記述します(6行目です)。
テンプレートファイルが格納されているディレクトリからのパスですね。
“editor_style.css”としました(環境に合わせて書き換えてください)。

CSSは、基本既にテーマ側で作成しているCSSをコピー&ペーストすればよいのですが、フォントのスタイルのみ注意する必要があります。

editor_style.css

/* フォント */
body.mceContentBody {
    font-size: 14px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* タイトル */
h3 {
    font-size: 15px;
    background-color: #DCDCDC;
    padding: 3px 20px 3px 20px;
    width: 560px;
    height: auto;
    margin: 0px 0px 15px 0px;
    border-radius: 15px;
}
・
・
・

補足

●フォント
通常フォント指定はbodyタグ内でしていると思いますが、投稿画面上でフォントを反映させるには”body.mceContentBody”とします。

あとは、”.contents”内の要素をCSSで書き込めばOK(※コピー&ペーストで済むように、コピーもとのCSSとeditor_style.cssは同じ場所に格納しておくとよいですね)。

▼投稿画面の表示がプレビュー画面の表示と同じになった

※画像をクリックすると、当記事の画像を拡大表示して順番に見ることができます

2.ポストタイプ別に複数のクラスを使用

次は、ポストタイプ別に複数のクラスを使用したい場合です。
例えば、｢投稿ページでは、背景は白、余白は20pxにしたい｣｢カスタム投稿ページでは、背景は画像を使用し、背景画像がある分、余白を多めにとりたいので35pxにしたい｣｢固定ページでは、上部に共通の背景画像を使用し、上の余白は40px、下・左右の余白は20pxにしたい｣といったような場合です。

functions.php(パターン2)

// ポストタイプ別に複数のクラスを使用 
function custom_editor_settings($initArray){
    global $current_screen;
    switch ($current_screen->post_type) {
    // 投稿ページ
    case 'post':
        $initArray['body_class'] = 'contents';
        break;
    // カスタム投稿ページ
    case 'ポストタイプ名':
        $initArray['body_class'] = 'contents_custom';
         break;
    // 固定ページ
    case 'page':
        $initArray['body_class'] = 'contents_page';
        break;
    }
    return $initArray;
}
add_editor_style('css/editor_style.css');
add_filter('tiny_mce_before_init', 'custom_editor_settings');

補足

●投稿ページ
6行目の”post”は、投稿ページのポストタイプ名です。
CSSのクラスは、”contents”としました。

●カスタム投稿ページ
10行目の”ポストタイプ名”には、作成したポストタイプ名を記述します。
CSSのクラスは、”contents_custom”としました。

●固定ページ
14行目の”page”は、固定ページのポストタイプ名です。
CSSのクラスは、”contents_page”としました。

あとは、”.contents”と”.contents_custom”と”.contents_page”内の要素をCSSでeditor_style.cssに書き込めばOK。
これは、それぞれのポストタイプで使用するクラスのCSSを変えたい場合に使います。

3.ポストタイプ別に複数のCSSを使用

次は、ポストタイプ別に複数のCSSを使用したい場合です。
ポストタイプ別に複雑なレイアウトをCSSで実現したい場合、いっそのことCSSを分けてしまった方が管理しやすいこともあります。

functions.php(パターン3)

// ポストタイプ別に複数のCSSを使用
function custom_editor_style() {
    global $current_screen;
    switch ($current_screen->post_type) {
    // 投稿ページ
    case 'post':
        add_editor_style('css/editor_style_post.css');
        break;
    // カスタム投稿ページ
    case 'ポストタイプ名':
        add_editor_style('css/editor_style_custom.css');
        break;
    // 固定ページ
    case 'page':
        add_editor_style('css/editor_style_page.css');
        break;
    }
}
add_action('admin_head', 'custom_editor_style');

補足

●投稿ページ
6行目の”post”は、投稿ページのポストタイプ名です。
7行目には、投稿ページ編集画面専用のCSSのパスを記述します。
“editor_style_post.css”としました(環境に合わせて書き換えてください)。

●カスタム投稿ページ
10行目の”ポストタイプ名”には、作成したポストタイプ名を記述します。
11行目には、カスタム投稿ページ編集画面専用のCSSのパスを記述します。
“editor_style_custom.css”としました(環境に合わせて書き換えてください)。

●固定ページ
14行目の”page”は、固定ページのポストタイプ名です。
15行目には、固定ページ編集画面専用のCSSのパスを記述します。
“editor_style_page.css”としました(環境に合わせて書き換えてください)。

あとは、それぞれのポストタイプ用のCSSを作成すればOK。
これも、フォントのスタイルのみ注意して、既にテーマ側で作成しているCSSをコピー&ペーストすれば簡単ですよね。

リッチテキストエディタのちょっとしたTips

最後に”リッチテキストエディタに表示項目を追加する”と”リッチテキストエディタのh1･h2を削除する”について紹介します(覚えておくと便利なおまけみたいなもんですね)。
functons.phpに以下を追記します。

リッチテキストエディタに表示項目を追加する

functions.php

// リッチテキストエディタに表示項目を追加する
function ilc_mce_buttons($buttons){
    // 背景・コピー・カット・ペースト・フォントサイズを追加
    array_push($buttons, "backcolor", "copy", "cut", "paste", "fontsizeselect");
    return $buttons;
}
add_filter("mce_buttons", "ilc_mce_buttons");

補足

●背景・コピー・カット・ペースト・フォントサイズを追加
WordPressのデフォルト状態では、リッチエキストエディタに｢背景｣｢コピー｣｢カット｣｢ペースト｣｢フォントサイズ｣等は表示されませんので、表示させます。
4行目の｢”backcolor”, “copy”, “cut”, “paste”, “fontsizeselect”｣の箇所です。

▼｢背景｣｢コピー｣｢カット｣｢ペースト｣｢フォントサイズ｣が表示された

※画像をクリックすると、当記事の画像を拡大表示して順番に見ることができます

リッチテキストエディタのh1･h2を削除する

functions.php

// リッチテキストエディタのh1･h2を削除する
function custom_editor_settings($initArray){
    $initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
    return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_editor_settings');

補足

通常h1は記事のタイトル、h2はサイト名(ロゴの箇所等)に使用しますので、リッチテキストエディタにh1とh2は必要ありません。
クライアントさんへの納品物の場合、クライアントさんがh1やh2を記事内の見出しに使用してしまう場合もあるので、リッチテキストエディタのh1･h2は削除してしまいましょう(※HTML5では、sectionやarticleを使えば、h1を同一ページ内に複数使用することもできますが、WordPressの記事内でわざわざ使う方もいないでしょうし、それもクライアントさんが…)。

●リッチテキストエディタのh1･h2を削除する
3行目の”theme_advanced_blockformats”で、リッチテキストエディタで使用するフォーマットを指定することができます。ここでh1･h2を削除すれば表示されなくなります。

●functions.phpでの追記箇所
[functions.php(パターン1)の場合]
functions.php(パターン1)の4行目の上に、上記の3行目のみを追記します。

[functions.php(パターン2)の場合]
functions.php(パターン2)の18行目の上に、上記の3行目のみを追記します。

[functions.php(パターン3)の場合]
上記をそのまま追記すればOKです。

▼h1･h2が表示されなくなった

※画像をクリックすると、当記事の画像を拡大表示して順番に見ることができます