ブログで発信したい、だけどデザインもこだわりたい、そんなあなたへ贈るWordPress テーマblanc note.

customizeblanc note.のカスタマイズ
blanc note.のカスタマイズ

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

blanc note.のカスタマイズ

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

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 : blanc note.のカスタマイズ
ほんわかクリエイター るこ

Web系のお仕事をしています。
むちゅめ(6歳/早生まれ/小学生1年生)大好きな親バカ系。
LOFT、無印、生活の木、伊東屋が好き。
自然溢れる場所に惹かれはするものの、めんどくさがりの省エネ派。ぐでたまを尊敬してます。

ブログ一覧へ戻る