投稿

2月, 2024の投稿を表示しています

Bloggerで日本語のGoogle Fontsを使うための設定方法

イメージ
Blogger で Google Fonts(日本語 Web フォント)を設定する方法です。 Web フォントとは 異なるプラットフォームやブラウザで同じ表示を実現できます。Web フォントには様々ありますが、代表的な物に Google Fonts があります。 様々なフォントを無料で Web サイトに適用することができるもので、今回はそれを Blogger に適用してみました。 Google Fonts を Blogger に設定 まず、 Google Fonts のサイトで使いたいフォントを選択します。よく使われているフォントは Noto Sans Japan でしょうか。いくつか文字の太さがありますが、一般的な Regular 400 を選択してみます。 Use on the web という部分にコードが表示されるので、これをコピーします。 なお、後で使うので「CSS rules to specify families」にあるコードをコピーしておきます。 Bloggerの[テーマ]を開き、カスタマイズの「▼」から「HTMLを編集」を選択。 headタグの下にコピーしたコードを貼り付ければ良いのですが……そのまま貼り付けるとエラーが出て保存できません。 すべての link タグの最後に「/」を付けてタグを閉じる。 2 行目の crossorigin を crossorigin="crossorigin" に変更。 3 行目の「&」を「&amp」に変更(&を小文字にしてください)。 保存ボタンを押下して保存できれば準備は OK です。ひとつ前の画面に戻ります。 カスタマイズボタンを押下して、カスタマイズページに遷移します。 [詳細設定]のドロップダウンリストから「CSS を追加」を選びます。 ブログすべてにWebフォントを適用したいのであれば、カスタムCSSに先ほどコピーしたCSSを「*」で全体に適用すればOK。 例えばこんな感じ。「*{font-family: 'Noto Sans JP', sans-serif;}」 編集後は忘れずに保存しましょう。