ブログの英字タイトルをWebフォントでおしゃれに変更しよう!
以前、「Noto Sans Japanese」というWebフォントを紹介しました。
Webフォント「Noto Sans Japanese」の導入方法を紹介します。
「Noto Sans Japanese」は、Googl
とても綺麗なフォントですが、日本語フォントのため英字には反映されません。
やまかわ
これはダサいですよね……せっかくの英字タイトルが台無し
ということで今回は、Webフォント「Google Web Fonts」を使って英字タイトルをおしゃれにカスタマイズする方法のご紹介です。
例として、「Google Web Fonts」の中のLobsterというフォントを反映させるとこのようになります。
まこと先生
こんな変わったフォントが使えるんですね!画像みたい!
ほんとですね、でもこれ普通のテキスト文字なんですよ
やまかわ
まこと先生
へぇ~、すごい!
2018年7月27日現在、フォントは878種類もあります。しかもすべて無料です
やまかわ
まこと先生
選びたい放題ですね!好みのフォントを探すだけで一日かかりそう(笑)
フォントだけでブログの雰囲気もガラリと変わるので、イメージ付けにWebフォントはぜひ取り入れたいところです
やまかわ
「Google Web Fonts」導入の手順
導入するには以下の手順でカスタマイズをおこないます。
- 好みのフォントを探す
- フォントのタグを取得する
- CSS読み込みタグとCSSをサイトに追加する
1.好みのフォントを探す
下記リンク先にたくさんのフォントが掲載されています。
まずは好きなフォントを探しましょう。
2.フォントのタグを取得する
好みのフォントを見つけたらタグを取得します。
フォント右上の
をクリックします。3.CSS読み込みタグとCSSをサイトに追加する
右下に別ウィンドウが表示されます。
CSS読み込みタグとフォントプロパティーを確認してください。
CSS読み込みタグを<head></head>
内に追加します。
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Lobster' type='text/css'>
次にCSSを追加します。
ここはお使いのブログによって違います。
反映させたいセレクタを確認して設定してください。
CSSの例
//サイトタイトル
.sitename a {
font-family: 'Lobster', cursive;
}
これでタイトルが「Google Web Fonts」に変更されます。
タイトル以外にもメニューやサイドバーに使っても面白いかもしれません。
CSSの例
//グローバルメニュー
ul.menu li {
font-family: 'Lobster', cursive;
}
//サイドバー見出し
.sidebar h2 {
font-family: 'Lobster', cursive;
}
フォントによっては、サイト全体に反映させちゃってもいいですね!
ただし、奇抜なフォントだと見づらくなるので注意! あくまで訪問者の読みやすさを意識しましょう。
CSSの例
//サイト全体に反映
body {
font-family: 'Lobster', cursive;
}
「Google Web Fonts」は選びきれないほどたくさんあります。
ブログの雰囲気に合ったおしゃれなフォントを探してみてください。