こんにちは、多言語系フリーランスの吉澤 摩耶( mayatter_ )です。
今日は、ブログやホームページを頑張って自分で運用されている方のために、フォントに関する簡単小ワザをシェアしていきます。つまりサイトの見た目を自分でおしゃれに改造したい方向けのお助け記事です。
今回はWordPressで有料テーマSWELLを使用されている方を想定して記事を書いていますが、仕組みを理解すれば別の仕様でも応用可能です。（HTML部分がいじれる仕様であることが前提です。）ご自身のサイトにご活用ください！
問題点：デフォルトのフォントは味気ない
まずは以下の写真を見比べてみてください。
サイトタイトル Maya Yoshizawaのフォントが変わっています。
左がBefore何も手を加えていないデフォルトフォント・ヒラギノゴシック。右が手を加えた後のAfterです。
タイトル部分を、サイトイメージに合わせて変えると、印象がぐっと変わっていると思います。
サイトタイトルは、サイトの中でも一番目立たせたいところの一つですが、本文で使っているフォントと同じにすると、太字にしてもあまり変わり映えがしません。
解決法：Googleフォントからおしゃれなものを拝借して使おう
Aftereで使っているこのちょっとおしゃれなフォントは、GoogleフォントのDidact Gothicというフォントです。
※ちなみにDidact Gothicは日本語非対応です！
日本語対応のもの一覧はこちらのリンクからどうぞ。
リンク先の私の心の声部分はサンプルです。Custom欄からあなたに必要な文章に書き換えてフォントを選定してください。
GoogleフォントはWebフォントと言われるものの一つです。Webフォントには、珍しかったり凝ったりしたものを使用してもユーザーの端末で表示できるというメリットがあります。（普通のタイプのフォントではそうはいきません！）
これはWeb上に保存されているものを読み込んできて使っているためです。
1. 使いたいフォントのSelect > Selected familyから詳細を確認
それでは今回は、
サイトタイトルと、メニュー内のページタイトル(いずれもh1)のフォントを、Googleフォントに変更していきます。
Selectは、「Select [文字の太さ] ＋」と書いてあるこのボタンです。
2.コードをコピーし、自分のサイトの適切な場所にペースト
一番上の枠内、<link で始まるコードはHTMLの冒頭にくるheadタグ内に入れます。<head></head>です。
SWELLを使っている方は以下の通り。外観> カスタマイズ >高度な設定の</head>前の欄にペーストします。
上から二番目の枠内のコードは今回は使わない方法でいきましょう。
一番下の枠内のコード (font-family:…) は CSSを記述すべき所へ書きます。
CSSファイルがある方はそこへ。HTMLファイルで完結している場合は<style>タグの中へ。
SWELLテーマ使用の方は外観> カスタマイズ >追加CSS欄に記載します。
注意
そのままコピペしただけでは何も起こりません。クラス名やタグを指定していきます。
書き方はスクリーンショットを参考にしていただいて構いませんが、上手くいかない場合は以下のやり方を試しましょう。
GoogleChromeを使用した状態で右クリックし、下の方にある検証から、クラス名を確認していきます。（検証モードの使い方はそのうち別記事を書きます。）
ちなみに先のスクリーンショットを眺めながら「この5行目以降は必要なのか。なぜh1タグにフォント指定するだけじゃダメなのか。」という声が聞こえてきそうなので先に記載しますと
です。サイトタイトルはサイト内で唯一のもの…という錯覚に陥りがちですが、よく見るとシーンごとに別々のクラス名で管理されていたんですね。
このことはGoogle Chromeの検証画面から確認できます。
3. 完成！
お疲れ様でしたー！（拍手）
知っておくべきWebフォントのデメリット
ここまで、便利で無料のWebフォント「Googleフォント」についてご紹介しましたが、Webフォントにはデメリットもあります。それは、「多用するとページの読み込み速度が落ちる」ということ。読み込み途中にページが表示されず、サイト訪問者には数秒のイライラが募ります。
ということで、「サイトタイトル以外にもどんどんWebフォントを使っていきたい！」という意欲的な方向けに、対策記事を次回以降でご紹介していきます。
それでは、今日はここまで。
良い1日を、そして楽しいホームページ&ブログ運用を〜！
コメント