スワロー（ストーク）のヘッダーでGoogleフォントを使ってサイト名を表示するカスタマイズ方法

オープンケージ製のWordpressテーマ「スワロー」と「ストーク」でサイトタイトルのフォントをGoogleフォントに変更する方法をご紹介します。

有名なワードプレステーマを利用すると、利用者が多いので自分のサイトと他のサイトが似たような見た目になってしまいます。

自分のサイトに個性を出したい！とお思いのあなたにオススメなのが、ヘッダーのサイトタイトルのカスタマイズです。

オープンケージの公式ページにはロゴを用いたヘッダーサイトタイトルのカスタマイズ記事がありますが、本記事ではロゴではなく、Googleフォントで表示するカスタマイズ方法をお届けします。

この記事では

ヘッダー
トップページヘッダー画像エリア

でGoogleフォントを使ってサイトタイトルを表示する方法をご紹介します。

Contents

1 ヘッダーでGoogleフォント│カスタマイズ方法
- 1.1 フォントデータをサーバーに設置
- 1.2 子テーマのCSSをカスタマイズ
2 ヘッダーイメージでGoogleフォント│カスタマイズ方法
3 他のカスタマイズ方法（Googleフォントの使い方は3種類）
- 3.1 フォントデータをheader.phpに記載してCSSで呼び出す方法
- 3.2 フォントデータをCSSにURLで記載して呼び出す方法
4 おわりに

ヘッダーでGoogleフォント│カスタマイズ方法

それでは実際にGoogleフォントでサイトタイトルを表示するカスタマイズ方法をご紹介します。

大きな流れとしては

フォントをダウンロードしてレンタルサーバーへ設置
CSSカスタマイズ

になります。

フォントデータをサーバーに設置

Gooleフォントのフォントデータをダウンロードして、レンタルサーバーへ保管します。

以下の記事に詳しい手順を記載しています。

参考

AMPでGoogle Fontsを使用する方法 Simplicity

「AMP」とか「Simplicity」といった単語が書いてありますが、Googleフォントをダウンロードしてサーバーの子テーマに設置する方法は同じなので、ご心配なく！

フォントデータをレンタルサーバーに保存する際、FTPソフトが必要になるので、使用したことが無い人はインストールしておきましょう。

FTPとか単語が出てくると初心者には小難しく感じますが、大丈夫です！

私みたいな初心者にもできたから！！

以下の記事に詳しい手順を書いています。

ぜひ参考にしてください。何も難しくありませんから！

参考

FileZilla for Macの使い方をダウンロードから解説初心者でもできる！

FileZillaというFTPソフトの使い方を解説しています。

それでもやっぱりメンドクセーって方は後半に書いたGoogleフォントのURLを直接指定するやり方を参考にしてください。

FTPソフトを使わずにカスタマイズが可能です。

子テーマのCSSをカスタマイズ

さて、上記にしたがってサーバー内にGoogleフォントを保存できたら、あとは子テーマのCSSに以下を記述するだけ。

スワローの場合、子テーマswallow_customのstyle.cssに以下を記述します、

/*サイトタイトル　フォント変更*/
#logo .h1 {
 font-family: 'Faster One', cursive;
 font-size: 2.5em; 
 }

これでこんな風に表示されます。

好きなGoogleフォントをダウンロードして、CSSでフォント名称（font-family:の箇所）を記述しましょう。

これでヘッダーのサイトタイトルがGoogleフォントで表示されました。

ヘッダーイメージでGoogleフォント│カスタマイズ方法

続いてトップページのヘッダー画像エリアにある文字をGoogleフォントで表示するカスタマイズ方法です。

トップページヘッダー画像エリアってどこ？というと、

管理画面＞カスタマイズ＞トップページ設定にある、ヘッダーイメージのことです。

この画像の上に重ねてテキストを表示することができます。

ヘッダーテキスト（大）とヘッダーテキスト（小）に入力した文字です。

ヘッダーテキスト（大）の部分をGoogleフォントで表示させます。

そのカスタマイズは以下のコードを子テーマのCSSに記述します。

/*ヘッダー画像内テキスト大　フォント変更*/
#custom_header .sitecopy {
 font-family: 'Faster One', cursive;
 font-size: 7.0em;
}
/*ヘッダー画像内テキスト大　フォント変更 スマホ対応*/
@media only screen and (max-width: 480px){
#custom_header .sitecopy {
 font-size: 4.0em;
 }
 }

PC表示とスマホ表示でフォントサイズを変更しています。

お好みのフォントとフォントサイズを指定してあなた好みの表示にカスタマイズしてください。

私は上記に加えて、以下のようなコードも記載しています。

デフォルトのままでは、画像の表示位置や、テキストの位置が思い通りにならくて、調整しました。

/*ヘッダー画像 表示エリア変更*/
#custom_header {
 height: 550px;
}
/*ヘッダー画像 表示エリア変更 テキスト位置*/
#custom_header .wrap {
 padding: 6% 2%;
}
/*ヘッダー画像 表示エリア変更 スマホ対応*/
@media only screen and (max-width: 480px){
#custom_header {
 height: 350px;
}
}

ヘッダー画像の高さを指定したり、テキストの位置が中央真ん中にくるよう調整したり。

スマホにも対応するようにCSSをカスタマイズしました。

ヘッダー画像の大きさにもよると思うので、各自でpxやpaddingを調整してもらえればと思います。

これでヘッダーとヘッダー画像エリアのサイトタイトルをGoogleフォントで表示することができました！