サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-07-02 12:39
ヘッダーモバイルボタンはもともとコマンドがついているものは色変更ができるのですが電話ボタンを追加したのですがその電話ボタンの文字色が変更ができません。
どのようなCSSになるのでしょうか？
2020-07-02 13:52
前略、ダイバー さん
通常なら、たぶん以下のようなものだったと思うのですが、カスタマイズされている場合は、実際のページで検証しないと何とも、わかりません。（かと言って、実際のページをご提示いただいても上手くいかない場合もあるかもしれません。）
.mobile-header-menu-buttons .menu-icon,
.mobile-header-menu-buttons .menu-caption {
color: #fff;
}
Yamachan11 and わいひら reacted
2020-07-02 14:48
ダイバー さん
前述のCSSでは、全てのボタンが同じ色になってしまうので、個々のボタンそれぞれに固有の色を設定する場合は、また違った指定をしなくてはならないのかもしれません。
かと言って、そのボタン固有の ID や class が付与されていない場合には、親要素に対して、何番目の子要素である、というようなターゲットを絞りこむCSSを用いる方法もあります。
通常なら、「nth-child」や「nth-of-type」を使えば、CSSの適用範囲を絞り込むことができるのではないかと思います。（私はこれを用いるのに慣れていませんが・・）
以下関連リンクを貼ってみます。
CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い
CSSのnth-childとnth-of-typeについて基本から学ぼう
Yamachan11 and わいひら reacted
2020-07-02 15:11
ダイバー さん
私も「nth-child」や「nth-of-type」を使い慣れていないので、間違っているかもしれません。
でも、間違った書き方をして、なんで効かないんだろう・・というのもまた、勉強になるので、それも有り？
効かなければ、修正すれば何とかなりますし。
.mobile-header-menu-buttons li:nth-of-type(3) .menu-icon,
.mobile-header-menu-buttons li:nth-of-type(3) .menu-caption {
color: #fff;
}
Yamachan11 and わいひら reacted
2020-07-02 16:00
ネットで調べてみると、疑似クラスは、原則としてセレクタの最後に記述すると書いているサイトもあるけど、以前見た記事で、途中に書いても効くというような記事を読んだ記憶もあり、「原則」ということは、原則でない場合も許されるものなのか、ちょっと私には、よくわからない部分もあります。（どなたかご教示くださ～い ? ）
セレクタの最後じゃなきゃダメよ、という場合は、以下のように書けばよいのかと思ったり・・
.mobile-header-menu-buttons .menu-icon:nth-of-type(3),
.mobile-header-menu-buttons .menu-caption:nth-of-type(3) {
color: #fff;
}
まあ、とりあえず、いろいろ試しみて、ダメなら戻せば良い話で・・
歯切れの悪い書き込みになってしまっていますが・・
https://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/#pseudo-elements
Yamachan11 and わいひら reacted
2020-07-02 17:33
やっぱり、
.mobile-header-menu-buttons .menu-icon:nth-of-type(3),
.mobile-header-menu-buttons .menu-caption:nth-of-type(3) {
color: #fff;
}
これじゃあ、直接の子要素じゃないし、効きそうにないなぁ・・
もうちょっと、勉強しないと、ダメですね。
別のやり方の方がいいかもしれません。 ?
わいひら reacted
2020-07-02 19:22
@ダイバー さん
あら、同じ色でよかったんですね。 ?
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。