WordPressサイトのヘッダーメニューのフォントを変更する

WordPressヘッダーだけフォント変えてみた

こんにちは、玄米です。今回は、Googleフォントを使用したWordPressサイト(SWELLを使用)のヘッダーメニューのみフォント変更をやってみたのでその方法をメモします。いわゆる学習ノートです。私はなぜかGoogle Fontsに難しそう、という謎の苦手意識を持っていたのですがめちゃくちゃ簡単でした。。

ビフォーがなきゃ、アフターが締まらないということで、フォント変更前のトップ画面はこちらです。画像の中の「ホーム」「このサイトについて」のフォントを変更します。

変更前:トップページ
目次

WordPressのフォントを変えるには??

そもそもWordPressのフォントを変えたいなら何をすれば良いのでしょうか。
テーマによっては、いくつかフォントが事前に用意されていて管理画面で選択できることもあります。SWELLだろ、

  • 游ゴシック
  • ヒラギノゴシック(>メイリオ)
  • Noto Sans JP
  • 明朝体(Noto Serif JP)

の4つのフォントが利用できます。(SWELL公式ドキュメントより)
ただしこれ以外のフォントを使いたい、もしくは一部だけ適用したいとなったときは、追加の方法を探す必要があります。

WordPressのフォントを変える方法は、大きく分けて2つです。

  1. 外部のサーバーにおかれたWEBフォントを利用する。
  2. 自分のサーバーにフォントを置いて利用する。 (KINSTAブログより)

それぞれメリット・デメリットがありますが、今回はWEBフォントでフォント変更をやってみます。
WEBフォントにも色々あるんですが、今回はGoogle Fontsを使用します!

WordPressでのGoogleフォントの使い方

そもそも論としてGoogleフォントを使うには、

  1. フォントをダウンロードして自分のサーバーに置いて使う。
  2. 外部のサーバーに置かれているフォントを読み込んでつかう。
  3. プラグインを使う(WordPressの場合)

の2パターンがあります。今回は、2つ目の方法でやっていきたいと思います。

ちなみに2の方法をさらに細分化すると、

  1. フォントをダウンロードして自分のサーバーに置いて使う。
  2. 外部のサーバーに置かれているフォントを読み込んでつかう。
    1. フォントファイルを読み込む。
    2. CSSファイルに変更したい箇所にスタイルを当てる。

となります!それではやっていきます。

フォントファイルを読み込む

Google Fontsのサイトから使いたいフォントを探す。

1.Google Fontsにアクセスして、欲しいフォントを探します。
画面上部の"Language"というメニューから各言語対応のフォントを絞り込むことができます。
Google Fonts トップページ
2.使いたいフォントを見つけたら、「+ Select this style」をクリックして追加します。
例:「Yusei Magic」のフォント個別ページ
3.読み込みに必要なコードをコピーします。

「+ Select this style」をクリックすると、下記のような画面が登場します。
HTMLのlink要素に追加する方法と、CSS側でインポートする方法があります。

3-1 link要素の場合

(1)コードを追加する下線部分のURLをコピーします。

(2)子テーマにコードを挿入します。

SWELLの子テーマのfunction.phpは以下のようになっています。(SWELL公式サイトからダウンロード後、一部抜粋)

/**
 * 子テーマでのファイルの読み込み関数
 *   $query : 各ファイルに付与するクエリ文字列。
 */
add_action('wp_enqueue_scripts', function() {
    
    //$query = '1.0';
    $query = date('Ymdgis');  /*子テーマのstyle.cssのブラウザキャッシュを無効にする。 */

    /* 子テーマのstyle.css読み込み */
    wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $query );

    /* その他の読み込みファイルはこの下に記述 */

}, 11);

とても親切に「/* その他の読み込みファイルはこの下に記述 */」と書いてあるのでその下にこのコードをいれます。

wp_enqueue_style( '任意のハンドル名', "コピーしたURL(使いたいフォントファイルまでのパス)");

(ハンドル名はもろもろ操作する時、識別するためのお名前ってイメージなんだけどそれでいいんだろうか。。。)
これで、サイトにGoogle Fontsが読み込まれました…!

3-2 CSSでインポートする方法

CSS側でインポートする場合はもっと簡単!四角枠部分の@import url(~)をコピーしてstyle.cssに貼り付けます。

「Use on the web」の中の@importをクリックして出てきた@import url()をコピペしてstyle.cssに貼り付けます。

フォントを変えたい場所にスタイルを当てる。

検証機能を使ってフォントを当てるべき場所を探します。CSSコードは、下の赤丸の部分です。

CSSコードは、画面右下の「CSS rules to specify families」という枠の中のCSSコードを使用します。
 /* PCとスマホのメニューの文字のフォントを変更する*/
.c-gnav,.c-spnav,.c-widget__title.-spmenu{
    font-family: 'Yusei Magic', sans-serif;
}

すると….無事フォントが変更されました!やったー
(「さぁ、始めよう。」の画像まで変わっているのは、テーマの仕様です。SWELLは、特に何も設定していないとランダムでおしゃれな画像をトップページにしてくれます。なんて親切なんだ…)

変更後:トップページ

余談ですが、何度か「フォントが変わらない!さっきまで変わっていたのに、、」ということがありました。それで数日悩んで見つけた原因はコメントアウトのし忘れでした(チーン…)

参考資料

今回の参考資料、着想のもととなったのは以下です。ありがとうございました!

SWELL
サイト全体のフォントファミリーに関する設定について | WordPressテーマ SWELL このページでは、WordPressテーマ「SWELL」でのフォントの種類を設定する方法について解説していきます。 フォントに関する設定項目は、「外観」>「カスタマイズ」>「サ...
Kinsta
WordPressでフォントを変える方法(サイズやカラーの変更、最適化) フォントを変えるだけでつまらないウェブサイトが一気に素敵になります。WordPressでフォントを変更する方法を学んで、あなたのウェブサイトをモダンでプロフェッショナル...
みさきweb
【SWELL】ヘッダー・フッターメニューにカーソルを乗せたときに反転色にする | みさきweb SWELLのヘッダーのホバーエフェクトは5種類から選べて、かなり充実してますよね。個人的にはマウスを乗せたときに色が反転するのが好きなので、CSSをメモっておきます。 フ...
あわせて読みたい
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる