西島です。

僕は賢威を7になってから使い始め、なにかと満足してるんですが、なんだかちょっとかっこよさにかけるというか…全体を見た時にちょっと違和感を感じてました。

このサイト以外では、「OPEN CAGE」や「TDC」などのテンプレートを使う事もあるんですが、賢威7もちょっと雰囲気を変えようと思います。

今回は簡単にテンプレートの雰囲気を変えられる、フォントを変えていみたいと思います。

賢威7のフォントを変更

今回は賢威全体のフォントを一括で変更していきます。

注意

・テンプレートを変更する場合は、バックアップをとるか、ローカル環境などで検証してから変更することをおすすめします。

WordPressバックアッププラグインなら【UpdraftPlus】がオススメ

まずは「外観」「テーマの編集」と進み「base.css」を編集していきます。

賢威7テーマの編集

その中の「賢威テンプレートの共通設定」を探します。

もし「賢威テンプレートの共通設定」がわからなければ、command+F(Windowsの場合はControl+F) 出てきた検索窓に「賢威テンプレートの共通設定」と入力すると、マーカーで検索した文字が表示されます。

賢威7フォントファミリーの編集

今回はその中のfont-family(フォントファミリー)を変更していきます。

ここですでに複数のフォントが指定されています。

  1. Verdana,
  2. “ヒラギノ角ゴ ProN W3”,
  3. “Hiragino Kaku Gothic ProN”,
  4. “メイリオ”,
  5. Meiryo,
  6. sans-serif;
これは、サイト訪問者のOSやブラウザ環境によって、表示出来るフォントが変わって来るためです。内部フォント指定と言って、ユーザー側の環境(PC・スマホなど)に元々用意されているフォントを使う設定になっています。

そのため、こちら側のサイトで指定したフォントがユーザー側で登録されていなければ、指定したフォントが表示されません。なので複数のフォントを指定しておく事で、そのなかのどれかが表示されるだろうという、言わば保険のようなものです。

この時、左から順に優先度が高くなります。

チェック

・フォントの変更は、記事だけ、サイドバーだけ、見出しだけ、など個別に設定も出来ますが、サイトのまとまりがなくなるので、あまりおすすめしません。

・また、PCとスマホで違ったフォントの表示などもできますが、サイトのイメージが変わってしまうので、僕はなるべくPCで見てもスマホで見てもなるべく近い印象になるように設定しています。

実際にフォントを指定していく

僕は「ゴシック」系の角ばったフォントよりも、明朝系のなめらかなフォントの方が好きなので、明朝系にしようと思ったのですが、色々調べていると、Win環境での明朝体の表示があまりよろしくないようなので、今回は明朝体を見をくる事にしました。

そこで今回は、WinにもMacにも標準搭載されている、游ゴシック体にしていこうと思います。

その他のフォントでもMacとWin別々のフォントが表示されるだけなので、たいして気にする事でもありませんが、今回はなるべく同じ表示にしたいと考え、Mac・Win共に使える“游ゴシック体”に決めました。

今回はすでにある賢威7のフォントの前に「游ゴシック体(自分の使いたいフォント)」を指定します。

“游ゴシック体”, “Yu Gothic”, YuGothic,

そうすると、もし「游ゴシック体」がユーザーの環境で表示出来ない場合、賢威7にはじめから入っているフォントが使われる事になります。

今回の場合はこんな感じ。

これで「ファイル更新」をクリックしてフォントの変更は終了です。

賢威7fファイルを更新

クロームでCSSが反映されない時はショートカットでキャッシュを削除

フォント変更前

賢威7フォント変更前

フォント変更後

賢威7フォント変更後

これまでの角ゴよりも少しなめらかで、メイリオよりもオシャレな印象になりました。

(わかりづらいかな。^^;)

nisijimanisijima

まぁ、このあたりは好みの問題なので、自分のサイトに合った好きなフォントを使えばいいと思います。

まとめ

フォントを変えるだけで、サイトの印象がガラっと変わるので、自分のサイトのイメージにあったフォントを使って下さい。

注意

・あまりこだわり過ぎたフォントを使っても、自分以外の環境では見れない事もあるので注意して下さいね。

それでは西島でした。^^

気軽にお問い合わせ下さい

  • ネットビジネスは難しそう
  • 何をやればいいかわからない
  • そもそもこの業界が怪しい

などなど、悩み・質問・相談、気軽にお問い合わせ下さい。

お問い合わせはこちら

特典付き無料メールマガジン


現在特典付きで、無料メールマガジン配信中!
いつでも解約出来るので、気軽に登録して下さい。

mail-magazine

↑クリックすると、特典紹介ページに移ります。