初心者でも作れるホームページ
知識がなくても、大丈夫!それなりのホームページは作れます。
WordPress

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

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

 

komiya

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

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

 

先生

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

Sponcerd Link



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

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

初心者でもできるWordPressで作成したホームページのメニューバーの追加CSSを使用した簡単なカスタマイズ 1.Google Chromeの検証機能 では、メニューバーを黒に、中の文字は白に変更して行きましょう。 ...

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

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

「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」で開き、下記のコードを追記します。

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

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

ロリポップサーバーでSSL化(無料)の設定方法(WordPress)②「.htaccess」ファイルの設定ロリポップサーバーでSSL化(無料)の設定方法(WordPress)① 上記の設定をしましたが、まだ「http」と「https」の...

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

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

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

先生

これで完了です。

表示の確認

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

まとめ

 

komiya

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

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


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

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

おすすめ記事

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