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でのブログ運営に興味のあるあなたへ♡

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

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

ご登録はこちらから

ご登録はお名前(ハンドルネームOK)とメールアドレスのみ。
フォームへ入力後、仮登録のメールが届きます。
メール内の「リンク」をクリックすると登録完了です。
フリーランスママデザイナー るこ

コンピューターは道具だよ。息を吸うみたいに、手足のように、使っちゃおう!
幼少期から自分自身が目立つことが苦手で「写真を撮られると魂が抜ける〜!」と、逃げ回ってました。
そんなこんなで、ただいま、顔を出さずにどこまで信頼度を得られるか、実験中です!
あっ、作品が目立つのは大歓迎!(笑)

WordPress

この記事がお気に召したら……

最新情報をお届けします