TarCoon☆CarToon公式サイト(WordPress + Snow Monkey)で、一部のページだけヘッダーのグローバルメニューのフォントが他ページと揃わない症状が出ました。
https://tarcoon.me/jp/shop/product/https://tarcoon.me/portfolio/https://tarcoon.me/testimonial/
この記事では、原因と、追加CSSだけで揃える手順を備忘録としてまとめます。
本記事は、筆者が行った設定・調整作業を振り返るための備忘録として記録しています。環境(テーマ・プラグイン・バージョン・設定・他プラグイン等)によって挙動が異なる場合があり、内容の正確性・再現性・動作を保証するものではありません。実施は自己責任でお願いします。万一トラブルが発生しても、筆者は責任を負いかねますのでご了承ください。
症状
上記ページに行くと、ヘッダー(グローバルメニュー)のフォントだけが別のフォントになってしまう。
本文は問題ないのに、メニューだけ違和感が出るやつ。
原因:フォント指定が「#post-xxxx」内に閉じていた
HTML/CSSを追うと、フォント指定がこういう形で出力されていました:
#post-15598 ... .p-global-nav { font-family: "G2サンセリフ-B"; }
ここがポイントで、ヘッダーのグローバルメニュー(.p-global-nav)は #post-xxxx の中に存在しません。
つまり、
#post-xxxx .p-global-navは 一致しない- 結果、該当ページではメニューにフォントが当たらず、デフォルト側に戻ってしまう
…という流れでした。
解決策:ヘッダーのグローバルメニューにフォントを直指定する
WordPress管理画面から
外観 → カスタマイズ → 追加CSS
に、以下を追加します(コピペOK)。
/* グローバルメニュー(ヘッダー)を他ページと同じフォントに統一(TypeSquare側に合わせる) */
.l-header .p-global-nav,
.l-header .p-global-nav a,
.l-header .p-global-nav label,
.l-header .p-global-nav small,
.l-header .c-navbar,
.l-header .c-navbar a,
.l-header .c-navbar__item,
.l-header .c-navbar__item > a,
.l-header .c-navbar__submenu,
.l-header .c-navbar__submenu a,
.l-header .c-drawer,
.l-header .c-drawer a,
.l-header .c-drawer__menu,
.l-header .c-drawer__menu a,
.l-header .c-site-branding__description {
font-family: "G2サンセリフ-B", var(--font-family) !important;
}
ねらい
- ヘッダー領域だけにフォントを当てる
"G2サンセリフ-B"が読めない(未ロード等)場合でも、var(--font-family)にフォールバックする!importantで「ページ側の変な上書き」に負けないようにする
反映されないときは、だいたいキャッシュ
「CSS入れたのに変わらない!」って時は、ほぼこれ。
- WP Fastest Cache を使っている → キャッシュ削除(全削除)
- Jetpack Boost 等でCSS最適化している → 一度キャッシュクリア(または最適化OFF→ON)
- ブラウザ側 → スーパーリロード(Mac:
⌘ + Shift + R)
もしくはシークレットウィンドウで確認
別フォントを使っている場合
もし将来フォント名が変わったら、CSS内のここだけ差し替えればOKです。
font-family: "ここを使いたいフォント名にする", var(--font-family) !important;
