スワローのヘッダーでGoogleフォントを使う方法

カスタマイズ
スポンサーリンク

当ブログのワードプレステーマはオープンケージ社の最新テーマ、スワローを使用しています。

ワードプレステーマで有名なオープンケージの最新テーマとあって、使用者も徐々に増えていますね。

同じテーマの使用者が多いとどうしても似たような見た目のサイトになってしまいます。

そこでブログサイトに個性を出すカスタマイズとしてサイトタイトルのカスタマイズがあります。

オープンケージの公式ページにはロゴを用いたヘッダーサイトタイトルのカスタマイズ記事がありますが、Googleフォントで表示したいなぁって思うこともあるはず。

今回はサイトタイトルをロゴではなくGoogleフォントでカスタマイズしたい人向けに書いています。

この記事ではスワローのヘッダーとトップページヘッダー画像エリアでGoogleフォントを使ってサイトタイトルを表示する方法を韬介します。

役に立てばなによりです。

カスタマイズ手順

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

大きな流れとしては

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

になります。

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

Gooleフォントのダウンロードからレンタルサーバーへの保管に関しては以下の記事を参考にしてください。

参考
AMPGoogle Fontsを使用する方法 Simplicity
AMPとかSimplicityとか書いてありますが、Googleフォントをダウンロードしてサーバーの子テーマに設置する方法は共通です。

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

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

僕みたいなポンコツ初心者にもできたから!!

以下を参考に。アナタにもできるはず!!

参考
FileZilla 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フォントで表示させました。

そのカスタマイズは以下のコードを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をカスタマイズしました。

ヘッダー画像の大きさにもよると思うので、上記コードの記述が必要ない人もいるかと思いますが、参考として載せておきます。

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

他のやり方(Googleフォントの使い方は3種類ある)

Googleフォントを使う方法は3種類あります。簡単に説明すると、

  1. フォントデータを自分のレンタルサーバーに保存してそこから呼び出すカ法
  2. フォントデータをheader.php <head></head>タグ内)にURL指定で記載してCSSで呼び出す方法
  3. フォントデータをCSSURL指定で記載して呼び出す方法

の3つです。

上で紹介したカスタマイズ方法は上記の1のやり方です。

1のやり方だと、FTPソフトを使わなければなりません。

初心者にはそこが一つの壁になると思います。(実際僕もそうだった)

なので、FTPソフトを使わずにやりたい場合は、上記の2と3のどちらでカスタマイズが可能です。

2と3のやり方について、以下に参考情報を記載します。

フォントデータをheader.phpに記載してCSSで呼び出す方法

このやり方は以前、僕も適用したことがあります。

以下のサイトの説明が分かりやすいです。

【2018年版】Google Fontsの使い方:初心者向けに解説!

フォントはお好みのものを選んでURLを変更しましょう。

スワローのヘッダーサイトタイトルをカスタマイズするのであれば、CSSへの記載は#logo .h1 にし、font-familyの指定もお好みのフォント名称に変更してお使いください。

フォントデータをCSSURLで記載して呼び出す方法

こちらの方法は僕自身試したことはないですが、以下の記事が参考になります。

【コピペOK】STORK(ストーク)をカスタマイズ!「第2弾:フォント テンプレート7選」
上記リンク先の『「Webフォント」を指定する』の箇所を参考に。

こっちの方が楽チンかも。

フォントはお好みのものを選んでURLを変更しましょう。

スワローのヘッダーサイトタイトルをカスタマイズするのであれば、CSSへの記載は#logo .h1 にし、font-familyの指定もお好みのフォント名称に変更してお使いください。

おわりに

Googleフォントでサイトタイトルを表示することができたでしょうか?

Googleフォントって種類がたくさんあって、 どれを使うか決めるだけでもかなり迷いますよね。

なかなか決められない

ブログ書く時間より選んでる時間の方が長いとかね。

こういうカスタマイズに時間をかけるより、記事を書けというのがブログ論でよく出てきますが、一度気になるとどうしても記事執筆よりカスタマイズを優先してしまう。

そんな僕はまだまだブロガー初心者です。

スポンサーリンク
スポンサーリンク