WordPressの編集画面を実際の表示と同じにする

WordPressの編集画面を実際の表示と同じにする方法について紹介します。

テーマのCSSを変更したけど編集の画面と実際の表示が違う

WordPressを入れたので見出しを整えたと思い
テーマのCSSを編集していたのですが、
WordPressの編集画面では見出しにCSSの装飾が適用されていません！！

これを何とかするために調べたので何かの参考になればと思います。

サーバーのテンプレートの場所を調べる

WordPressでテーマを使っている場合は、
ドメイン名→public_html→wp-content→themes→テーマ名のフォルダ→css
とフォルダをたどっていくと「editor-style.css」というファイルがあります。

このファイルは記事の編集中の装飾をするときに呼び出されるCSSです。
ですのでこのCSSを編集することで記事の編集中の装飾を変更することができます。

editor-style.cssを変更する

editor-style.cssを変更するには３つの手順で行います。

1. Xserverからeditor-style.cssをダウンロードする
2. editor-style.cssを編集する
3. 編集したeditor-style.cssをXserverにアップロードする

Xserverからeditor-style.cssをダウンロードする

ダウンロードの手順は以下の通りです。

1. editor-style.cssを選択
2. ダウンロードするボタンを押す
   自分のパソコンの「ダウンロード」フォルダにeditor-style.cssがダウンロードされていれば成功です。

editor-style.cssを編集する

手順１でダウンロードしたeditor-style.cssをダブルクリックで開き、記述したいCSSの内容を記述して保存します。私は「見出しタグ」を編集したかったので、h2タグとh3タグのCSSを記述しました。

編集中の装飾をしたい場合はタグの前に「.editor-styles-wrapper」という文言をつけます。
これは編集中のテキストが「.editor-styles-wrapper」というクラスのdivタグの中にあるからなのですが、
CSSが詳しくわからないという方は、おまじないと思っておけば大丈夫です。

編集したeditor-style.cssをXserverにアップロードする

完成した「editor-styles-wrapper.css」をXserverにアップロードします。
この時に注意してほしいのがアップロードするときに、
ファイル名の文字コードを「UTF-8」にしてください。

お疲れ様でした。
これでうまくいっていれば編集中の画面でも実際のページと同じように装飾がされています。