ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

Lightning G3でフォントを変更する方法(有料版Lightning G3 Proとの比較あり)

2021年5月に大幅リニューアルした、ワードプレスの無料人気テーマLightningでフォントの変更方法を解説します。

有料版Lighyning G3 Pro Unitを使った場合はどうなのか?も紹介します。

この記事でわかること
  • Ligtning G3での標準フォントを知る
  • Lightning G3でフォントを変更する方法を知る
    ・サイト全体を変更する場合
    ・サイト内の指定部位ごとに変更する場合
  • 有料版Lightning G3 Pro Unitでのフォントの変更方法
  • すでに準備済以外のGoogleフォントを使用する方法

テーマLightning G3の標準フォント

Lightningのフォント指定CSSを確認すると次のようになっています。

body, html {
    font-family: Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

したがって、日本語フォントはNoto Sans JPが使用されているわけですね。

Noto Sans JPはウェブフォントですので、もちろん<head>タグ内には</body>タグの直前(※)に次の記述をしてフォントの読み込みをしています。

<link rel="stylesheet" id="add_google_fonts_noto_sans-css" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP%3Awght%40400%3B700&display=swap&ver=5.8.2" type="text/css" media="all">

※一般にウェブフォント読み込みは<head>タグ内に挿入しますが、Lightning G3ではfooter部(</body>の直前)で読み込みを行っていましたので訂正いたしました。(2021年11月28日)

Noto Sans JPは、『みんな大好きNoto Sans JP』と言われるほど人気のフォントです。美しくて可読性もよいのが人気の理由でしょう。次のような見映えです。

デフォルトフォント表示
フォント:Noto Sans JP

したがってデフォルトのNoto Sans JPのままで不満はあまりないかと思います。
(ちなみにこのウェブチルサイトはテーマLuxeritasですが、同じくNoto Sans JPの設定にしております。)

それでもせっかくのwebサイトなのでこだわりのあるフォントに変更したい、という場合に以下の解説を参考にしてください。

テーマLightning G3でフォントを変更する方法

無料版のLightningの場合、テーマカスタマイザーではフォント変更をすることができません。

したがってカスタムCSSを使って、フォントの種類を変更する必要があります。

CSSは子テーマに記述するのが私のおすすめではありますが、どこに記述するのかはカスタマイズの規模に応じて決めるのがよいでしょう。

サイト全体

サイト全体のCSSはすでに見た通り

body, html {
    font-family: Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

となっているので、body, htmlをセレクターとしてfont-familyの記述をしていけばよいです。

サイト全体を游ゴシックに変更してみる

例えば游ゴシックに変更したければ、次のように記述するとよいでしょう。

body, html {
    font-family: Lato, YuGothic, "Yu Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

するとサイトの表示は次の通りとなります。

游ゴシックに変更
フォント:游ゴシック

もう一度デフォルトのNoto Sans JPを見てみると、游ゴシックの方がより繊細な印象なのがわかります。

デフォルトフォント表示
デフォルト(Noto Sans JP)の場合

Noto Sans JPのようなウェブフォントの場合は、どうしても読み込みに時間がかかることがあるので、より高速なwebサイト表示にこだわりたい場合は、游ゴシックのようにWindowsでもMacでも標準搭載されているフォントを使うのがおすすめです。

また、Noto Sans JP以外のウェブフォントを使用したい場合は、Google Fontsのサイトで該当フォントの読み込み用<link>タグを取得の上、アクションフックを使うなどして<head>タグ内に記述をしてやる必要があります。後述参照

サイト全体をメイリオに変更してみる

游ゴシック以外では、Windows Vista~Windows 7の標準フォントであったメイリオもよく使われます。ただしMacには搭載されていないので、ヒラギノ角ゴと組み合わせて使うことが多いようです。

CSSは次の通りです。

body, html {
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,sans-serif;
}

Windowsでの見映え(メイリオ)

メイリオに変更

游ゴシックだと繊細すぎるので力強さが欲しい、というときにはメイリオを使うことが多いようです。

しかしMacでは見映えが変わってしまうので、私はあまり使うことはありません。

ヘッダー内ロゴ

ヘッダーロゴのみ変更する場合は、セレクターとして.site-header .site-header-logo を使います

試しに游明朝体に変更する場合は次のように記述するとよいでしょう。

.site-header .site-header-logo {
    font-family: "游明朝", Hiragino Mincho ProN, serif;
}
ヘッダーロゴを游ゴシックに変更

その他の部位のフォント変更

ヘッダーロゴを変更したのと同じ要領で、適切なセレクターを選んでfont-familyの記述をすれば、部位ごとのフォント変更ができます。

各部位ごとのセレクターをまとめると以下の通りです。

部位セレクター
サイト全体body, html
ヘッダー内ロゴ.site-header .site-header-logo
ヘッダーナビ.global-nav
タイトル・見出しh1, h2, h3, h4, h5, h6, .page-header-title

有料版Lightning G3 Pro Unitでのフォント変更方法

Lightning G3の機能拡張プラグインLightning G3 Pro Unitを使えば、テーマカスタマイザーで簡単にフォントの変更が可能です

ダッシュボードメニューの外観>カスタマイズ>Lightningフォント設定を開いて、各部位ごとにフォントを指定するだけです。指定なしの場合は、無料版Lightningと同じくNoto Sans JPが標準日本語フォントとなっています。

Lightning G3 Proでのフォントの変更

指定可能フォント
(2021年11月23日現在 Ligtning G3 Pro Unit バージョン0.13.2)

  • 明朝体
  • ヒラギノ角ゴ
  • 游ゴシック
  • メイリオ
  • San Francisco
  • ウェブフォント Noto Sans JP (font weight 300~900)
  • ウェブフォント M PLUS 1p (font weight 300~700)
  • ウェブフォント M PLUS Rounded 1c (font weight 300~700)
  • ウェブフォント Sawarabi Mincho
  • ウェブフォント Sawarabi Gothic
  • ウェブフォント Kosugi Maru
  • ウェブフォント Kosugi

プラグインLightning G3 Pro Unitは、Vektor Passportに含まれています。

サブスクリプションサービスVektor Passportは、ライセンス期間により次のようになっています。

Vektor Passport 1年ライセンス9,900円
(税込)
Vektor Passport 3年ライセンス26,400円
(税込)
Vektor Passport 5年ライセンス39,600円
(税込)
※価格は2022年11月24日現在のものです
Vektor Passportに含むもの
  • テーマ機能拡張プラグインLightning G3 Pro Unit
  • ブロック追加プラグインVK Blocks Pro
  • プレミアムパターンライブラリ
  • テーマLightning Pro(旧製品)
  • ライセンスキー

Lightning G3 Pro UnitおよびVK Blocks Proはプラグインなので、無料版Lightningですでに構築したサイトでもインストール・有効化すれば、簡単に有料版の機能を使うことができます

サブスクリプションですが、ライセンス期間終了後も継続して使用が可能です。アップデートとサポートを受けられなくなるだけなので、再度サポートを受けたいというタイミングで再契約すればよいでしょう。

別のGoogleフォントを使いたい場合

Lightningで準備済以外のGoogleフォントを使いたい場合の手順を紹介しておきましょう。

例えば、Noto Serif JPを使いたい場合は次のように進めます。

1.Google フォントの日本語フォントのページにアクセスする

2.フォント一覧の中からNoto Serif Japaneseをクリック

3.Stylesのところで使いたいフォントウェイトを選ぶ

使いたいウェイトの右にある、+ Select this style をクリックすれば選択済となります。
(選択済だと – Remove this style と表示が変わります、これをクリックすれば選択解除となります)

以下の事例では400、500、700を選択しています。

ウェブフォントのウェイトを選択

4.画面右の<link>タグとfont-familyをコピする

ウェイトを選択すると画面右に<link>タグとfont-familyが表示されるのでコピーします。

linkタグとfont-familyのコピペ

5.コピペした<link>タグとfont-familyを使う

<link>タグは子テーマのfunctions.php内に次のように記述すると</body>タグ直前に挿入されます。

function my_google_fonts(){
	echo '(ここにコピーした<link>タグをペースト)';
}
add_action('wp_footer', 'my_google_fonts', 1);

実際のコードは以下の通りです。

function my_google_fonts(){
	echo '<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap" rel="stylesheet">';
}
add_action('wp_footer', 'my_google_fonts', 1);

これでGoogleフォントの読み込み準備ができたので、すでに紹介したようにフォントを変更したい部位をセレクターとしてコピーしたfont-familyをCSSに記述すればOKです。

例えば、ヘッダーロゴだけをNoto Serif JPに変更したければ次のように記述します。

.site-header .site-header-logo {
    font-family: 'Noto Serif JP', serif;
}

以上でサイト表示するとヘッダーロゴはNoto Serif JP、それ以外はNoto Sans JPで表示されます。

サイトロゴをNoto Serif JPに変更
Googleフォントの読み込みを<head>タグに挿入する場合

テーマLightningの手法にしたがって、今回Googleフォントの<link>タグを</body>タグ直前に挿入しましたが、一般にはGoogleフォントの<link>タグは<head>タグに挿入して使います。

<head>タグに挿入する場合は、functions.phpへの記述を次のようにするとOKです。

function my_google_fonts(){
	echo '(ここにコピーした<link>タグをペースト)';
}
add_action('wp_head', 'my_google_fonts', 1);

<head>タグに挿入すると、サイトの表示スピードへの影響が出る。
(実際Page Speed Insightで確認するとRender Blocking Timeに加算されています)

</body>直前だとGoogleフォントの読み込みタイミングが<head>タグに比べて遅くなる。

とそれぞれ一長一短あるようです。

Render Blocking Time

まとめ

無料版のLightningでフォントを変更するには、カスタムCSSを使う必要がありますが、セレクターをうまく指定してやれば、各部位ごとのフォント変更は可能です。

ただしウェブフォントを指定する場合は、該当フォントを読み込む記述を<head>タグ内に別途してやる必要があります。

しかし、有料版Lightning G3 Proを使用すれば、テーマカスタマイザーでフォントを選択するだけなので非常に簡単です。フォントにこだわりたい場合は、有料版を検討してはいがでしょうか。

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間3年)
Vektor Passport(ライセンス期間5年)

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる