wordpress　ポップアップだけ文字の色を変更したい

お世話になります。

質問

ポップアップの文字列
MORE　と
VEST　の文字色　をそれぞれ変更したいです。

詳細ご説明

画面を下の方に動かすとポップアップが右下に出てきます。

このポップアップに文字が出ています。

画像でいう
MORE 　を　緑いろ
VEST を　黄色
に文字の色を変更したいと思いましたができません。

ためしたこと

F12からどのCSSが効いているのか調べました。
すると以下コードがターゲットとなっている事がわかりました。

h1, h2, h3, h4, h5, h6, .vw-header-font, #wp-calendar caption, .vw-accordion-header-text, .vw-review-item-title, .vw-previous-link-page, .vw-next-link-page, .vw-quote, blockquote, .vw-comment__author, .widget_shopping_cart_content .mini_cart_item a:nth-child(2), .vw-post-content .vw-post-box__link {
    font-family: Lato;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: 900;
    font-style: normal;
    color: #da0a0a;

そこで上記colorを変更してみると、

MORE 　と
VEST　両方ともに色が変更しました。

しかし、ポップアップの
MORE　だけ
VEST　だけ
それぞれの色を変更する方法がわかりません。

ポップアップにおける文字色変更は今後も改修する可能性があります。
なんとなく単語の羅列変数名称から推測する方法だとまた同じ時に同じことを聞かないといけないと思いました。
可能であればそうではなくF12でマウスカーソルをチェックしながらターゲットコードにアプローチしたいです。

おしえてほしいこと

お手数おかけしますが
ポップアップの
MORE　の色変更
VEST の色変更
それぞれの別の色を変更する方法についてコードを教えて下さい。

お手数おかけしますが宜しくお願い致します。

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

回答2件

MORE STORIES は h4、VESTIBULUM FACILISIS LOREM ET ENIM EUISMOD は h5 なので、
別の色を指定するなら　少なくとも h4 と h5 別々に color を指定しなければなりませんが、

見つけられたセレクタは h4 h5 両方指定しているので
ここに color を指定したら両方同じ色になってしまいます。
別の色にしたいなら　このセレクタではできません。

今回の文字列は直接「右クリック＞検証(I)」すれば
それぞれ該当要素までダイレクトにジャンプできるのですが…
「右クリック＞検証(I)」は使われてますか？

以前にもご案内しましたが、「右クリック＞検証(I)」を使うと自動的に開発ツールが開きます。
真っ先に F12 を叩くのはちょっと控えていただいたほうがいいかもしれません。

ジャンプ先のHTMLコードにマウスカーソルを合わせると
ブラウザ上の該当箇所に色が付き、黒いフキダシでセレクタとサイズが表示され
こちらも参考になります。

セレクタをひとつ見つけてスタイルを変更してみたけどダメだった、の繰り返しで
いつも同じ過程で停まってるように思います。
第三者（テーマ製作者）が作成したコードを読むのは容易ではありません。
私も常にトライ＆エラーの繰り返しです。もう少し掘り下げてみてください。

投稿2018/12/29 19:02

Sohaya

総合スコア254

koikogarey

2018/12/30 02:27

「右クリック＞検証(I)」を使いキャプチャして頂いた画像のターゲットコードを自分でも全て調べてみました。その結果やはり MORE STORIES は h4、 VESTIBULUM FACILISIS LOREM ET ENIM EUISMOD は h5 であることがわかりました。 h4　の中で違う色が指定できるのか調べてみましたがわかりませんでした。諸々ありがとうございます。

Sohaya

2018/12/30 03:56

黒フキダシの中に書かれてるセレクタへのcolor設定はもう試されましたか？

koikogarey

2018/12/30 07:00

黒吹き出しをチェックしていると、.vw-more-articles__titleがターゲットとしてありました。そこで以下のように自分自身でコードを作成しTRYしてみたところ、他のh4タグは色変更をしないまま、該当箇所だけを変更することができました。 .vw-more-articles__title { position: relative; margin-top: 0; margin-bottom: 12px; font-size: 14px; padding: 0px 10px 0 0; color: #1b1075; }

koikogarey

2018/12/30 07:47

しかしVEST　H5に関しては右クリックから検証を実施しても vw-post-box__linkしか出ません。そこでCSS上でvw-post-box__linkを検索すると４箇所サーチがヒットしました。４箇所全てにcolorを指定してみましたが、VESTの色が変更される事はありませんでした。

koikogarey

2018/12/30 07:48

※VESTとはポップアップの下文字を指しています。

Sohaya

2018/12/30 15:51

特定のセレクタに絞り込みたいときは親要素などから1つもしくは複数の要素・クラスを組み合わせて目的の箇所のみにスタイルを適用できるように編集していくことになります。「a.vw-post-box__link」は複数の箇所に指定されているので親要素の、「MORE STORIES」の白いポップアップウインドウだけを指定できるセレクタと組み合わせてください。

koikogarey

2019/01/02 04:11

＞親要素の、「MORE STORIES」の白いポップアップウインドウだけを指定できるセレクタと組み合わせてください。具体的にどのセレクタをどのように組み合わせるのでしょうか？コードを交えて教示ください。

Sohaya

2019/01/02 07:15 編集

『右クリック＞検証(I)』は何度でも使って構いません。開発者ツールを開いたままで何度でも使えます。ご質問にも『また同じことを聞かなければならない』と仰ってましたのでクリックする場所を少しずつ変えて『右クリック＞検証(I)』を何度も使って答えにたどり着いていただきたいです。白いポップアップのフキダシのフチに近いところを『右クリック＞検証(I)』してください。ジャンプ先のコードにマウスカーソルを重ねればブラウザ側に表示された黒フキダシのガイドに答えが載っています。（セレクタの頭に付加すべき親要素セレクタ）

koikogarey

2019/01/05 19:19

ブラウザ側に表示された黒フキダシのガイドに答えが載っています。（セレクタの頭に付加すべき親要素セレクタ）チェックしてみると、vw-flex-grid__itemが黒フキダシのガイドに設定されていました。そこで .vw-flex-grid__item { color: red; } を設定しましたが、文字が赤になる事はありませんでした。そこで関連すべきクラスをチェックすると以下階層が設定されている事がわかりました。 vw-flex-grid__item vw-post-box__content vw-post-box__title vw-post-box__link セレクタの頭に付加すべき親要素セレクタの設定方法がわかりませんので具体的に正解コードを交えてご教示ください。

koikogarey

2019/01/05 19:28

また別件ですが、どれでもいいので記事一覧ページ(投稿ページ)にいくと、記事の終わりにRELATED POSTSがあります。このRELATED POSTSの文字の変更を実装したく以下を試しました。右クリック検証から、vw-related-posts__title　がターゲットになっていましたので @media (min-width: 992px) .vw-about-author__name, .vw-related-posts__title, .vw-our-picks-posts__title, .vw-post-comments-title, .vw-comments-title { font-size: 21px; } と指定し font-sizeを変更しました。フォントサイズは検証上では大小変わりましたが、実際にcssに上記コードを埋め込むと、フォントサイズは変わりませんでした。h3タグに付随するもの全てではなく、RELATED POSTSだけの文字の大きさを変更したいです。

Sohaya

2019/01/06 03:44

実際のcssは　どのように編集されてますか。親テーマのstyle.cssですか、子テーマのstyle.cssですか、それとも別に追加されたstyle.cssですが。子テーマを作成している場合は通常　子テーマstyle.cssを編集（末尾に追加で上書き）するのですが以前　ひとつのセレクタをいくつも追加されてるのを見たことがあるのでコンフリクトを起こしてるのかもしれないです。 style.css内の　古い（上の行に記述されている）コードを編集して変わらないときはより新しい（下の行に記述されてる）コードや !importantの指定、別のstyle.cssを読み込んでいないか、また　メディアクエリによる条件分岐等も疑ってみてください。 > セレクタの頭に付加すべき親要素セレクタの設定方法がわかりません例) E F 子セレクタFのクラスが共通スタイルとしてページの複数個所に使用されていて Eセレクタ内だけ適用させたい場合、半角スペースを空けて [親セレクタ][半角スペース][子セレクタ] と並べて記述します。親と子を並べるだけです。 [親セレクタ]　＝　白フキダシ [子セレクタ]　＝　h5.vw-post-box__title　や　h4.vw-more-articles__title　など「css セレクタ」等で検索すると CSSだけでデザインをコントロールしたいときの参考資料がたくさん見つかります。わたしもそこで学びました。 > 具体的に正解コードを回答でも「第三者が作成したコードを読むのは容易ではない」と申しましたが何から何まで聞くのでしたら「サイト制作支援or代行」と変わりがありませんのでスピード優先でしたら　外注したほうが良いと思います。「そこまで急いでないし予算も割けない、スキルアップも兼ねてる」とのことでしたらすでにサイトも非公開にされてるようですので　リトライして頑張ってください。

koikogarey

2019/01/15 07:05 編集

丁寧にありがとうございます。実際のcssは子テーマのstyle.cssです。最下部に記載をしています。記載をしたコードは以下です。 @media (min-width: 992px) .vw-about-author__name, .vw-related-posts__title, .vw-our-picks-posts__title, .vw-post-comments-title, .vw-comments-title { font-size: 21px; } !importantの指定があるか確認しましたがありませんでした。 [子セレクタ]　＝　h5.vw-post-box__title　や　h4.vw-more-articles__title　など子セレクタはh5.　やh4.　が必要なのですね。親セレクタは、白フキダシという事で調べましたが、 vw-flex-grid__item　というdivでした。例えば、この場合は vw-flex-grid__item h5.vw-post-box__title{ font-size: 21px; } と指定するという事でしょうか？私はとても優しく回答して頂いている方々をサイト制作支援、代行と考えた事は一度もありません。そしてこういった議論はそもそも問題の解決とあまり結びつきません。＞「サイト制作支援or代行」と変わりがありませんので＞スピード優先でしたら　外注したほうが良いと思います。＞「そこまで急いでないし予算も割けない、スキルアップも兼ねてる」その為、本質問だけで11回もやりとりしていますしお互い不毛な議論は避けて目的の解決に集中しましょう。

koikogarey

2019/01/06 04:57

またRELATED POSTSについても記載させて頂きましたのでお手数かけますがご確認頂ければ幸いです。

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