WordPress 設定

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

更新日:

生徒
メニューバーの色を変えたいのですが、やり方がわかりません?
先生
Google Chromeの検証機能を使い、コードを変更する必要があります。少しCSSの知識が必要ですが、初心者でも簡単にできますよ。
先生
では説明して行きますね。

Sponcerd Link



1.Google Chromeの検証機能

では、メニューバーを黒に、中の文字は白に変更して行きましょう。

メニューバーの色を変更する場合、書かれているコードのどこを変更すればよいのかがわからないと、変更することはできません。

Google Chromeの検証機能を使い、まずどこを変更すれば良いのか確認しましょう。

①Google Chromeの起動

Google Chromeを起動し、メニュバーをカスタマイズするサイトにログインします。

次にダッシュボードから左上のサイト名を選択し、【サイトを表示】をクリックします。

以下のようにサイトが表示されます。

②検証機能の使い方

画面上で右クリックし、メニューから【検証】をクリックします。

左下側に「HTMLのコード」、右下側に「CSSのコード」がそれぞれ表示されます。

2.検証機能の「選択モード」で、変更するコードの確認

下図のとおり左下にある↖をクリック(選択モード)し、メニューバーをクリックします。

すると、下のウィンドウに、メニューバー部分のコードが表示されます。

左側は、HTMLのコード、右側にはCSSのコードがそれぞれ表示されます。

CSSのコードの中から、メニュバーの色を構成するコードを探します。

色は、設定するコードはありません。

①CSSコードの追加

以下のコードを追加して、メニューバーの色が変わるか確認します。

コードの意味

「background: black;」=メニューバーの色は黒

「color: white;」=文字の色は白

変更が確認できました。

ただし、この場所のCSSのコードを変更しても、実際のコードは変更されません。

②CSSコードを変更の更新

まず、下記のとおり【カスタマイズ】をクリックします。

すると、画面左側にカスタマイズのメニューが表示されます。

【追加CSS】をクリックします。

先ほど変更して、メニューバーを黒に変更することができた、CSSのコードを「追加CSS」のウィンドウ内にコピーします。

不要な部分を削除し、以下のようにコードを変更します。

コードの意味=「表示メディアが960pxより大きい場合に、 メニューバーの色は黒に、文字は白にする」

【公開】をクリックします。

これで、メニューバーを黒にし、中の文字を白くするカスタマイズは完了です。

komiya
最後までお読みいただきありがとうございました。
The following two tabs change content below.
komiya

komiya

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

スポンサーリンク



スポンサーリンク



-WordPress, 設定

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