広告 WordPress

【STINGER PLUS+】ブログのタイトルにGoogle Fontsを導入してみた

STINGER PLUS+では、いくつかのGoogle Fontsが利用でき、それをタイトルにも反映させることができます。

しかし、デフォルトで用意されているのは、わずか数種類…。

2016年11月現在、Google Fontsは800種類を超えており、その中には自分のブログにピッタリの理想的なフォントがあるかもしれません。

そこで、ブログタイトルのフォントをいい感じにするために、Google Fontsを導入してみました。

Google Fontsでフォントを探す

まずは、Google Fontsにアクセス。

Google Fontsを選ぶ 01

フォントがずらっと並んでいます。この中から理想のフォントを探していきます。

ある程度、フォントの目安がついているなら、右側のカテゴリーから絞り込んでいった方が早いかと思います。

Google Fontsを選ぶ 02

サンプル文章を削除して、ブログタイトルを入力し、「APPLY TO ALL FONTS」をクリック。

Google Fontsを選ぶ 03

これでフォントを採用したときのイメージがしやすくなりました。

Google Fontsを選ぶ 04

気になるフォントがあったら、とりあえず「+」ボタンをクリック。あとで、まとめて検討します。

Google Fontsを選ぶ 05

フォントの中には複数のスタイルを持つものがあるので、気になったら合わせてチェックしておきましょう。

Google Fontsを選ぶ 06

フォントをチェックし終わったら、画面下の「〇 Families Selected」をクリック。

Google Fontsを選ぶ 07

右上にある矢印をクリックし、プレビュー画面へ。

Google Fontsを選ぶ 08

「+」ボタンを押したフォントがまとめて見れるので、再度検討しましょう。

今回、赤枠で囲った「Abril Fatface」というフォントを採用したので、残りのフォントは「-」ボタンを押して選択を外しておきます。

Google Fontsを選ぶ 09

再度、画面下の「1 Families Selected」をクリック。

Google Fontsを選ぶ 10

「@IMPORT」をクリック。

ここで表示されている2つのコードをテーマのスタイルシートに追記すれば、選択したフォントが利用できます。

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

font-family: 'Abril Fatface', cursive;

コードはフォントによって異なるので、ご自身で選択したものをコピーしてください。

スタイルシート(style.css)にコードを追記

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。

@import url('../stingerplus/style.css');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

1つ目のコードは、スタイルシート上部にある親テーマのCSSを読み込んでいる箇所の次に追記してください。
/* サイトタイトル */
header .sitename a {
    font-family: 'Abril Fatface', cursive !important;
    font-size: 40px;
}

2つ目のコードは、サイトタイトルに反映させるために上記のコードと共に追記してください。

フォントサイズ等はお好みで設定を。テキストシャドウを利用するとオシャレな感じに仕上がるかもしれませんね。

これで、選択したGoogle Fontsがタイトルに適用されました。

まとめ

WebフォントであるGoogle Fontsを利用することで、閲覧者の端末環境に左右されることなく、意図したフォントを表示させることができます。

テキストなので、SEO的にも有利ですし、編集も簡単。

サイトのイメージに合ったフォントだと印象に残り、タイトルを覚えてもらえるかもしれませんね。

あたなのサイトにも、ぜひ導入してみてください。

-WordPress