賢威6.2-グローバルメニューのフォントの種類を変更する方法|オススメフォントも紹介 | LIVE YOUR LIFE

賢威6.2-グローバルメニューのフォントの種類を変更する方法|オススメフォントも紹介

 

当サイトでも使用しているWordPressテーマ『賢威6.2』は、本当にかゆいところまでカスタマイズの手が届く優良テーマです。

 

そんな賢威6.2の数あるカスタマイズの中から、今回はグローバルメニューのフォントの種類を変更する方法について解説していきます。

文字のフォントというのはサイトの雰囲気を決定づける重要な要素となるため、ぜひユーザーの目に特に触れる部分であるグローバルメニューのフォントについても、サイトカラーに合ったものを設定しておきましょう。

 

今回はゴシック体・明朝体それぞれのオススメの記述方法についても解説していくので、ぜひ参考になさってくださいね:)

 

賢威6.2でグローバルメニューのフォント種類を変更する方法

 

まず、賢威6.2でカスタマイズを行なっていくには、WordPressのダッシュボード画面より『外観』→『テーマの編集』を選択します。

そして数あるテーマファイルの中から『design.css』を選択しましょう。

 

続いて、design.cssに記載されているコードの中から『グローバルナビ』という項目を探し出し、以下のコードを見つけましょう。

 

この『#menu』というクラスで指定されている部分が、グローバルメニュー内のフォント周りの設定を表すCSSとなっています。

デフォルトでは『font-size』とあるように、フォントのサイズのみが指定されていますね。

 

続いてこのmenuクラス内に、フォントの種類を指定することができる『font-family』の値を入力していきましょう。

当サイトでは以下のように設定しているので、もし良かったら参考になさってくださいね。

 

コードについて詳しく解説すると、ここではフォントの種類を『游ゴシック(デフォルト)』『メイリオ』に指定しています。

 

また、ここでは複数のフォントが指定されていますが、それはブラウザや端末の違いなどによって一番左に指定しているフォント(游ゴシック)が表示できなかった際に、次のフォント(メイリオ)が表示されるようにするためです。

ですので、もしお好みでフォントを指定していくという際には、左から表示させる優先順位の高いものを指定するようにしましょう。

 

オススメフォントも合わせて紹介

 

さて、ここまでは賢威6.2でフォントの種類を変更する方法について解説しましたが、ここからはオススメのフォント指定方法について解説していきましょう。

 

フォントは大きく分けると『ゴシック体』と『明朝体』の2つに分類されるので、ここでは2種類それぞれのオススメフォントをご紹介します。

 

まず『ゴシック体』ですが、これは先ほどのコード内で指定したものと同じですね。

游ゴシック体とメイリオはゴシック体の代表格とも言えるフォントですので、もし『メニューのフォントはゴシック体にしたい!』という際には、先ほどと同じく以下のコードを入力しましょう。

 

ちなみにゴシック体に指定した際の、実際のグローバルメニューでの見栄えは以下のようなイメージです。

 

ゴシック体は比較的『男性性』の高いイメージがあるフォントなので、クールな雰囲気やシンプルなサイトデザインと非常に相性が良いですね。

 

続いて『明朝体』ですが、今度は『ヒラギノ明朝』『HG明朝E』『MS P明朝』『MS 明朝』のそれぞれを指定していきます。

先ほどと同じ箇所に、以下のコードを入力しましょう。

 

そして明朝体に指定した際の、実際のグローバルメニューでの見栄えは以下のようなイメージです。

 

明朝体はゴシック体とは反対に『女性性』の高いイメージがあるフォントなので、煌びやかなデザインやエレガントな雰囲気をサイトに出したいときにオススメです。

 

そして実際にサイトでの表示を見ていただいたらわかるように、文字のフォントというのは変更するだけでかなりサイトの印象が変わっていきます。

ですので、ぜひサイトデザインや雰囲気、そして自身の描きたいブランド像に沿った文字フォントを設定するようにしましょう。

 

最後に

 

以上、賢威6.2でグローバルメニューのフォントの種類を変更する方法について、オススメフォントも合わせて解説しました。いかがだったでしょうか?

 

『#menu』クラスのCSSを変更するだけで、フォントの設定自体はとてもカンタンに済ませることができるので、ぜひ解説を参考にフォントを指定してみてくださいね。

また、サイトデザインを変更した際やブランドの方向性が変わっていくという際には、必ず文字フォントの種類についても随時違和感のないものを指定するようにしていきましょう。

 

CHECK

今回はグローバルメニューのフォントを変更する方法でしたが、以下記事ではサイト全体の文字フォントをカスタマイズする方法について解説しています。良かったらこちらも参考になさってくださいね。

賢威6.2の文字フォント周りのカスタマイズまとめ|種類・サイズ・行間を変更する方法を解説

 


MAIL MAGAZINE

 

 

     

公開日:2017/09/25 更新日:2017/09/26

コメントを残す

サブコンテンツ

TO THE TOP