「Blogger」ブログ全体のフォントを自分好みの種類に変えたい【T】
 |
Google Fontsを利用して好みの書体をブログに読み込む
「Blogger」のテーマ編集画面から、世界中で広く利用されている無料のフォントサービス「Google Fonts」を連携させて新しい書体を導入します。
Google Fontsのサイトでフォントを選択すると、HTML用の「linkタグ」というスタイルシートの読み込みコードが発行されるので、これをテンプレートのヘッダー部分に挿入してください。
このリンクを設定することで、読者のデバイスにそのフォントがインストールされていなくても、インターネット経由で意図した通りの美しい文字を表示させることが可能になります。
以下の手順で、外部フォントを読み込むための準備を試してみてください。
Google Fontsの公式サイトから使用したいフォントを選び、
<link>で始まるコードをコピーします。管理画面の「テーマ」から「HTMLを編集」を開き、
<head>タグのすぐ下にコピーしたコードを貼り付けてください。保存ボタンを押し、テンプレートがエラーなく更新されてフォントが読み込まれる状態になったか確認します。
アドバイスとして、日本語フォントはデータ容量が大きいため、あまりに多くの種類を一度に読み込むとページの表示速度が遅くなってしまう恐れがあります。本当に必要な1〜2種類に絞って導入するのが、読者を待たせないための大切な配慮です。
CSSでブログ全体の文字要素にフォントを指定する
フォントの読み込み設定が終わったら、次に「CSS」を使ってブログ内のどの部分にそのフォントを適用するかを定義します。
Google Fonts側で同時に発行される「CSS rules」というコード（font-familyの指定）を使い、ブログ内のすべての文字を新しく導入した書体に一括で切り替えられるように設定します。
一部の文字だけが標準フォントのまま残ってしまうとデザインに違和感が出てしまうため、全体の指定を丁寧に行うことで、プロがデザインしたような統一感のある外観を手に入れることが可能です。
全体の書体を一括で変更する際は、以下の操作を行ってみてください。
「カスタマイズ」メニュー内の「CSSを追加」項目に
body { font-family: 'フォント名', sans-serif; }と入力します。指定したフォント名が、先ほど読み込んだフォントの正確な名称と一致しているか厳密にチェックしてください。
プレビューを表示して、記事本文や見出しの文字が意図した通りの書体に変わっているか確認します。
注意点として、特定のデバイスや環境でフォントがうまく表示されない場合に備えて、予備のフォント（sans-serifやserifなど）を必ずセットで記述しておくことが、表示の崩れを防ぐための標準的なルールとなっています。
フォントの太さや滑らかさを調整して読みやすさを整える
新しいフォントを適用した後は、文字の太さ（font-weight）や、文字の縁を滑らかに見せる設定を加えて視認性をさらに向上させます。
Webフォントは種類によって標準の太さが異なるため、細すぎてかすれて見えたり、逆に太すぎて文字が潰れてしまったりしないよう、CSSの数値を微調整して最適なバランスを見つけ出します。
フォントの種類を変えるだけでなく、その「見せ方」にもこだわることで、長文を読んでも目が疲れにくい、読者に優しいブログ環境を構築する助けとなります。
より洗練された文字周りのデザインを目指すために、次のポイントを意識して調整してみましょう。
font-weight: 400;などの数値を入力して、本文として読みやすい適切な太さになっているかチェックします。文字と文字の間隔をわずかに広げる設定を加え、窮屈な印象を与えないように配慮してください。
パソコンだけでなくスマートフォンの画面でも、文字がにじまずにくっきりと表示されているか最終確認します。
アドバイスとして、見出しには太めのフォントを、本文には標準的な太さのフォントを使い分けることで、情報の重要度が視覚的に伝わりやすくなり、読者のスムーズな理解を促す効果が期待できます。
