今回はワードプレス管理画面の投稿編集部分を、実際に公開表示した場合の見た目と同一にするためのカスタマイズとなります。

このカスタマイズを行うことで、記事を作成する際に「保存」「プレビュー」を何度も繰り返し、行間などの見た目を細かく調整する手間がなくなり、文章作成に集中できるようになります。

functions.php を編集する

functions.phpに以下の記述を足すことで、管理画面の投稿部分専用のスタイルシートが有効になります。

 

editor-style.css を作成する

新たなCSSファイルとして、「editor-style.css」(←ファイル名はこの名称)を作成します。

そして、テーマのスタイルシート「style.css」の記事部分に適用しているCSS、及び、bodyやpタグなどに設定している、基本部分のCSSコードをコピーします。

具体的なCSSサンプルは下記に記載しています。

 

投稿編集部分のCSSを編集する

管理画面の投稿部分のbodyには”tinymce”というid名が付与されていると思うので、CSSは「body#tinymce」ベースで記述する必要があります。

ワードプレス本体やプラグイン側の既存CSSの設定と競合する場合は、!importantルールで上書きしてしまいます。
個々の詳細は、投稿編集部分のソースを実際に確認されてください。

当サイトで設定している内容はざっくり下記の通りです。

 

FTPでアップロードする

一通り設定が出来上がったら、テーマファイル内に「editor-style.css」をアップロードします。

すると投稿編集部分は、下図のようにスタイルシートが適用されているのが分かります。

なお、アップロード以降は、「style.css」と同様に管理画面上から【外観】>【テーマ編集】で内容を修正できます。

 

以上が、ワードプレスで実際に公開されたページに表示されているスタイル装飾と、管理画面の見た目を同一にする方法です。

これでもう「保存」「プレビュー」を繰り返すことなく、快適にブログ記事の作成を行うことができますね。

 

なお、管理画面上から手軽にCSSを適用させるためのTipsも書いたので、あわせて活用してみてください。

【関連】ワードプレスのビジュアルエディタ上からCSSを適用させるカスタマイズ

関連する記事

PAGE TOP

copyrights PRINT TABLE