こんにちは、のぴたん係長です＾＾
はてなブログで記事を書いていて困ったことと、その解決方法を書いていきいます。
今回は、Webフォントを使う方法 です。
他サイトのブログで、ちょっと変わったデザインのフォントが使用されているのを見かけたのですが、調べてみると Google Fonts + 日本語 で提供されているWebフォント「ニコモジ（Nico Moji）」であることが分かりました。
「ニコモジ（Nico Moji）」はこんなフォントです。
にこもじ
ニコモジ
僕のサイトでも「ニコモジ（Nico Moji）」を導入したので、その手順を解説します。
目次
Webフォントを使うメリット
Webフォントを使うと、どの端末でも、Webページの製作者がイメージしたとおりに表示することができます。
当たり前のことを言っているように聞こえますが、Webフォントが登場する以前は当たり前ではなかったのです。
Webフォントを使わない場合は、端末によって異なるフォントが使われてしまう
通常、パソコンやスマホでWebページを表示する時、フォントは各端末にインストールされているものが使われます。
このため、Webページのデザインをある特定のフォントに依存させてしまうと、そのフォントがインストールされていない端末では別のフォントが使用されてしまい、Webページの表示結果が製作者がイメージしたものとは異なってしまう可能性があります。
Webフォントを使用すれば、どの端末でも同じフォントが使われる
Webフォントはサーバーに配置され、各端末でWebページを表示する際にサーバーからフォントを取得するので、どの端末でも同じフォントで表示できます。
使いたいフォントが端末にインストールされていなくても大丈夫 です。
はてなブログで Google Fonts を使う方法
僕のブログのタイトルをWebフォント「ニコモジ（Nico Moji）」で表示するように設定したので、その手順を説明します。
他のWebフォントを使いたい場合や、他の場所で使い場合でも、基本的な流れは同じです。
手順は大きく2つです。
- Webフォントを使う準備
- Webフォントを指定する
1. Webフォントを使う準備
Google Fonts + 日本語 のサイトを開きます。
https://googlefonts.github.io/japanese/
ページをスクロールして、「ニコモジ（Nico Moji）」をクリックします。
他のフォントを使用したい場合は、それをクリックすればOKです。
画面右側の <link> タグの行全体をコピーします。
別のタブで、はてなブログの管理画面を開き、デザインをクリックします。
カスタマイズのアイコンをクリックします。
ヘッダーをクリックします。
先ほどコピーした <link> タグのコードを、テキストボックスに貼り付けます。
これで、自分のブログで、Webフォント「ニコモジ（Nico Moji）」を使用する準備が整いました。
2. Webフォントを指定する
導入したWebフォントは、ブログ内のどこででも使用できますが、本記事では、ブログのタイトルで使用する方法をご紹介します。
Google Fonts + 日本語 のタブに戻って、今度は font-family プロパティの行全体をコピーします。
はてなブログの管理画面に戻って、デザインCSS をクリックします。
先ほどコピーした font-family プロパティのコードを、テキストボックスに貼り付けます。
貼り付けたコードを修正します。
ここでは、ブログのタイトルのフォントを変更したいので、以下のように修正します。
修正前：
.wf-nicomoji { font-family: "Nico Moji"; }修正後：
#title a { font-family: "Nico Moji"; }波括弧 { } の前の .wf-nicomoji を #title a に変更しました。
これはセレクターといって、波括弧 { } 内に記述したプロパティを、Webページ内のどのHTML要素に適用するかを指示するものです。
#title a で、ブログタイトルのHTML要素を指し示しています。
「ニコモジ（Nico Moji）」を使う方法については、以上となりますが、1点だけ注意事項があります。
次の章で詳しく説明します。
注意！「ニコモジ（Nico Moji）」に漢字は含まれていない
漢字のフォントは変化なし
「ニコモジ（Nico Moji）」に含まれているのは、ひらがなとカタカナだけで、漢字のフォントは含まれていません。
このため、「ニコモジ（Nico Moji）」を適用した文字列に漢字が含まれている場合、ひらがなとカタカナのフォントは変化しますが、漢字のフォントは変化しないので、注意してください。
例として、僕のブログタイトル「のぴたん係長のブログ」に「ニコモジ（Nico Moji）」を適用した結果を見てみましょう。
「ニコモジ（Nico Moji）」適用前：
「ニコモジ（Nico Moji）」適用後：
このように、ひらがなとカタカナのフォントは変わります。
しかし、漢字のフォントは変化なしです。
漢字のフォントを変える
このままだと、「係長」のフォントがカクカクしていて、丸みを帯びた「ニコモジ（Nico Moji）」との親和性がよくありませんね。
そこで、ひらがなとカタカナは「ニコモジ（Nico Moji）」のままで、漢字だけ別のフォントに変えます。
使うのは、「M PLUS Rounded 1c」というフォントです。
このフォントも、Google Fonts + 日本語 で提供されているWebフォントです。
Webフォント「M PLUS Rounded 1c」を使用するために、「はてなブログの管理画面 ＞ デザイン ＞ カスタマイズ ＞ ヘッダー」で開いたテキストボックスに以下のコードを貼り付けます。
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap" rel="stylesheet">補足
wght@700は、フォントの太さを表しています。
僕のブログで使用しているデザインテーマでは、タイトルのfont-weightプロパティがboldに設定されています。boldは数値で表すと700なので、上記のようにwght@700と指定することで、boldに対応したフォントを読み込むようにしています。display=swapは、サーバーからのWebフォントの取得が完了するまでの間、端末にインストール済みの代替フォントを使って文字を表示するように指示するものです。
これにより、Webフォントの取得に時間が掛かった場合に、何も表示されない、という事態を回避することができます。
先ほど書いた font-family プロパティのコードを以下のように変更します。
#title a { font-family: "Nico Moji", "M PLUS Rounded 1c"; }font-family プロパティには、カンマで区切って複数のフォントを指定することができます。
例えば、font-family: "A", "B", "C"; と指定した場合、フォント A が優先的に使用されますが、もしフォント A に含まれていない文字があった場合、その文字にはフォント B が使用されます。もし、フォント B にもなかった場合は、フォント C が使用されます。
上記の例では、"Nico Moji" には漢字のフォントが含まれていないので、漢字には "M PLUS Rounded 1c" のフォントが使用される、ということです。
「ニコモジ（Nico Moji）」の文字サイズが小さめなので、ついでに文字サイズも大きくするために font-size プロパティを追加して、最終的に以下のようにしました。
#title a {
font-family: "Nico Moji", "M PLUS Rounded 1c";
font-size: 180%;
}では、結果を見てみましょう。
「係長」のフォントが、変化してますね！
漢字が丸みを帯びたフォントに変わったので、ひらがなやカタカナとの親和性がよくなっています＾＾
また、文字のサイズを大きくしたことで、タイトルの長さもフォント変更前とほぼ同じになりました。
このように、Webフォントを使用することで、端末に依存せずに好きなフォントを使って自分のブログをデザインすることができます。
ネット上には、様々なWebフォントが公開されていますので、お気に入りのフォントを見つけてみて使ってみてください！
それでは、今回はこの辺で。