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

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

というのも……

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ではじめるWEBの仕組みづくり7日間メール講座

オトナ女子にピッタリ!ブログ運営に集中できるWordPressテーマプレゼント
  • 「@luelue.com」というドメインからメールが届きます。あらかじめフォルダ分け設定を行って頂きますようお願い致します。
      Yahoo、hotmailなどのフリーメールアドレスでは受信できない場合がありますので、プロバイダーメールアドレスを推奨いたします。
  • メールアドレスは個人情報の観点より、プライバシーを遵守しております。
  • 本メール講座及びメールマガジンは利益の保証や損失の補填を行うものではなく、効果には個人差があります。
  • いつでも解除可能です。

Pickup Article同じカテゴリーの記事

ブログ一覧へ戻る