あなたは、Wordpressで管理画面のビジュアル画面からブログを書いてますか？そして、フォント、見にくいなぁ。。もっと文字を見やすく大きくしたいなぁ♪って思った事ありませんか？
私は、管理画面を右クリック→要素を検証（F12キー）ウィンドーズならctrl＋Shift＋cキーを押すと出てくる画面のCSSの「 body.mceContentBody 」の font: 16px にして一時書いたりしてました。
こうしたら、見やすいフォントでブログを書き込めるのでちょっと助かってました。でも下書き保存したり、更新するとぉ・・・！！元の小さな文字に戻っちゃう(・∀・)
元である管理画面のCSSをいじってないので、当たり前なんですけどねっ。
simplicityのわいひらさんがそんなページ書いてたっけ！って事で、寝ログのページ内検索で即発見！
WordPressのビジュアルエディターの装飾変更
ブログに書かれてる事をするだけで、格段とビジュアル画面が見やすくなるんですっ♪やる事は、コピーそしてペースト。
functions.phpに、ビジュアルエディターのCSSを読み込むコードを1行コピペ！
それから、書かれているsimplicityのコードをコピーペーストするのみで、管理画面がメチャクチャ見やすくなります♪
下記▼画像がコピペ前
コピペ後、見やすい画面
ちょっとピンクの引用は私が自分のコードを付け足したのでと被ってますけど、、
- hタグのデザインでh2とか目で見て分かる。
- 引用などの装飾類が反映される
- 投稿画面がブログのコンテンツサイズの幅（bodyのwidth）が680px仕様で自動改行される。
- フォントのサイズ行間が見やすい仕様になっている
但し、すべてsimplicityの純正仕様である。その辺りを自分のブログ仕様にしたいのであれば、もっとカスタマイズしたら、自分のブログ画面と同じになってきます。
フォントや行間は、ご自身の行間だとか、文字の装飾、引用のボックスをイジってみてはいかがでしょうか？初めに書いた要素の検証でいじってみるのが便利です。
成功したら、editor-style.cssにペーストすれば良いだけですしねっ♪
寝ログのビジュアルエディタのカスタマイズページ紹介
わいひらさんのブログで確認後コピペしてビジュアルエディターを見やすくやってみてくださいっ♪ツイッターのリンクから、nelogページへどうぞっ。
WordPressのビジュアルエディターのスタイルをカスタマイズする方法いろいろ｜寝ログ
それでは！つらつらつら～っと、おしまいっ♪かうたっくでしたっ！
Comments