【SANGOカスタマイズ】ヘッダーのフォントが変わらない問題と解決法 | 飯田市ホームページ制作デザインスタジオiR

今回はWordPressの人気テーマ「SANGO」を使っている中で、ヘッダーのフォントを変更しようとしたら反映されないトラブルに遭遇した経験と、その解決策を共有します。

1. 問題の概要

SANGOのヘッダーは「コンテンツブロック」機能を利用して登録していました。
AdobeのWebフォントを導入し、ヘッダーのリンクテキストに使いたいフォントを指定したのですが…

スマホ表示では問題なく反映される一方、PC表示のヘッダー部分だけフォントが変わらず、元のままでした。

2. なぜヘッダーのフォントが変わらなかったのか？

SANGOのコンテンツブロックは独自のHTML構造やスタイルが適用されており、単純にaタグにフォント指定をしても、テーマやコンテンツブロックのCSSの方が優先されてしまうことが多いです。
また、Adobe Webフォントはフォント名を正確に指定する必要があり、指定方法が間違っていると反映されません。
PC版のヘッダーは、スマホ版とは異なるCSSが適用されていることが多く、メディアクエリでスタイルが分かれている場合もあります。

解決方法：クラスを活用して強制的にフォント指定

コンテンツブロックで「ブロック」を選択し、「高度な設定」の「追加CSSクラス」にクラス名を追加

メニューのブロックを選択すると、右下の方に「高度な設定」が表示されます。

そこに、以下のクラス名を追加します。
「.」や「#」は不要です。

custom-font-nav

「外観」→「カスタマイズ」→「追加CSS」の一番下に下記の強力なCSSを記述する。

.custom-font-nav,
.custom-font-nav a,
.custom-font-nav a > span {
  font-family: "fot-tsukuardgothic-std", "Yu Gothic", "游ゴシック", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

フォント名は任意で書き換えてください。
一部のWEBフォントを使用するにはアドビなどの供給元との契約や登録が必要となることがあります。

4. その他のポイント

CSS編集後はブラウザキャッシュやWordPressのキャッシュをクリアしましょう。
Adobe Webフォントなどの有料フォントは読み込みコード（<link>やJavaScript）が正しくテーマヘッダーに入っているかも必ず確認してください。
スマホ・PCで適用範囲が分かれている場合、メディアクエリでPC用のフォント指定も別途書く必要があります。

5. まとめ

SANGOのコンテンツブロックでヘッダーを作成し、Adobe Webフォントを使う場合は、

メニューのラッパーにクラスを追加してCSSの優先順位をコントロールする
正しいフォント名を指定し!importantを活用する
キャッシュクリアを忘れず行う

ことで、PC・スマホ両方でフォントを確実に変えられました。

この記事の著者

飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR

牧内理恵

まきうちりえ

詳しいプロフィール

プロフィール

飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。

「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。

長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。

「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。

まずは無料で相談してみる飯田市周辺の制作実績を見る

※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。