STINGER

【STINGER6】Google fontsでタイトルをオシャレにカスタマイズする方法

投稿日:

STINGER6へ引越してきて、ほとんどのカスタマイズがSTINGER5へ引っ越した時と同じ手順で変更できましたが、唯一分からなかったのが、タイトルをGoogle fontsへ変更することでした。

STINGER6自体がまだリリースされて間もないということもあり、それに関する記事が全然なくて大苦戦。数時間格闘してやっとわかったので備忘録として残しておきます。

同じ状況になった人のアドバイスとなれば幸いです。

Google fontsをタイトルフォントに適用

まずがデフォルトの状態がこれ。

スクリーンショット 2016-01-02 13.26.43

特に問題はないのだけど、ちょっとカッコよくしたいですよね。
Google fontsのページへ行き、自分の気に入ったフォントを探してください。

Google fonts

スクリーンショット 2016-01-02 17.09.50

細かいところは置いといて、このページの
・③「Add this code to your website」を「header.php」へ入れる
・④「Integrate the fonts into your CSS」を「style.css」へ入れる

というのがSTINGER5でしたが、これが6でやっても何も変化がありません。

ここからの試行錯誤が大変でしたが、結論からいうと③の入れ場所は同じでしたが、④は「style.css」ではなく、「st-theme-customization.php」に入れるとうまくいきました。

③を「header.php」へ入れる

④を「st-theme-customization.php」に入れる

 

「st-theme-customization.php」ではタイトルのフォントを大きくしたかったので、「font-size」を追加しました。

変更後はこちら。

スクリーンショット 2016-01-02 13.29.33

どうでしょうか。ちょっとオシャレに見えてきませんか?
これを応用すれば、メニューやキャプションなど様々なフォントに対応可能です。

以上、STINGER6で「Google fonts」を使ってタイトルをオシャレにカスタマイズする方法でした!

-STINGER

Copyright© Endless Journey , 2017 All Rights Reserved Powered by STINGER.