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のままで不満はあまりないかと思います。
(ちなみにこのウェブチルサイトはテーマ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のようなウェブフォントの場合は、どうしても読み込みに時間がかかることがあるので、より高速な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が標準日本語フォントとなっています。
指定可能フォント
(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円 (税込) |
- テーマ機能拡張プラグイン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が表示されるのでコピーします。
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で表示されます。
テーマ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>タグに比べて遅くなる。
とそれぞれ一長一短あるようです。
まとめ
無料版のLightningでフォントを変更するには、カスタムCSSを使う必要がありますが、セレクターをうまく指定してやれば、各部位ごとのフォント変更は可能です。
ただしウェブフォントを指定する場合は、該当フォントを読み込む記述を<head>タグ内に別途してやる必要があります。
しかし、有料版Lightning G3 Proを使用すれば、テーマカスタマイザーでフォントを選択するだけなので非常に簡単です。フォントにこだわりたい場合は、有料版を検討してはいがでしょうか。