【Snow Monkey】特定ページだけグローバルメニューのフォントが違う問題を直した(/portfolio/ /testimonial/ /jp/shop/product/)

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入れたのに変わらない!」って時は、ほぼこれ。

  1. WP Fastest Cache を使っている → キャッシュ削除(全削除)
  2. Jetpack Boost 等でCSS最適化している → 一度キャッシュクリア(または最適化OFF→ON)
  3. ブラウザ側 → スーパーリロード(Mac:⌘ + Shift + R
    もしくはシークレットウィンドウで確認

別フォントを使っている場合

もし将来フォント名が変わったら、CSS内のここだけ差し替えればOKです。

font-family: "ここを使いたいフォント名にする", var(--font-family) !important;

この記事が気に入ったら、サポートをしてみませんか?
PayPalで気軽に支援できます。

TarCoon☆CarToonに寄付してサポートする。
*キャンセルするまで毎月お支払い頂くサブスクの場合、
サポート料金¥960と、登録時初回限りの設定料 ¥960の、合計¥1,920が掛かります。

TarCoon☆CarToonの活動を支援できるサービスです。
ブログやイベント、オンライン上での活動を応援したい方はサポートしていただければ幸いです。

この記事を書いた人

TarCoon☆CarToon

ソーシャルアイドル/偶像家/プロパガンティスト やりたいこと、いっぱい!やりかけのもの、いっぱい!怒られること、いっぱい!楽しいこと、いっぱい!いっぱいがいっぱい、タークゥーン カートゥーン!

お問い合わせ窓口

ConTact

展示・購入、講演会

TarCoon☆CarToonにご関心をお持ちいただきありがとうございます。展示・購入、講演など、お仕事のご依頼をお待ちしております。誤字脱字のご連絡や、ネタのタレコミ、その他のお問い合わせ、優待利用のご連絡、オンラインコミュニティへの参加申請等は、詳細ページのからご連絡ください。

コンタクト

問い合わせる所