公開日:2016年2月3日 水曜日

editor-style.cssで投稿画面を見やすくカスタマイズ

投稿画面のカスタマイズ。
やらなくてもいいことですが、やっておくと後々ラクチンになります。

というのも……

WordPressで記事を書く
変更をプレビュー
修正
変更をプレビュー(エンドレス)

プレビューにプレビューを重ねて記事を公開する……。
この流れ、ちょっと面倒くさいと思いませんか?

もし、投稿画面が公開後のデザインに近ければ、公開記事と(ほぼ)おなじ見栄えで記事を書くことができます。
すると、プレビューを繰り返す必要がなくなります。

つまり、投稿画面をカスタマイズすると、記事の書きやすさが格段にアップするのです!

というわけで、この記事ではeditor-style.cssを使った投稿画面のカスタマイズについてご説明します。

editor-style.cssを設定すると、こんなかんじに

editor-css

functions.phpにeditor-style.cssを読み込むphpを書く

子テーマを使っている場合は、子テーマのfunctions.phpに書き込んでください。

アップロードはFTPソフトや、サーバーの管理ツールから行ってください。

editor-style.cssを準備する

空ファイルをアップする

editor-style.cssというファイルを作り(文字コードUTF-8)、テーマと同じディレクトリにアップロードします。

アップロードはFTPソフトや、サーバーの管理ツールから行ってください。

テーマとデザインを合わせる

テーマのstyle.cssからeditor-style.cssに、記事に関するcssをコピペします。

記事に関するcssは……

  1. 見出し2〜4
  2. リストタグ(ul li)
  3. 番号付きリストタグ(ol li)
  4. リンクタグ(a)
  5. 強調タグ(strong)
  6. ご自分で追加したcss

になります。

PCから投稿する場合は、PC用のCSSだけで大丈夫です。

1〜6に関わるcssをコピー&ペーストし、セレクタ(h2、ul、pなどのタグのこと)やclass名の前に、「.mceContentBody」とつけてください。

.mceContentBodyをつけることで、投稿画面にだけスタイルを反映できます。
つけないと、ダッシュボード(管理画面)全体のスタイルに影響がでてしまうことも……?

例:Gush4子テーマのeditor-style.cssファイル

反映されないときは……?

ほぼ、ブラウザのキャッシュの問題です。
ブラウザのキャッシュを削除してから、投稿画面をリロードしてください。
キャッシュ(インターネット一時ファイル)の削除方法 (Yahoo! JAPANヘルプセンター)

おわりに

イメージが湧きやすい=正義!

みなさんの「ブログライフ」が楽しいものでありますように。

お客様が自然とあつまるWordPressを育てるお供に


女性にオススメのWordPressテーマ「blanc note.」を無料配布しています。まずはブログから自分メディアづくりを始めてみたい方におすすめです。
メルマガ登録完了後、テーマをダウンロードしていただけます。
ぜひお試しください。
メルマガに登録する