テキストエディタの文字を変更する

説明

テキストエディタ（投稿ページの「テキスト」タブのエディタ）に標準では備わっていない機能を追加する自作プラグイン「html entities button」がほぼ1年ぶりにアップデート。ここではバージョン2.0.0で追加したテキストエディタのフォント切り替え機能について紹介する。

小さい文字が見難い

これまではテキストエディタの文字については無頓着というかあまり気にしていなかったのだが、最近になって「小さくて見難い」と感じることがある。テキストエディタのフォントは、WordPress標準ではフォントファミリーが「Consolas,Monaco,monospace」、サイズが「13px」。使用しているパソコン・ブラウザ環境によると思うが、これらを変更すれば見やすくなるのではと考えたのが、お盆の頃だった。新しいプラグインを作ってもよかったのだが、ツールバーの拡張による実装ということで自作プラグイン「html entities button」を機能拡張することにした。追加するのは「ボタン」じゃないけどね。

フォントサイズの切り替えはnumberタイプのinput要素でいいとして、フォントファミリーはちょっと悩ましかったのだが、最終的に設定ページで切り替え可能なフォントファミリーを事前に登録し、テキストエディタのツールバーにはselect要素（プルダウンメニュー）を配置することにした。管理画面で「設定」－「html entities button」を選択すると次のような内容が表示される。

「フォントファミリー」と「フォントサイズ」の2要素をチェックし、フォントファミリーセットに好みのフォントを指定。フォントファミリーセットは最大3つまで登録可能となっており、ここではセット名を「Meiryo」、その内容として「Meiryo,メイリオ」を設定している。セット名が、ツールバーのプルダウンで表示される内容になるので、利用者がわかりやすいものにするとよいだろう。

ユーザー別にフォント指定を保存

投稿画面に切り替えてフォントを変更してみる。

上部がWordPress標準の表示内容で、下部がフォントファミリーを「Meiryo」、フォントサイズを「16px」に切り替えたものになる。「フォントファミリー」および「フォントサイズ」はどちらも変更と同時にテキストえてぃたの内容が切り替わり、その設定内容はユーザー別に保存される仕組みにした。

それにしても寄る年波には勝てぬってことですかね、とほほ。