カテゴリー整理とNoto Sans JPフォントの導入

カテゴリーの登録を見直しました。350件ほどあったので一つ一つ修正する作業をコツコツと。。。だいぶ古い内容しかないので需要はないかもしれませんが、多少はアクセス性が良くなったと思います。

フォントを変更しました。カテゴリー整理をしながら一つ一つの記事を見直していたときに気がついたことが幾つかありまして。。。

• MS Pゴシックの線が細くて見づらい
• 全体的にフォントサイズが小さくて見づらい

普段WordPressの記事などで見かけるフォントは見やすいと思うことが多く、調べてみるとNoto Sans JPというGoogleが公開しているWebフォントがあることを知りました。ココログでNoto Sans JPを適用された方の記事を見つけたので、そちらを参考にさせていただきました。

参考サイト：
ココログのフォントをWebフォント（Noto Sans JP）に変更してみた　（たまに書く日記帳）

ココログ管理メニューの「デザイン＞テーマの変更」の中で、ブログで使用するフォントを選べるのものの、日本語はゴシックか明朝体しか選べないのでした。

ここで選んだフォントがhtml各要素のfont-familyとしてCSSで定義されてしまうため、カスタムCSSでbodyにfont-familiyを設定しても適用されず苦労しました。Noto Sans JPで説明されているやり方だけでは不十分なので、参考サイトの内容がとてもありがたかったです。私の場合は左サイドのメニュー類にも適用したかったので、カスタムCSSでのオーバーライドにtr, th, caption, liの要素を加えています。また、ソースコード用のフォントにSource Code Proを選んでpre要素用に入れてみました。

Google Analyticsトラッキングコードへの追加内容

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Source+Code+Pro:wght@400;600&display=swap" rel="stylesheet">

カスタムCSSへの追加内容

body, .content, .content p, h1, h2, h3, h4, h5, h6, tr, th, caption, li {
	font-family: 'Noto Sans JP', sans-serif !important;
}

pre {
	font-family: 'Source Code Pro', monospace !important;
	white-space: pre-wrap;
}

小さい文字が見づらいのは老眼が始まったからでしょうか・・・。全体的に小さくしていたので、1段大きいものになるように変更しました。

これまでメールの文面のような感じで適宜改行を入れていたのですが、段落単位での整形はブラウザに任せてみることにします。昔に比べて閲覧環境の違いが多くなったので、読みやすくなると思って入れた改行が読み手の方にとって読みやすい状態で表示されるとは限らないということに気づいたからです。モバイル用サイトで見ると、変なところで改行されてしまうことになりますし・・・。文字を大きくしたこともあり、あまり違和感はないかなぁ、と思っています。

それはそうと、随分久しぶりにhtmlのタグやCSSを編集しました。だいぶ忘れていますね。