ブログの英字タイトルをWebフォントでおしゃれに変更しよう!

google-web-fonts-thumbnail

以前、「Noto Sans Japanese」というWebフォントを紹介しました。

noto-sans-japanese-thumbnail
Webフォント「Noto Sans Japanese」の導入方法を紹介します。 「Noto Sans Japanese」は、Googl

とても綺麗なフォントですが、日本語フォントのため英字には反映されません。

「Noto Sans Japanese」は英字に反映されない

「Noto Sans Japanese」は英字に反映されない

やまかわ
これはダサいですよね……せっかくの英字タイトルが台無し

ということで今回は、Webフォント「Google Web Fonts」を使って英字タイトルをおしゃれにカスタマイズする方法のご紹介です。

例として、「Google Web Fonts」の中のLobsterというフォントを反映させるとこのようになります。

「Google Web Fonts」を導入した例

「Google Web Fonts」を導入した例

まこと先生
こんな変わったフォントが使えるんですね!画像みたい!
ほんとですね、でもこれ普通のテキスト文字なんですよ
やまかわ
まこと先生
へぇ~、すごい!
2018年7月27日現在、フォントは878種類もあります。しかもすべて無料です
やまかわ
まこと先生
選びたい放題ですね!好みのフォントを探すだけで一日かかりそう(笑)
フォントだけでブログの雰囲気もガラリと変わるので、イメージ付けにWebフォントはぜひ取り入れたいところです
やまかわ

「Google Web Fonts」導入の手順

導入するには以下の手順でカスタマイズをおこないます。

  1. 好みのフォントを探す
  2. フォントのタグを取得する
  3. CSS読み込みタグとCSSをサイトに追加する

1.好みのフォントを探す

下記リンク先にたくさんのフォントが掲載されています。
まずは好きなフォントを探しましょう。

Google Fonts

2.フォントのタグを取得する

好みのフォントを見つけたらタグを取得します。

Lobster

Lobster

フォント右上の+をクリックします。

フォント保存ボタン

フォント保存ボタン

3.CSS読み込みタグとCSSをサイトに追加する

右下に別ウィンドウが表示されます。
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」は選びきれないほどたくさんあります。
ブログの雰囲気に合ったおしゃれなフォントを探してみてください。

Google Fonts

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

承認制のため反映にお時間をいただきます。