STINGER PLUS+では、いくつかのGoogle Fontsが利用でき、それをタイトルにも反映させることができます。
しかし、デフォルトで用意されているのは、わずか数種類…。
2016年11月現在、Google Fontsは800種類を超えており、その中には自分のブログにピッタリの理想的なフォントがあるかもしれません。
そこで、ブログタイトルのフォントをいい感じにするために、Google Fontsを導入してみました。
Google Fontsでフォントを探す
まずは、Google Fontsにアクセス。
フォントがずらっと並んでいます。この中から理想のフォントを探していきます。
ある程度、フォントの目安がついているなら、右側のカテゴリーから絞り込んでいった方が早いかと思います。
サンプル文章を削除して、ブログタイトルを入力し、「APPLY TO ALL FONTS」をクリック。
これでフォントを採用したときのイメージがしやすくなりました。
気になるフォントがあったら、とりあえず「＋」ボタンをクリック。あとで、まとめて検討します。
フォントの中には複数のスタイルを持つものがあるので、気になったら合わせてチェックしておきましょう。
フォントをチェックし終わったら、画面下の「〇 Families Selected」をクリック。
右上にある矢印をクリックし、プレビュー画面へ。
「＋」ボタンを押したフォントがまとめて見れるので、再度検討しましょう。
今回、赤枠で囲った「Abril Fatface」というフォントを採用したので、残りのフォントは「－」ボタンを押して選択を外しておきます。
再度、画面下の「1 Families Selected」をクリック。
「@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的にも有利ですし、編集も簡単。
サイトのイメージに合ったフォントだと印象に残り、タイトルを覚えてもらえるかもしれませんね。
あたなのサイトにも、ぜひ導入してみてください。