ブログのコードブロックのCSSを更新しました

はじめに

どうも‪✋(´･ᴗ･` )‬
ブログのコードブロックのCSSを更新しました。

フォントの優先順位が気に食わなかったんですね。

テーマのデフォルトはこんな感じ。

pre.code {
    font-family: Monaco,Consolas,Courier New,Courier,monospace,sans-serif
}

わざわざこんな記事を読んでいる方はご存知かもですが, CSSではfont-familyに書かれたフォントは先頭から順に適用されていきます。
MonacoがないならConsolas, ConsolasがないならCourier New...といった具合です。

というわけでここの順番を私好みの順番にして, できるだけ私が気持ち良いと感じるフォントで表示されるようにしたいわけです。私のブログなのでね。

以下, 各フォントのﾜﾀｸｼ目線の説明です。

これはmacOSにプリインストールされています。
ちょっと柔らかい感じで好きです。

これはWindowsに最初から入っているフォントです。
フォント自体は良いのですが, 私のお気持ちとしてはmacOSにプリインストールされているフォントから順に書きたいのでこれはやや後ろに配置したいです(macOSの方がプリインストールされているフォントに恵まれているので)。

これはmacOSにもWindowsにもプリインストールされています。
字形は私好みではありません。
macOSで見るときれいなのですが, Windowsで見ると壊滅的に汚いですね。

これもmacOSにもWindowsにもプリインストールされています。
字形があまり私好みではありません。。

Wikipedia先生に拠ればLinuxにプリインストールされているらしいです(手元にLinuxマシンがないのでスクショはない)。
ググった感じだと字形があまり好きではないですねｗ

結局こうなりました。

pre.code {
    font-family: "Monaco", "Consolas", "monospace", "Courier New", "Courier", "sans-serif" !important;
}

このブログの一番最初の記事をテスト用の記事にしているのでどうなったか見てみたのですが, こんな感じになりました。

macOSではMonacoが使われています。

WindowsではConsolasですね。

ちなみにデフォルト設定のままだとCourierが優先的に使われるWindowsは, デフォルトはこんな感じでした。
汚い。。

iPhoneにはMonacoもConsolasもインストールされていないみたいですね。
おそらくCourierシリーズのフォントが適用されています。
Courierシリーズの字形はあまり好きではないので残念ですが, こればかりはいたしかたなし。