• かちびと.net

    お手軽WordPress Tips:CSSで「投稿」や「ページ」のHTMLエディター内のフォントや文字サイズを変更する方法のご紹介です。見にくいエディタのスタイルを自由に変更してみてください。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

お手軽WordPress Tips:CSSで「投稿」や「ページ」のHTMLエディター内のフォントや文字サイズを変更する

スポンサーリンク

WordPressのHTMLエディタ内のテキ
ストのスタイルを変更する方法。少々
見にくくて使いにくい、というご要望を
頂いて、プラグインで出来ないかなと
思っていたら、プラグインも不要で簡単
に変えられましたのでメモ。

という訳で、直ぐには役に立たないけど覚えておくと損ないよねシリーズ。HTMLエディターのテキストスタイルを変更する方法です。

コード

フォントを変えられる、というか、cssを変更できるコードです。

function change_editor_font(){
        echo "<style type='text/css'>
#editorcontainer textarea#content {
  font-family: \"メイリオ\", \"Meiryo\", \"ヒラギノ角ゴ Pro W3\", \"Hiragino Kaku Gothic Pro\", \"MS ゴシック\", \"Osaka\", sans-serif;
  font-size:20px;
  color:#333;
}
</style>";
} add_action("admin_print_styles", "change_editor_font");

上記はサンプルコードです。ご自身の環境に都合の良い良いにスタイルを変更してください。フォント20pxも変化が分かりやすいように設定した数値です。

“フォント名”の場合は”の前に\を入れてください。例⇒\”メイリオ\”

実装

以下が実装。フォントが大きくなってメイリオになっています。

用途有るの?


エディタのスタイルを変更出来ればば目の悪い方や、ご年配にも優しいエディターに出来ます。


こんな風にも。cssを変更できるので、用途はいろいろありそうです。見やすい、執筆しやすい環境を整えることが出来ますね。

とか書きましたけど今までで一番需要無さそうwでも、1%の方にでもお役に立てれば幸いというとこで・・

因みに、このハックは以下を参照しました。

via:How to change WordPress editor font

URL :
TRB :

Ads

Posts

Contact

Services