WordPressビジュアルエディタのCSSに実際の表示を適用する方法

WordPressでビジュアルエディタを使って書き始めた頃どうしても我慢ならなかったのがブログを書く画面と実際の見た目が違う！ということでした。もう本当に書きにくい。

ビジュアルエディタに実際の見た目を反映させたい！

と思ってました。

だって見出しだろうが段落や行間だろうが、ことごとく実際の表示と違うから常に完成図を想像しながら書かないといけなくて、ストレス溜まりまくりでした。

リアルタイムプレビューが使えるMarsEditやWindows Live Writerならちょっとはマシになりますが、結局CSSを読み込んだりタグをエディタの設定で記述する必要がありました。

以下、WordPressのビジュアルエディタにCSSを反映させる方法を現時点でまとめておこうかと思います。

ちなみにSimplicityだと最初からfunctions.phpに必要な設定が書き込まれているので手順をある程度省略できたりします。

ビジュアルエディタの初期状態と適用後を比較

具体的な手順に入る前に完成図を比較して実際にどのように変わるのか見てみましょう。

初期状態のビジュアルエディタ

何もCSSを設定していない状態のビジュアルエディターでも一応見出しの階層によってフォントサイズが変わるのでなんとか違いはわかります。

ただし改行されずに横幅いっぱいまで文字が入力されてしまうのでだいたい目分量でウィンドウサイズを狭くするしかないので不便です。

また、自分独自で設定しているCSSデザインは適用されないのでカスタマイズしている人ほど使いにくくなってしまいます。

実際の見た目を適用後のビジュアルエディタ

こちらがCSSを完全に適用させたビジュアルエディタの編集画面です。

これらが完璧に適用されているのでまるで実際のブログを見ながら編集している錯覚に陥るほどです。

初期状態だと実際の見た目とはかけ離れているのでどうしてもプレビューで確認する必要があるのですごい差ですね。

これがビジュアルエディタに実際の見た目を適用するとブログを書くストレスが劇的に減りますよ！ということです。

さて、今度は実際に自分のブログに反映させないといけません。手順が多くて大変ですが頑張ってみてください。

ビジュアルエディタ用のCSSを使うことを宣言

まずfunctions.phpの中に「ビジュアルエディタ用のCSSを使うよ！」と宣言するために以下の記述を追記します。

Simplicityには親テーマフォルダの中にあるfunctions.phpの34行目あたりにすでに記述があるので設定する必要はありません。

これを書くことによってeditor-style.cssというファイルに書いたCSSがビジュアルエディタに反映されます。

ビジュアルエディタ用のCSSファイルを作成

次に実際に使うCSSファイルを作成していきます。

子テーマを使う

まず前提としてWordPressではCSSをカスタマイズする場合は子テーマを使いましょう。Simplicityの場合は以下の公式ページをどうぞ。

公式：Simplicityの子テーマダウンロード

Simplicity以外のWordPressテーマを使っている場合もファイルの置き場所などの構成は同じなのでこの記事を参考にするとともに「WordPress　子テーマ」などでググって調べてみてください。

子テーマで編集しないと後で大変です。

CSSファイルを作成する

子テーマフォルダ「simplicity-child」の中に実際の見た目に反映されるstyle.cssがありますが同じ階層にeditor-style.cssというCSSファイルを作成しましょう。

やり方はいろいろあると思いますが「editor-style.css」というファイル名のCSSファイルを子テーマのstyle.cssと同じ階層に作ります。

• style.cssファイルをコピーして別ファイルを作り中身を全部消してファイル名をeditor-style.cssに変更
• もしくは新しくテキストエディタでファイルを作り保存する時にファイルの種類でCSSを選んでファイル名をeditor-style.cssにして保存するか。

ビジュアルエディタ用CSSをカスタマイズ

このeditor-style.cssに書いた内容がビジュアルエディタで編集中の画面の見た目に反映されることになります。

CSSに書く内容のおさらい

そもそもビジュアルエディタに反映させたいのは実際の見た目ですよね。それはつまり親テーマと子テーマのstyle.cssの両方ということになります。

Simplicityでは以下の順番でCSSファイルが順番に読み込まれて上書きされていきます。

1. Simplicity（親テーマ）のstyle.css
2. 子テーマのstyle.css
3. スキンのstyle.css
4. Simplicity（親テーマ）のmobile.css
5. 子テーマのmobile.css
6. スキンのmobile.css
7. テーマカスタマイザーで変更したスタイル

via：Simplicityのスキン機能の仕様

つまり理屈から考えると実際に読み込まれるCSSを同じ順番にするとeditor-style.cssの中に、

が並んでいれば実際の見た目と同じになることになります。

※実際はそれだけじゃ同じにならんですが

既存のCSSをコピー

ということで（余計な部分がたくさん含まれますが）

これらの中身をeditor-style.cssにコピペしてみます。

１．親テーマのCSSからコピペ

親テーマのCSSファイルには冒頭にいろいろなCSSを呼び出す記述が余計なので実際に直接記述している部分から下をすべてeditor-style.cssにコピペします。

２．子テーマのCSSからコピペ

子テーマの場合は冒頭で親テーマのCSSを呼び出す記述をコピペしないように気をつけます。それ以外は全部コピペしても影響はないと思います。CSSタグが始まる部分から下をコピペすれば問題ありません。

この時点でeditor-style.cssの中身は、

という順番で並んでいます。

※ただしこれだとまだ見た目は一部しか反映されません。

ビジュアルエディタ用にclass名を置換

editor-style.cssにコピペが完了したらテキストエディタの置換機能を使ってeditor-style.cssの中の「.article」という部分を「.mceContentBody」に置換します。

.articleというのはSimplicityで使われている記事カラムのclass名なので、これをビジュアルエディタで使われている記事カラムのclass名に置換しています。

CSSを微調整

最後に幅やマージンなどを微調整します。もともとの指定がパーセント指定だとレイアウトが崩れたりするので絶対値を指定します。（環境によって微調整するCSSの内容は違います。）

親テーマと子テーマのCSSをコピペしたeditor-style.cssの最後に自分の場合は以下の記述を追記しました。

この時点でeditor-style.cssの中身は、

という順番で並んでいます。さて、これでついにCSSの中身は完成しました。次はいよいよアップロードしていきます。

完成したCSSをサーバーにアップロード

自分はFileZillaというFTPクライアントを使ってファイルをアップロードしていたので調べたことが無かったですがWordPressの管理画面にはファイルをアップロードする機能らしきものが見当たりませんね。

まぁここまで突っ込んだ設定をする人ならFTPクライアントもすでに使っているとは思いますが。他には定番のFFFTPでしょうか。

まとめ

さて、サーバーへのアップロードも終わり正しく適用されていればビジュアルエディタで編集する時にリアルタイムで実際の見た目が反映されるはずです。

実際に使ってみるとわかると思いますが実際の表示が反映されるのにほぼタイムラグは無く軽快そのものです。

MacのMarsEditとビジュアルエディタの比較もしてみましたがビジュアルエディタのほうがサクサク動いてくれます。

ちなみにeditor-style.cssの中身は2000行を超えていますが問題は生じてません。カスタマイズしまくりの人でも問題無いんじゃないでしょうか。

注意点として実際の見た目を反映すると行間が広くて画像も実際のサイズで表示されるのでデュアルディスプレイにして縦画面としてパソコンを使うのも一つの方法です。快適な執筆環境を作りたい人は参考にしてみてください。

他にもブログを書くためのパソコン環境の記事も役に立ちそうです。