WordPress投稿画面をカスタマイズしたい人「WordPressの記事編集でプレビュー画面出すのめんどくさすぎる。編集画面でもう少し実際の表示に近づけられたら手間が減るのにな、、、記事書くのには慣れたから効率化したい、、、」
こんな悩みに答えます。
この記事を読めば、投稿画面の書式を設定できるようになり、記事作成を効率化できます。
- 【結論】WordPress投稿画面のスタイルは「editor-style.css」で
- 【コピペでOK】WordPress投稿画面の書式をカスタマイズする方法
自己紹介
筆者はWebサイト制作を学習中です。Web制作の仕事も始めており、最高収入は月15万円。WordPressも勉強しつつ、覚えたことを記録していきます。
この記事の対象はブログに慣れて、デザインのカスタマイズも始めた中級者です。
必要な知識
WordPressインストール先のファイル操作ができる、CSSの基礎知識
CSSの基礎知識はプロゲート（無料、3h50m）で身につきます。
>HTML & CSS 学習コース 初級編 | Progate[プロゲート]
スポンサードサーチ
【結論】WordPress投稿画面のスタイルは「editor-style.css」で
WordPress投稿画面のスタイルは、テーマフォルダ直下の「editor-style.css」で変更できます。
WordPress投稿画面のスタイル変更手順
- function.phpで「editor-style.css」有効化
- テーマフォルダ直下の「editor-style.css」でスタイル設定
手順① function.phpで「editor-style.css」有効化
function.phpに下記コードを追加し、editor-style.css を有効にします。
add_editor_style("editor-style.css");
手順② テーマフォルダ直下の「editor-style.css」でスタイル設定
具体的な設置場所
WordPressインストールフォルダ > wp-content > themes > 使用テーマフォルダ > editor-style.css
FTPソフトなどでテーマフォルダにアクセスし、ファイルを作成すればOK。
【コピペでOK】WordPress投稿画面の書式をカスタマイズする方法
今回は、投稿画面の「フォント」と「カラム幅」を変更してみます。
editor-style.css に下記コードをコピペ。
.wp-editor {
max-width: 760px;
}
.wp-editor * {
font-family: "serif";
}
※反映されない場合は、ブラウザのキャッシュを削除してみてください。
スポンサードサーチ
まとめ
WordPress投稿画面のスタイル変更手順
- function.phpで「editor-style.css」有効化
- テーマフォルダ直下の「editor-style.css」でスタイル設定
以上です。
