ぱそこん生活感。／メモ

　ワードプレスのHTMLエディタは使いにくいです。前回、ワードプレスのHTMLエディタを使い易くするでタグ入力の簡略化を図りましたが、一度不満に気付くと急に我慢がならなくなるものです。この際、徹底的に改良することにしました。
　
　HTMLエディタの不満点を挙げます。

1. 文字が小さい
2. 入力画面の色が見にくい
3. 文字フォントがしっくりこない

　以下、解決方法です。まず、文字入力エリアのCSSをどうやって変更すれば良いのか？　ネットで検索したらぴったりの「HTMLエディタ内のテキストのスタイルを変更する方法」が見つかりました。
　
　色々試した末の完成コードをまず示します。functions.phpにこれを追加しました。

function change_editor_font(){
    echo "<style type='text/css'>
#wp-content-editor-container textarea#content {
  font-family: Consolas, \"ＭＳ ゴシック\", Osaka, Verdana, Arial, sans-serif;
  font-size: 14px;
  background: silver;
  color: #000;
}
</style>";
} add_action("admin_print_styles", "change_editor_font");

　文字入力エリア周りの関数はadmin_print_stylesでありましたか。これが判ればこっちのものです。不満点を以下のように解消しました。
　

・文字の大きさ

　font-size: 14px　としました。これ位大きいと見やすいです。
　

・入力画面の色

　文字色は黒のままですが、背景色をsilverとしました。これでくっきりはっきり見えるようになりました。
　

・文字フォント

　アルファベット：Consolas
　くっきり見やすいゴシック系のフォント。英数字のみ。等幅なのも良。
　
　日本語：ＭＳ ゴシック
　プロポーショナルよりも等幅フォントの方が見やすいと思った。
　

・注意点

　注意点を２つ記しておきます。
　

・投稿画面のHTMLタグ

　今回、#wp-content-editor-container textarea#contentという形で文字入力領域を指定していますが、参考サイトのコードではこの部分が異なっており、最初は動きませんでした。WPの内部のタグは今後も仕様変更で変わっていく可能性があるので注意して下さい。
　

・文字フォントの指定

　\"ＭＳ ゴシック\"の様にフォント名を囲む「"」の前にエスケープとして「\」をつける必要があります。
　

まとめ

　今回のカスタマイズにより、劇的に記事入力がし易くなりました。文字を打ち込むのがものすごく楽しいです。これは大変うれしい。是非お試し下さい。