カテゴリー
WordPress

Twenty Twenty のフォントを変更する方法

TwentyTwenty のフォントを変更する方法を検索して探したのですが、たいした方法がでてきませんでした。新しい子テーマを作る方法が一般的なようですが、そうするとテーマ本体にアップデートがかかったときに不便です。

WordPress にはカスタム CSS という機能があり、テーマのカスタマイズはここへの記述で対応できる範囲で頑張るべきだろうと思います。まずは、フォントの変更を、昔ながらの手法で:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap');

body.home, p, .entry-content {
    font-family: Noto Sans JP !important;
}

このように記述してみました。ネット上で検索しても、カスタム CSS でテーマを修正している人を発見できなかったので、載せておきます。でも、これって、あまりいい方法じゃないんだろうか。

カテゴリー
日記

WordPress 2.8 の編集画面のフォント

このところ仕事が大変で、ブログを書く気力がなかなかわきませんでしたが、ようやくひと段落ついたので更新しようと、先々週にバージョン 2.8 へとアップグレードした WordPress の編集画面を開いてガッカリ。WordPress の編集画面に使われているフォントが、再びメイリオからセリフ体のフォントに変えられてしまっているじゃないですか。

WordPress の編集画面のフォントがセリフ体になってしまっている図。
WordPress の編集画面のフォントがセリフ体になってしまっている図。

Microsoft がメイリオフォントを Windows XP にも無償配布するようになって早一年。僕はそれより少し前から Visual Studio 経由で使用していましたから、もう 1 年半以上メイリオを使ってきました。Firefox のオプションで規定のフォントをメイリオに設定していたので、WordPress の編集画面も自動的にメイリオが使われていたのですが、これが WordPress のバージョン 2.7 以降、ブラウザの規定の設定を無視してセリフ体を表示するように、WordPress の仕様が改悪されてしまいました。

メイリオになっている図。メイリオは本当に優れています。きちんとアンチエイリアス処理がされているにもかかわらず、ヒラギノのようにコントラストがボケてしまうことがない。
メイリオになっている図。メイリオは本当に優れています。きちんとアンチエイリアス処理がされているにもかかわらず、ヒラギノのようにコントラストがボケてしまうことがない。

仕方がないので WordPress の CSS をひも解いて、編集画面のフォントをセリフ体に指定している部分を割り出して、その部分の記述をメイリオに切り替える作業を行いました。残念ながらその後 WordPress をバージョン 2.7.1 へとアップグレードしたときに、再び設定がセリフ体へと戻されてしまったのですが、2.7 で作業したときと同じ箇所を修正してやれば、問題は解決してくれました。

ところが、2.8 へのアップグレードを行った今回は、これまで修正してきた箇所を書き換えてもフォントがメイリオになりませんでした。詳しい話はこちらのページに書きましたが、せっかくブログを更新しようと思ったのに、この日はこんなくだらない作業をするだけで、時間をめいっぱい使ってしまったのでした。

カテゴリー
WordPress

WordPress 2.7 へのアップグレードにまつわる問題

投稿画面のフォントが明朝体になってしまった

投稿画面のフォントは、wp-includes/js/tinymce/wordpress.css の 54 行目に書かれた font プロパティで指定されています。初期状態での設定は以下の通り、いずれもセリフ体が指定されています。

[source language=css]font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;[/source]

2.6 以前の WordPress と同様に、投稿画面にサンセリフ体を表示させたい場合は、ここにそのフォント名を追加すれば大丈夫なはずなのですが、

  • ブラウザのキャッシュ
  • Google Gears

のために、サイト上の当該ファイルを変更しても、ブラウザ上の表示がなかなか変わらないため、注意が必要です。Google Gears は Firefox の場合なら [ツール] メニューから無効にすることができます。僕はサイト自体がメイリオで書かれていますので、

[source language=css]font: 13px/19px Meiryo, Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
[/source]

と書きなおして使用しています。