【SANGOカスタマイズ】ヘッダーメニューのフォントの種類を変更する方法

フォントはブランドイメージを左右する。

そういっても過言ではないほど、WEBサイトにおけるフォントの種類というのはとても大切になってきます。サンセリフ・セリフだけにとどまらず、フォントファミリーをどのように設定していくかということで、「カッコいい」「可愛い」「綺麗」「おしゃれ」「力強い」というようにメディアのブランドイメージは大きく変わっていきます。

今回は、そんなフォントにフォーカスして、WordPressテーマ「SANGO」のヘッダーメニューのフォントの種類を変更する方法について解説していきます。SANGOは男性的・女性的どちらのデザインも実現することができる万能なテーマですが、サイトの顔とも言えるヘッダーメニュー部分のフォントについても、「どのような世界感を演出したいのか?」ということをイメージして調節していけるといいですね。

カスタマイズ前後のフォントを画像で比較

まず、今回のカスタマイズでヘッダーメニューのフォントが変わったとしたら、どのように表示されるのか?ということを確認していきましょう。デフォルト設定のサンセリフ調(Quicksand)と、試しに設定してみたセリフ調(Cormorant Upright)での表示の違いを、実際に見てみると…

  • カスタマイズ前(サンセリフ調:Quicksand)
  • カスタマイズ後(セリフ調:Cormorant Upright)

 

このようにフォントの種類やテイストが違うだけで、ずいぶんヘッダー全体としてのイメージも変わってきますね。単に「女性的なデザインだからセリフ調」「男性的なデザインだからサンセリフ調」という話にとどまらず、使用していくフォントには幅広い意味を持たせることができます。

今回は、僕がよく見ているWebメディアで使用されているフォントである「Cormorant Upright」を採用し変更を試みていますが、実際に変更していくフォントはお好みで設定していただいてOKです。ぜひ、自分好みのフォントデザインを実現していきましょう。

SANGOのヘッダーメニューのフォント種類を変更する方法

それでは早速、SANGOのヘッダーメニューのフォントの種類を変更する方法について解説していきます。フォントファミリーを設定するだけのカンタンな方法となっているので、ぜひ解説を見ながら一緒に設定を進めていってくださいね。

「外観→テーマの編集」に移動する。

CSSにカスタマイズを施していくには、まずWordPressのダッシュボード画面から「外観→テーマの編集」に移動しましょう。

「style.css(子テーマ)」でヘッダーメニューのフォント種類を指定する。

そして、子テーマの「style.css」を選択し、次のコードを一番下のあたりに追記します。(テーマの編集を行うときは必ず子テーマで行うようにしましょう。)

 

コードに関する解説は不要かと思いますが、ヘッダーメニューならびにドロワーメニューで表示されるフォントの種類を、ここでは「Cormorant Upright」に設定しています。もしフォントを他の種類のものに変更したいという場合には、「’Cormorant Upright’, serif;」の部分をお好みのフォントファミリーに置き換えてみてください。

フォントファミリーの書き方については、SANGOの生みの親である「サルワカ」でわかりやすく解説されているので、ぜひご参照ください。

font-familyの書き方まとめ:CSSでフォント種類を指定しよう

 

※ちなみに、今回使用する「Cormorant Upright」はWebフォントのため、使用する際にはあらかじめ「header.php(子テーマ)」のheadタグの間に以下コードを追記しておきましょう。

今回はWebフォントを使用しているので色々と設定が必要になってきますが、Webフォントではない普通のフォントを設定していきたいのであれば、このようにheadタグの間にコードを追記する必要はありません。ちなみにWebフォントの導入方法については、これまた「サルワカ」でわかりやすく解説されているので、ぜひご参照ください。

【2017年版】Google Fontsの使い方:初心者向けに解説! 

最後に

以上、WordPressテーマ「SANGO」のヘッダーメニューのフォントの種類を変更する方法ということで、カンタンなカスタマイズ方法について解説しました。いかがだったでしょうか?

フォントの種類というのはブランドイメージを大きく左右する大切な要素ですし、しかもWEBサイトのヘッダーというのはユーザーの目に触れる可能性の最も高い、サイトの顔とも言える部分です。

もちろんデフォルトのフォントやデザインでも、SANGOは特に申し分ない表現力を持っていますが、そういった細かいけどとても重要なところにこだわりを持っていくことで、あなたのWEBサイトに少しずつ彩りを与えていきましょう。

 

また、SANGOのカスタマイズやメディア運営について何か疑問点やわからないことがあれば、ぜひ気軽にご連絡くださいね。