編集画面のフォント

2019年7月21日

突然ですが、このサイトは WordPress と言うソフトで編集しています。これはWEBを見るとページの最下部にあるフッタに、このように表示がありますから一目瞭然ですね。

この WordPress で作成されているWEBは、今では一般的になりました。私が初期のころに書いてたWEBはHTML（Hyper Text Markup Language = ハイパーテキストマークアップランゲージ）と言う方式で書いてたもんで、結構大変だったんです。今みたいに自由度もなかったし。

閑話休題。
先日から国道49号旧道の鳥井峠のシリーズが始まりましたが、実はこれを書いてるときに一つ大きな問題が発生しました。それは、WEBを書いている編集画面のフォントが、なぜか変わってしまったのです。それまでは「メイリオ」で表示されていたのですが、なぜかいきなり明朝体へ。フォントの線が細くなって、画面で見にくいったらありゃしない。ところが、これをプレビュー画面で見ると、ちゃんとメイリオで表示されている。なんでやねん！と言うことで、さっそく原因の調査に取り掛かりました。

まず行ったのは確認作業。Wordpress 、Windows、Google Chrome の更新がなかったか。これを調べると、PCがWindows 関連の更新を行っていましたが、これが原因なのでしょうか。しかし、更新内容を見てみると、フォント関連の更新は行っていないような…。その後も、いくら調べてもハッキリした原因がわかりません。こうなると、もう最後の呪文を唱えるしかないようです。それは…

強制的に変えてしまえ！（笑）

そこでいろいろと調べまくったところ、やっぱりと言うか直接テキストで編集するしかない…と言うことで、まずは基本的な部分を設定している Functions.php を変更します。記録のために、以下記述しておきます。以下の文章を最後尾に追加。
（文字コードはすべて UTF-8）

// フォントの設定
add_filter(‘tiny_mce_before_init’, function($settings){
$settings[‘font_formats’] =
“Century Gothic=’Century Gothic’;”.
“Franklin Gothic Medium=’Franklin Gothic Medium’;”.
“Gulim=’Gulim’;”.
“Impact=’Impact’;”.
“Verdana=’Verdana’;”.
“Georgia=’Georgia’;”.
“Times New Roman=’Times New Roman’;”.
“Courier New=’Courier New’;”.
“Comic Sans MS=’Comic Sans MS’;”.
“メイリオ=’メイリオ’,’Meiryo’;”.
“ＭＳＰゴシック=’ＭＳＰゴシック’,’MS PGothic’;”.
“ＭＳゴシック=’ＭＳゴシック’,’MS Gothic’;”.
“游ゴシック=’游ゴシック’,’Yu Gothic’;”.
“ヒラギノ角ゴ=’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’ヒラギノ角ゴ ProN W3′,’Hiragino Kaku Gothic ProN’;”.
“ヒラギノ丸ゴ=’ヒラギノ丸ゴ Pro W4′,’Hiragino Maru Gothic Pro’,’ヒラギノ丸ゴ ProN W4′,’Hiragino Maru Gothic ProN’;”.
“ＭＳＰ明朝=’ＭＳＰ明朝’,’MS PMincho’;”.
“ＭＳ明朝=’ＭＳ明朝’,’MS Mincho’;”.
“游明朝=’游明朝’,’Yu Mincho’;”.
“ヒラギノ明朝=’ヒラギノ明朝 Pro W3′,’Hiragino Mincho Pro’,ヒラギノ明朝 ProN W3′,’Hiragino Mincho ProN’;”.
“游明朝体=’游明朝体’,’YuMincho’;”
;
return $settings;
});
add_editor_style(“editor-style.css”);//—————————————————————————
// ビジュアルエディタのフォント変更
//—————————————————————————
add_editor_style(‘editor-style.css’);
function custom_editor_settings( $initArray ){
$initArray[‘body_class’] = ‘editor-area’; //オリジナルのクラスを設定する
return $initArray;
}
add_filter( ‘tiny_mce_before_init’, ‘custom_editor_settings’ );

続いては以下の内容で Editor-style.css と言うファイルを作って、サーバーにアップロード。

/* フォントを指定するクラス */
body.mceContentBody {
font: 14px/1.6 “メイリオ”, Meiryo, “游ゴシック”, YuGothic, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Verdana, Osaka, “ＭＳＰゴシック”, “MS PGothic”, sans-serif; overflow-wrap: break-word; word-break: normal;
}
.editor-area a {
color: #339933;
text-decoration: underline;
}
.editor-area h3 {
padding: 3px 13px 6px;
font-size: 116%;
color: #666666;
margin-bottom: 1em;
border-bottom: 1px solid #CCCCCC;
}

次はテーマの Lightning に、次のCSS を追加。

body {
font-family: “メイリオ”,Meiryo,”ＭＳＰゴシック”,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,sans-serif;
}

さまざまなサイト様を参考にさせて頂き（←ありがとうございました m(__)m ）、変更を加えました。
あー疲れた(^^;

（テーマで直接上記の箇所を変更したりアップロードした後でテーマに更新が入ると、修正部分が消えてしまいますのでご注意。その際は子テーマの使用を検討して下さい。←私は修正箇所をテキストファイルで保存しておき、その都度変更してますが(^^;）

しかし、これでも元に戻りません。もしかして！と思ってブラウザのキャッシュをクリアしたら…
おお、直った！。全く、人騒がせな…。結局、なぜフォントが変わったのか、原因は不明のままです。
しかし、今書いている鳥居峠のシリーズが終わると、次のシリーズが既に控えているので、とりあえず直って一安心です。

さ、また頑張って書こうっと。…あ、最近スズメ日和更新してないな…(^^;