リンクテキストの書式設定をカスタマイズする最適な方法は？

開発
1

リンクテキストの書式をカスタマイズする最適な方法はありますか？CSS を編集するのはベストなアプローチではないようです。プラグインが更新された際に変更が失われてしまうためです。

40
401738×632 42.5 KB

太字にし、サイト全体のテーマに合わせた文字色に変更して、自然に溶け込ませたいと考えています。

現在、リンクは次のように表示されています。

03
03778×104 16.7 KB

これを次のようにしたいのです。

39
39802×114 16.2 KB

テーマに応じてテキストをカスタマイズできるのも便利でしょう。ダークテーマとライトテーマの両方を持っており、それぞれ異なる色のフォントを使用しています。テーマに合わせて文字色を設定したいと考えています。

2

変更を加えた新しいテーマコンポーネントを作成し、Custom Header Links と同じメインテーマに追加する必要があります。

3

ありがとうございます！そのように対応しましたら、見事に機能しました。

気になったのですが、サイトはどの CSS を使用するのか選択する仕組みはどうなっているのでしょうか？標準のテーマコンポーネントに、フォント色を $header_primary に設定する CSS が含まれている場合：

.headerLink {
  list-style: none;
  a {
    padding: 6px 10px;
    color: $header_primary;
    font-size: $font-up-1;
  }
}

なぜ、私の新しいコンポーネントからの CSS を優先して使用するのか、その仕組みが気になります。

.headerLink {
  list-style: none;
  a {
    color: #7A7A7A;
  }
}
4

@Johani さん、これは現在も同様でしょうか？私のインスタンスは $header_primary の色を受け入れにくいようです。奇妙なことに、$primary を希望の色（白）に設定しても、頑なに黒のままです :upside_down_face:！

Screenshot 2021-02-06 at 14.16.12

5

SCSSから色の宣言にCSS変数への変更に関連している可能性が高いです。カスタムCSSで$header_primaryを割り当てても機能しませんが、以下のように記述すると色が正しく反映されます。

.custom-header-links .headerLink a {
    color: var(--header_primary);
}
6

この解決策は私には機能しませんでした。テーマのカスタム CSS に追加するのでしょうか？

7

その通りです。このコンポーネントは現在 CSS カスタムプロパティを使用しています。@Daniel_R さんの問題はこれで解決するはずです。コンポーネントを更新するだけです。