WordPress

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ヘルプセンター)

おわりに

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

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

Category : WordPress

メルマガはじめました

WordPressでのブログ運営に興味のあるあなたへ♡

プチマガでは、井戸端会議のおばさん風味の軽〜いノリで、
「今週のblanc note.(WordPress無料テーマblanc noteのアップデート情報)」
「\これであなたも耳年増/ブログよもやまばなし」
「メルマガっておいしいの?」
など、ゆる〜〜く発信しています。

メンバー特典 blanc note.のテンプレートも鋭意開発中。 ほぼ週1配信です〜。

ご登録はこちらから

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

Web / Graphic Designer 丸山るこ

大人カワイイデザイン&イラストが得意なデザイナー、丸山るこです。 想いを持った、起業女性・スモールビジネスを応援しています。 様々な業種の案件に関わってきましたので、女性向けサービスからビジネスライクなデザインまで幅広く対応できます。 現在は、起業を考え半常駐ワークに励んでいます。一児の母。