りんごが好きなのでぃす

Mac/iPhone/iPadなどに関する話題を届け続けて今年で地味に24年目

【お知らせ】フォントの変更とCSSの軽微な調整をしました

f:id:kjx130:20160704105442j:plain

特に理由はないのですが、ある日ネットを徘徊している最中に自分のブログのフォントが気になり始めてしまったので、気分転換と幾分かの視認性向上を期待してフォントを変更してみました。

ちなみにいま、このエントリーを書いている時点で適用しているテーマは "UnderShirt" というもので、去年の6月から使用中。

blog.hatena.ne.jp

フォントに関してはGoole Fontsから "Open Sans" を使用していました。

Google Fontsに追加された日本語フォント

先ほどネットを徘徊中にと書きましたが、もうひとつ、フォント変更を検討する材料となったニュースがありました。それがこちら:

coliss.com

というわけで、これらの中からパソコンでもスマホでも、あるいはタブレットでもこれまでより視認性が向上して読みやすくなりそうな "M PLUS 1p" から若干太めの "Medium 500" を採用。

fonts.google.com

これが(macOSの場合、実際には少し違うけど)

f:id:kjx130:20211004141716p:plain

macOS標準の角ゴシック(ブログ上のフォントとは違うけど概ねこんなイメージ)

変更後はこう:

f:id:kjx130:20211004141559p:plain

日本語も英数字も "M PLUS 1p" の "weigt 500"

こうやって並べると太さが変わっただけに見えちゃうなぁ……個人的にはもっと劇的に変化したと思ってたんだけど(^-^;

変更方法

同じ "M PLUS 1p" の "Medium 500" を適用する場合を例にすると:

  1. Google Fonts "M PLUS 1p / Medim 500" を選択する
  2. 右側の "Use on the web" の欄で "<link>" を選び、その下のグレーの欄内に記述されているタグを全選択してコピー
  3. 自分のはてなブログに戻り、設定>詳細設定を開く
  4. 詳細設定画面の中段ほどにある "<head>要素のメタデータを追加" と題されている欄内に先ほどコピーしたタグをペーストして、ページ最下部の[変更する]ボタンをクリック
  5. 先ほどのGoogle Fontsのページに戻り、先ほどコピーしたタグが記されている欄の下にある "CSS rules to specify families" に記されているスタイルシート "font-family: 〜" を全選択してコピー
  6. 自分のはてなブログに戻りデザインページを開いたら、レンチアイコンをクリックし、一番下に表示されている "デザインCSS" の項目をクリック
    f:id:kjx130:20211004144015p:plain

ここまででCSS編集用の別窓が開いているはずなので、あとはフォントスタイルを適用したいHTMLタグにこのスタイルを割り当てるだけです。

自分の場合は面倒臭いのでブログ全体に変更が反映されるよう、<body>タグにこのフォント指定を掛けると同時に、本文の文字色だけ黒から濃いグレーに変更しました:

body {font-family: 'M PLUS 1p', sans-serif; }
p {color: #444 !important; }

以上、参考になれば。