STINGER

STINGER PLUS2のヘッダー・フッターのタイトルフォントを好みのGoogleフォントで表示する

投稿日: 更新日: 2017年11月26日

ロゴを上手に作ることができないのでGoogleフォントにはかなり助けられているでででーさん(@d3_dayo) です!

 
STINGERシリーズでは、最初からテーマに一部のGoogleフォントで表示できるような機能が備わっているかと思いますが、今回は山ほどあるGoogleフォントの中から自分の好きなフォントを選んで、それをヘッダーやフッターに表示されるタイトルフォントに適用する手順を紹介したいと思います。
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

今回紹介するカスタマイズを実際にテスト環境で施してみたので、まずは完成図としてスクリーンショットをお見せしたいと思います。
 
・PCでの表示

 
・スマホでの表示

 
サンプル画像では「Audiowide」というGoogleフォントを選んで、タイトルテキストのフォントとして設定しています。
 
 

自分好みのGoogleフォントをタイトルテキストに適用する手順

ここからGoogleフォントでタイトルテキストを表示するための手順を紹介していきます。
 

Googleフォントのサイトにアクセスし表示したいフォントを選ぶ

Google Fonts
まずは上記のGoogleフォントサイトにアクセスして数あるフォントの中から表示したいフォントを選びます。(使いたいフォントが見つかったら一覧から「+」ボタンをクリックします)
 

 
 
「+」ボタンをクリックすると、画面下に黒いバーが表示されるのでその部分をクリックするとこのような画面が全面に表示されます。
 

 
画面の中から、上の画像でも赤枠で囲んでいる部分のコードをコピーします。その下にある「font-family:~」というコードも念のためコピーしてメモ帳などに貼っておいてください(あとで使います)
 
Googleフォントのサイトでやることは以上です。
 
 

header.phpにコードを追記する

次にWordPressの管理画面から外観→テーマの編集header.phpにアクセスして、先ほどGoogleフォントのサイトでコピーした以下のようなコードをphp内に貼り付けます。

貼る位置はheader.phpの中に元々以下のようなコードがあると思うので…

このコードの一行下に上記のGoogleフォントからコピーしてきたコードを貼れば問題ないと思います。
 
 

CSSでGoogleフォントをタイトルフォントとして指定する

ここまでで事前準備は全て完了したので、あとは仕上げとして、CSSでタイトルフォントがGoogleフォントで表示されるように指定してあげます。以下のコードをstyle.cssに追記しましょう。

この記事では「Audiowide」というフォントを適用する前提で書いていますが、上記コードのフォントを指定する部分は、Googleフォントのサイトでコピーした「font-family:~」のコードに書き換えてください。
 
 

まとめ

今回の手順はSTINGER PLUS2のカスタマイズと銘打って紹介しましたが、テーマがSTINGER PLUS2でなくても基本的には同じ手順でタイトルフォントの表示をGoogleフォントへと変更することができます(WordPressじゃなくても基本的に同じです)
 
Googleフォントには、非常に多くのオシャレな欧文フォントが用意されているので、タイトル部分に個性を出したい方はぜひやってみてください!
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ