WordPressの投稿画面の文字が小さいのでカスタマイズやってみた!劇的に見やすくなるので紹介

あなたは、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のビジュアルエディターのスタイルをカスタマイズする方法いろいろ|寝ログ

それでは!つらつらつら~っと、おしまいっ♪かうたっくでしたっ!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー