【コピーでOK】フッターリンクのホバー背景色を変えるCSS【Cocoon】

【コピーでOK】フッターリンクのホバー背景色を変えるCSS【Cocoon】ブログカスタマイズ

当ブログではフッターの背景が明るめの青なので、文字色を白に指定しています。

しかし設定した直後にマウスをフッターのリンクに合わせると、次のように真っ白になり文字が見えなくなってしまいました。

フッターリンクをホバーすると真っ白

これでは訪問者が自分のマウスを合わせたリンクがわかりません

そこでフッターのリンクにマウスを合わせた時の背景色を変えることにしました。

今回はその変更方法を紹介します。

テーマの設定からではなくCSSを直接編集します。初学者にも分かりやすいよう画像と解説をつけています

ちなみに紹介するCSSコードをコピーすると次のような色で表示されます。別の色を設定したい場合は、該当するカラーコードを検索してください。

フッターリンクのホバー背景色修正後

ちなみにマウスを何かに合わせることをマウスオーバー/ロールオーバー/マウスホバーと呼びます。

広告
そらしど

本業はWebプログラマー。
Cocoonのデザインをカスタマイズやブログノウハウを紹介しています。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー

カスタマイズ手順

カスタマイズ手順
カスタマイズ手順
  • STEP1
    WordPress管理画面でstyle.cssエディタを開く
  • STEP2
    CSSをコピーする
  • STEP3
    style.cssに貼り付ける
  • STEP4
    保存を押す

WordPress管理画面からテーマエディターを使って直接style.cssを編集する手順です。

テーマエディターの使用には注意が必要です。可能であればFTPソフトを使いましょう。

WordPress管理画面でstyle.cssエディタを開く

まず普段通りにWordPressにログインしてください。

次の順番で画面を移動してください。

画面遷移

外観→テーマエディタ→style.css

外観にマウスを当てるとサブメニューが出ます。テーマエディタを選択してください。

子テーマ(Cocoon-child)のstyle.cssを開いてください。(画像付きの手順

CSSをコピーする

以下のCSSをコピーしてください。 Copyボタンを押すと簡単にコピーできます。

.navi-footer-in a:hover {
  background-color: #006F86; /* フッタ マウスホバー背景色変更 */
}
Copy

style.cssに貼り付ける

先ほど開いたテーマエディタのstyle.cssに貼り付けます。

貼り付ける場所はファイル内の任意の場所ですが、他のコードの間に貼り付けないように注意してください。

テーマエディター編集
貼り付け場箇所の例

保存する

画面下部にあるファイルを更新ボタンを押してください。

緑色の枠で「ファイルの編集に成功しました。」と表示されたら完了です。

ファイルの編集に成功しました。

フッターの動作を確認してください。

CSS解説

解説する人

今回追加したCSSのコードを簡単に解説します。

.navi-footer-in a:hover {

}

.から始まるコードはクラス名といい、後で指定するための名前です。

navi-footer-inはフッター用に設定されているクラス名です。

a:hoverは対象がマウスホバーされた時だけ反映したい場合に使用します。

background-color: #006F86;

background-colorは背景色を設定します。

#006F86はカラーコードといい、設定する色を指定します。6桁の16進数なので、値を変えて調整もできます。

;は設定の区切りを表します。今回はbackground-colorの終端を表します。

/* フッタ マウスホバー背景色変更 */

コメントアウトといいます。コードとして認識されません。メモやバックアップに使います。自分の分かりやすいように変更してかまいません。

「/*」と「*/」の間にあるコードが該当します。改行にも対応しています。

当サイトで掲載しているソースコードについて

この記載はプライバシーポリシーからの抜粋です。

著作権およびライセンス

ブログに掲載されている、ブログ管理者(そらしど)が本来権利を有するソースコードについては、ライセンスをCC0とします。

商用・非商用を問わず自由に利用していただいて構いません。その際の連絡も不要です。

免責事項

当サイトに掲載しているカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についても当サイトその責任を負いかねます。何卒ご理解、ご了承の上、当サイトをご活用いただきますようお願い申し上げます。

まとめ

フッターリンクのホバー背景色を変えるCSSでした。

フッター以外の背景色を変えたいけどクラス名がわからない場合はブラウザの開発者ツールを使って調べることができます

分からないことや質問があれば下記から気軽に連絡ください。

そらしど
そらしど

最後まで読んでいただきありがとうございました。


Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」 [ 谷拓樹 ]

ブログカスタマイズ関連のおすすめ記事

コメント

タイトルとURLをコピーしました