賢威7でカテゴリーをマウスオーバーした時に背景色を変化させる方法

どうも。葉です。

この記事では、賢威7でカテゴリーをマウスオーバーした時(カーソルをカテゴリーの上にのせた時)に背景色を変化させる方法を解説します。

1.この記事を読んでできるようになること

まず、この記事を読んでできるようになることを確認してください。

下図の「変更前」→「変更後」のようにカテゴリーにマウスオーバーした際に、リンクの背景を変化させることができるようになります。

変更前

マウスオーバーしても見た目の変化がない

変更後

マウスオーバー時に背景色が変化する

では、実際にコードを編集して、カテゴリーをマウスオーバーした時(カーソルをカテゴリーの上にのせた時)に、背景色が変化するようにしましょう。

2.賢威7でカテゴリーをマウスオーバーした時に背景色を変化させる手順

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

賢威7でカテゴリーをマウスオーバーした時に背景色を変化させる手順1

「base.css」をクリックしてください。

賢威7でカテゴリーをマウスオーバーした時に背景色を変化させる手順2

「base.css」の最下部に次のコードを貼り付けてください。

/*-------------------------------------
カテゴリーマウスオーバー時のデザイン
-------------------------------------*/
.cat a:hover{
    background: #f60;
    border-radius: 3px;
}

賢威7でカテゴリーをマウスオーバーした時に背景色を変化させる手順3

これで、カテゴリーにマウスオーバーした際には、背景色が変化するようになったはずです。

3.まとめ

この記事では、賢威7のカテゴリーをマウスオーバーした時に背景色を変化させる方法について解説しました。

この他にも、カテゴリーの表示を編集したい場合は、次の記事を参考にしてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします