Lognote

ネット集客に強い整体院サイトを制作

stinger6-logo-use-google-web-fonts-thumbnail

WordPressの英字フォントをGoogle Web Fontsに変更してかっこよくカスタマイズする方法

公開日:2016-02-22
最終更新日:

Pocket

以前書いた記事で「Noto Sans Japanese」というフォントを使ってきましたが、これは日本語専用のフォントなので英字には反映されません。

私の場合タイトルがそうですが、こんな感じ。

google-web-fonts-01

ヤマカワ
これはダサいですよね……せっかくの英字タイトルが台無し

ということで、今回は英字専用のWebフォント「Google Web Fonts」を使って、かっこよくカスタマイズする方法を紹介します。

今回導入するGoogle Web Fontsは、「Noto Sans Japanese」の逆で全てアルファベットにしか対応していません。日本語には対応しませんのでご注意ください。

最終完成イメージ

Google Web Fontsを反映させると、このような感じになります。

google-web-fonts-05

これが画像じゃなくてテキスト文字っていうのがすごいですよね!

ちなみに2017年5月23日現在、フォントは818種類もあります。フォントだけでブログの雰囲気もガラリと変わるので、イメージ付けにWebフォントはぜひ取り入れたいところです。

カスタマイズの手順

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

  • 好みのフォントを探す
  • フォントを保存する
  • METAタグとCSSをサイトに追加する

好みのフォントを探す

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

フォントを保存する

私はLobsterというフォントにしてみることにしました。

google-web-fonts-02

フォントの横のQuick-useという右矢印をクリックします。

google-web-fonts-03

METAタグとCSSをサイトに追加する

下の方にスクロールすると、METAタグとCSSが表示されます。

google-web-fonts-04

Lobsterだとこんな感じです。それぞれhead内とCSSに追加しましょう。

<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Lobster' type='text/css'>

私が使用しているSTINGER8のCSSを紹介します。違うテーマをお使いの方は、反映させたいセレクタで設定してください。

//タイトルロゴ
.sitename a {
    font-family: 'Lobster', cursive;
}
//グローバルメニュー
header .smanone ul.menu li a {
    font-family: 'Lobster', cursive;
}
//サイドバー見出し
.menu_underh2 {
    font-family: 'Lobster', cursive;
}

Google Web Fontsはたくさんあるので、いろいろ変えて遊んでみるのもいいかもしれません。

以上、「WordPressの英字フォントをGoogle Web Fontsに変更してかっこよくカスタマイズする方法」という記事をお届けしました。

-WordPress
-,

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

WordPressの英字フォントをGoogle Web Fontsに変更してかっこよくカスタマイズする方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

comment-coupon-thumbnail

整体院の口コミ促進!コメントをくれた方に電子クーポンを配る方法

先日、WordPressの標準コメント機能を使って、お客様の声を掲載する方法を紹介しました。今回はそのおま...

mts-simple-booking-c-fatal-error-thumbnail

「MTS Simple Booking-C」フェイタルエラーの解決方法

Web予約カレンダーを設置するプラグイン「MTS Simple Booking-C」にフェイタルエラーが出てしまいました...

salon-for-wordpress-theme-healer-thumbnail

整体院・サロン専用WordPressテーマ「Healer」をリリースしました

スマホ対応。SEO対策とウェブ集客便利機能標準装備。整体院・サロン経営に特化した専用WordPressテーマ...

custom-post-category-thumbnail

WordPressで通常の投稿かカスタム投稿か判断してカテゴリー名を表示する方法

普段使い慣れないカスタム投稿タイプを使ったところ、普通のカスタマイズと勝手が違い四苦八苦しております。 今回は …

font-awesome-thumbnail

アイコンフォント「Font Awesome」をWordPressに導入する方法

アイコンフォント「Font Awesome」を、WordPressに導入する方法を紹介します。 目次Font …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい