WordPress ビジュアルエディタを実際の見た目と同じようにする方法

About WordPress

WordPress で投稿しやすくするのに欠かすことはできない「ビジュアルエディタの表示を実際のページと見た目を同じようにする」こと。

ウェブサイト or ブログの原型が作り終わったらこれは急務かと思います。

今回は「WordPress ビジュアルエディタを実際の見た目と同じようにする方法」をメモします。

まずはビジュアルエディタを編集できるようにする

以下を function.php へ貼り付けるとビジュアルエディタ専用の CSS が稼働します。

これで、editor-style.css という CSS ファイルがビジュアルエディタ専用の CSS として利用することができるようになります。

テーマ内に editor-style.css ファイルを用意する

WordPress 利用中のテーマ内の最初のルートへ「editor-style.css」を用意します。

ここに実際の見た目と同じような css レイアウトを記述するわけです。

editor-style.css の記述方法

ビジュアルエディタの body 部分だけ例として挙げました。

とりあえず、editor-style.css に body.mceContentBody 部分は貼り付けて使うと良いです。

font-family は実際のページで利用しているフォントを設定してください。

max-width は実際のページの本文エリアの幅サイズを記述してください。このブログは 700px の横幅があるので「max-width:700px」としています。

なぜ width ではなく max-width を用いるのかというと、PC 画面よりも狭い幅の端末(スマホなど)で編集するときには max-width 指定にしておかないと横幅が見切れてしまうからです(無駄に横長に広がり、横スクロールが必要になってしまう)。

line-height も実際のページと同じ数値を設定してください。


世にリリースされているブログ用のテーマなんかは、すでに function.php に「editor-style.css」が使用できるように記述されているはずです。

したがって、配布のテーマを使う場合は、editor-style.css ファイルを用意するところからやってみてくださいね。