WordPress 設定

初心者でも簡単にできるWordPressのホームページ(外観テーマStinger)で記事の上にマウスカーソルを置いたとき、色が変わるようにする方法

投稿日:

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

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

 

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

Sponcerd Link



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

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

初心者でもできるWordPressで作成したホームページのメニューバーの追加CSSを使用した簡単なカスタマイズ

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

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

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

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

初心者でもできる「子テーマ」を使ったWordPressの本格的カスタマイズ方法 

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

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

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

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

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

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

ロリポップサーバーでSSL化(無料)の設定方法(WordPress)②「.htaccess」ファイルの設定

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

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

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

先生
これで完了です。

5.表示の確認

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

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

 

The following two tabs change content below.
komiya

komiya

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







-WordPress, 設定

Copyright© 初心者がWebスクールに通って作るホームページ , 2018 All Rights Reserved Powered by STINGER.