【編集】 base.css

賢威7.1のパンくずリスト

賢威7.1のスタンダード版のパンくずリストがこれ。

パンくずリストの文字色を変更する方法

悪くは無いが、サイトカラーによっては文字色を変えたい時もあります。

また、リンクにマウスオーバーした時がこちら

パンくずリストの文字色を変更する方法

これも、サイトのカラーによっては変更を加えたい時がありますよね。

今回は、賢威7.1のパンくずリストの文字色を変更してみます。

CSSを書き換える

『Base.css』のパンくずリストの記述しているところは、大体800行目あたりの、この部分

パンくずリストの文字色を変更する方法

親テーマのbase.cssを書き換えるより、子テーマのbase.cssに付け加えた方が安全ですので、子テーマに記述する方向で解説します。

子テーマについては以下の記事を参考にしてください

多くのユーザーがいる賢威のワードプレステーマ。そのまま使ってもよいのですが、文字の色を変えたり、背景や見出しのデザインを変えたりと、自分の好みにカスタマイズ...

パンくずリスト全体の文字色を変える

まず、パンくずリストの文字全体を変更するには、以下のコードを子テーマのbase.cssに加えます。

パンくずリストの文字色をグリーン(#008000)に変更しました。

パンくずリストの文字色を変更する方法

「Color:」の後を、変更したいカラーコードにすればよいわけです。

マウスオーバーした時の文字色を変える

リンクにマウスオーバーした時の色を変えるには、以下のコードをbase.cssに加えます。

リンクにマウスオーバーした時の色をブルー(#0000ff)にしてみました。

パンくずリストの文字色を変更する方法

「COLOR:」の後のカラーコードを変更するだけで、サイトにあった文字色にすることができます。

例えば、リンクの文字は通常の場合はブルー(#0000ff)、マウスオーバーの時はレッド(#ff0000)、最後の記事タイトル部分は黒( #000000)にする場合は以下のコードを追加します。

すると、通常時は

パンくずリストの文字色を変更する方法

リンクにマウスオーバーした時は

パンくずリストの文字色を変更する方法

といった感じになります。

以上、パンくずリストの文字色の変更方法の解説でした。
パンくずリストの色を変更したい時の参考にしてください。