WordPress

WordPressのホームページで記事の上にマウスカーソルを置いたとき、色が変わるようにする方法

今回は、WordPressのホームページの記事にマウスカーソルを置いたときに色が変わるようにする方法について書いています。

 

komiya
komiya
サイドバーの記事の上にマウスカーソルを持って行くと文字の色が変わります。

しかし、サイト中央の記事は、マウスカーソルを置いても、色が変わりません。色が変わるようにすることはできないでしょうか。

 

先生
先生
前回「子テーマ」の使ったカスタマイズの方法を説明しました。
今回も「子テーマ」のstyle.cssにコードを追加することで簡単にカスタマイズすることができますので説明して行きます。

Sponcerd Link



Google Chromeの検証機能で変更すべき箇所の確認

Google Chromeの検証機能を使い、まずどこを変更すれば良いのか確認しましょう。「Google Chromeの検証機能」について詳しくは、以下の記事をご欄ください。

初心者でもできるメニューバーのカスタマイズ(WordPressの追加CSS)この記事は、初心者でも簡単にできるメニューバーのカスタマイズ方法について書いています。WordPressの追加CSSを使って、カスタマイ...

検証機能の選択モードで、変更すべき箇所を確認します。

見つけた以下のコードをコピーしておきます。

.kanren h3 a, .post .kanren h3 a {

color: #1a1a1a;

}

「FileZilla」で「style.css」をダウンロード



フリーソフト「FileZilla」を起動し、サーバーに接続します。「FileZilla」については、以下の記事をご欄ください。

初心者でもできる「子テーマ」(stingerplus2-child)を使ったWordPressの本格的カスタマイズ方法 この記事は、初心者でもできる「子テーマ」(stingerplus2-child)を使ったWordPressの本格的カスタマイズ方法につい...

上記記事でサーバー側のfirsthp (ドメイン)→  wp-content → themes→「stingerplus2」フォルダにある「style.css」をダウンロードします。

間違えたときのため日付を付けたフォルダへバックアップ用としてコピーします。(書き換えた「style.css」でホームページがおかしくなった場合、バックアップを戻すと元の状態に戻すことができます。)

「ATOM」で「style.css」へコードの追加

ダウンロードした「style.css」をフリーソフト「ATOM」で開き、下記のコードを追記します。

.kanren h3 a:hover,.post.kanren h3 a:hover {

color DarkGreen

}

上記のコードの「hover」は、擬似クラスというもので、擬似クラスとはある要素が特定の状態にあるときにスタイルを指定する方法です。また「a:hover {color DarkGreen}」とは、aタグの上にマウスカーソルがのったときに色をダークグリーンにするという意味です。

「ATOM」については、以下の記事をご欄ください。

インターネットセキュリティ対策のイラスト
ロリポップサーバーでSSL化(無料)の設定方法(WordPress)②「.htaccess」ファイルの設定ロリポップサーバーでSSL化(無料)の設定方法(WordPress)① 上記の設定をしましたが、まだ「http」と「https」の...

以下は「ATOM」の画面です。

再度「FileZilla」で「style.css」をアップロード



追記した「style.css」をサーバーにアップロードします。

先生
先生
これで完了です。

表示の確認



以下のように、記事の上にマウスカーソルを持って行くと、記事の色がダークグリーンになります。

まとめ

今回は、WordPressのホームページの記事にマウスカーソルを置いたときに色が変わるようにする方法について書きました。

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

アクセスランキングに登録しています。
ポチっと押していただけたら、うれしいです。


ブログノウハウランキング

にほんブログ村 ブログブログ ブログノウハウへ
にほんブログ村

おすすめ記事

Windows7からWindows10へアップデートを促す通知
初心者でもできるWindows7からWindows10へアップデートこの記事は、初心者でもできるWindows7からWindows10へアップデートについて書いています。 ...
ABOUT ME
komiya
komiya
中小企業で事務の仕事をしています。ホームページ、アフィリエイトの初心者です。コミュニケーションが不得手です。これまで、コーチングやアドラー心理学の講座などコミュニケーションを改善しようと色々受講しましたが、職場ではうまく行かず、むしろ悪化させてしまいました。目標を切り替えて自分1人で、できることをしようと考え、Webスクールに通いこのホームページを作りました。社会人として働いていますが、精神的にはひきこもりです。こんな私ですが、どうかよろしくお願いします。