ブログの英字タイトルをWebフォントでおしゃれに変更しよう！
以前、「Noto Sans Japanese」というWebフォントを紹介しました。
とても綺麗なフォントですが、日本語フォントのため英字には反映されません。
「Noto Sans Japanese」は英字に反映されない
やまかわということで今回は、Webフォント「Google Web Fonts」を使って英字タイトルをおしゃれにカスタマイズする方法のご紹介です。
例として、「Google Web Fonts」の中のLobsterというフォントを反映させるとこのようになります。
「Google Web Fonts」を導入した例
まこと先生やまかわまこと先生やまかわまこと先生やまかわ「Google Web Fonts」導入の手順
導入するには以下の手順でカスタマイズをおこないます。
- 好みのフォントを探す
- フォントのタグを取得する
- CSS読み込みタグとCSSをサイトに追加する
１．好みのフォントを探す
下記リンク先にたくさんのフォントが掲載されています。
まずは好きなフォントを探しましょう。
２．フォントのタグを取得する
好みのフォントを見つけたらタグを取得します。
Lobster
フォント右上のをクリックします。
フォント保存ボタン
３．CSS読み込みタグとCSSをサイトに追加する
右下に別ウィンドウが表示されます。
CSS読み込みタグとフォントプロパティーを確認してください。
CSS読み込みタグとフォントプロパティーを確認する
CSS読み込みタグを<head></head>内に追加します。
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Lobster' type='text/css'>
次にCSSを追加します。
ここはお使いのブログによって違います。
反映させたいセレクタを確認して設定してください。
//サイトタイトル
.sitename a {
font-family: 'Lobster', cursive;
}
これでタイトルが「Google Web Fonts」に変更されます。
タイトル以外にもメニューやサイドバーに使っても面白いかもしれません。
//グローバルメニュー
ul.menu li {
font-family: 'Lobster', cursive;
}
//サイドバー見出し
.sidebar h2 {
font-family: 'Lobster', cursive;
}
フォントによっては、サイト全体に反映させちゃってもいいですね！
ただし、奇抜なフォントだと見づらくなるので注意！ あくまで訪問者の読みやすさを意識しましょう。
//サイト全体に反映
body {
font-family: 'Lobster', cursive;
}
「Google Web Fonts」は選びきれないほどたくさんあります。
ブログの雰囲気に合ったおしゃれなフォントを探してみてください。
