【WordPressサイト】グローバルナビのstyle.css変更

当方、WordPressには日頃から触っていますが、カスタマイズ経験はほとんどなく、
HTMLやCSS等の理解度は基礎レベルかと思います。。
そんな中恐縮ですが、自力で調べてもわからかなったので質問させていたきます。

※※以下、質問です。※※
WordPressで作成したサイトのグローバルナビゲーションのテキストカラーと
TOPページのキービジュアル画像の色味が被ってしまい、文字が読みづらい状態です。

そこで、グローバルナビゲーションのテキストカラーを白から黒に変えるため
CSSでカラーコードを書き換えたいのですが、該当箇所が見つからず困っています。

現状、以下の2つの方法を試しています。

① ページ検証で見れる
 「site-navigation」「main-navigation」「primary-menu」
 をCSS上で検索するもヒットせず

② CSSの「# Typography」や「# Navigation（の## Menus）」あたりかと思ったが、
  指定している記述が見当たらない
  ⇒・違う箇所で指定している？
   ・もしくは、そもそも指定しておらずデフォルトの白が適用されている？

作成段階のサイトなので、正直URLを大っぴらにしづらいですが（こちらです。）
こちらの問題が解決すると大変ありがたく存じます。

※ちなみに、WordPressの無料テーマ「Athena」を使用しています。

ぜひ、皆さんのお力をお貸しいただけますと幸いです。。
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

wordpressのstyle.cssならtheme配下のディレクトリに存在しています。
もしアクセスが難しいようでしたら、wordpressにログインして左ナビの「外観」→「テーマの編集」の中にcssなどが格納されています。

cssの当たってる箇所を確認したらul.athena-nav aにcolorが設定されていました。
style.cssのul.athena-nav aを修正すれば大丈夫だと思います。

元のstyle.css

ul.athena-nav a {
    font-size: 14px;
    color: #f9f9f9;
    color: rgba(255, 255, 255, 0.8);
}

変更後のstyle.css

ul.athena-nav a {
    font-size: 14px;
    color: #000;
}

投稿2017/08/30 09:53

編集2017/08/30 09:54

Higemura

総合スコア274

Kyoko

2017/08/31 06:45

Higemura 様丁寧に変更方法をご教示いただき、誠にありがとうございます。こちらでstyle.cssを変更してみようかと思います...！もしまた不明点があれば、追加で質問させていただけますと幸いです。

Kyoko

2017/08/31 08:48

＞wordpressのstyle.cssならtheme配下のディレクトリに存在しています。＞もしアクセスが難しいようでしたら、wordpressにログインして左ナビの「外観」→「テーマの編集」の中にcssなどが格納されています。上記2つの方法でcssファイル内を検索して確認しましたが、「ul.athena-nav a」の記述や「#f9f9f9」のカラーコード番号が見当たりません。見方が違うのでしょうか。。お手数ですがご教示いただけますと幸いです。

Higemura

2017/08/31 08:58

なるほど、以下のディレクトリでcssを確認できたのですがどうですか？（あまりディレクトリを開示してしまうのは危ないと思うのでthemes配下から記載しました） themes/athena/inc/css/style.css 上記のstyle.cssでul.athena-navと検索してみてください。（テーマによっては別の階層に他のstyle.cssがあるので、そこを検索してしまったのでは？と思いました笑）

Kyoko

2017/09/04 10:17

ありがとうございます！変更できました！追加質問で申し訳ありません。。もし可能であれば、固定ページと投稿の文章行間を調整に関してもご教示いただけますと幸いです。サイト全体に反映したい場合、 body{ font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 400; color: #4D5051; } に、line-heightプロパティを追記するのでしょうか？（参照：https://allabout.co.jp/gm/gc/23822/2/）ご多用のところ恐縮ですが、よろしくお願いいたします。。

Higemura

2017/09/05 01:01 編集

はい！line-heightで問題ないです。ただbodyにline-heightを記述する場合は全体の行間に影響しますので、「h1タグは行間広めに」とか「ここのclassは行間狭めに」などデザインで変える場合はプラス個々のタグにも指定する必要があります。またline-heightプロパティは単位をつけることができるのですが、基本的に単位を使用しない方が保守しやすいでしょう。（pxやemなど）以下、サンプルコードです。 body { 　font-family: 'Raleway', sans-serif; 　font-size: 16px; 　font-weight: 400; 　color: #4D5051; 　line-height: 1.5; //文字サイズの1.5倍の行間を指定する } h1 { 　font-size: 30px; 　line-height: 2; //h1だけ文字サイズの2倍行間を取りたい。 } .subText { 　font-size: 12px; 　line-height: 1.2; //注釈テキストだけ文字サイズの1.2倍行間を取りたい。 } http://www.htmq.com/style/line-height.shtml

Kyoko

2017/09/05 04:43

ご丁寧にご教示いただきありがとうございます！ bodyにline-heightを記述して各タグに指定するよりも、固定ページと投稿の記述個所に line-heightを記述した方がシンプルでしょうか？その場合の記述個所に関して、投稿は「/*blog*/」のコメントアウトあたりかと思いますが、固定ページはどこなのか、合わせてご教示いただけますと幸いです。たびたびの質問で恐縮ですが、よろしくお願いします。。

Higemura

2017/09/05 05:59 編集

今の全体行間を崩したくないならbodyに入れない方が良いです。投稿と言っても「投稿タイトル」「日付」「投稿者」「投稿テキスト」がありますので、タグを指定しないと投稿部分全体にcssが影響してしまいます。例えば投稿テキスト部分はclass「entry-content」が指定してあったので、そこにcssを適応すれば良いかと思います。どの部分にcssを適応するかわからないようであれば、webデベロッパーツールを使用してください。 windowsならF12、macならcommand+option+iで表示されます。 http://www.buildinsider.net/web/chromedevtools/01 webデベロッパーツールを使用すれば、現在構築中のサイトから調べたい箇所にマウスを重ねるだけでどんなcssが適応されているのかわかります。こちらのコメントからは参考画像が貼れないので、僕をフォローしていただいて「回答依頼」を出していただくか、新しく質問投稿していただけると助かります。

Kyoko

2017/09/05 08:01

おっしゃる通り「投稿テキスト部分」のみの行間に適用したいので、 bodyには入れない方向で調整しようかと思います。 webデベロッパーツール上では「entry-content」の指定を確認できましたが、以前ご教示いただいた、themes配下のディレクトリにあるcss上では「entry-content」の記述がないようです。。 > こちらのコメントからは参考画像が貼れないので、僕をフォローしていただいて「回答依頼」を出していただくか、新しく質問投稿していただけると助かります。ありがとうございます。フォローさせていただきました。よろしくお願いいたします。

行動規範の内容に同意します

※line-heightについて回答欄がなかったためこちらに記述しています。

多分別のcssに記述されています。（以前とディレクトリが違うcssに記述されてました。）
/themes/athena/style.css

.page-content,
.entry-content,//ここにcssが割り振られている。（ほかの「.page-content」「.entry-summary」にも影響してしまうためここにはline-heightを記述しない）
.entry-summary {
  margin: 1.5em 0 0;
}

//以下のように「.entry-content」だけにline-heightを追記してください。
.entry-content {
  line-height:1.6;
}

ちなみにデベロッパーツールから指定のcssを確認できますのでご確認ください。