サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年5月2日 15:38
（2日前に質問させていただきましたが、質問自体が反映されていないようなので再度質問させていただきます）
お世話になっております。
ブログにてcocoonを使用させていただいています。
初歩的な質問で申し訳ないですが、以下についてご教示いただきたいです。
■質問内容
・モバイル表示時のサイドバー・メニューの文字色変更方法について
■現状
・サイドバーについて、デスクトップ版画面では背景色が白色、文字色黒色にて表示されている。一方でモバイル版の画面では、背景色が白色、文字色も白色で表示されてしまう。
・モバイル版のみでヘッダーに表示させているメニューについて、左から出現するページ（背景色：白色）の「×」ボタンの文字色が白色で表示されている。
■ありたい姿
・モバイル版におけるサイドバー、メニューについて、背景色：白色、文字色：黒色で表示。
■参考画像
・添付の参考画像は、iPhone7にて表示しています。なお、ソフトウェアおよびブラウザアプリは最新のものを使用しています。
■備考
・以下のコードを入力も変化なし。（親テーマ、親テーマskin、子テーマ、子テーマskin、カスタマイズに入力実施）
/************************************
** プロフィールの本文を黒文字にする
*********************************/
.author-box .author-myintro {
text-decoration: none;
color: #333;
}
/*********************************
** モバイルのグローバルナビ(メニュー)の設定
*********************************/
#navi .navi-in > .menu-mobile a{
color:#333;
background-color:#ffffff;
}
/*********************************
** モバイルのグローバルナビ(メニュー)の設定（左側からスライドするメニュー）
************************************/
.navi-menu-content .menu-drawer a {
color: #333;
background-color:#ffffff;
}
■テーマ情報
---------------------------------------------- サイト名：ヒンとりがー サイトURL： https://www.hintrigger.com ホームURL： https://www.hintrigger.com コンテンツURL：/wp-content インクルードURL：/wp-includes/ テンプレートURL：/wp-content/themes/cocoon-master スタイルシートURL：/wp-content/themes/cocoon-master スキン：/wp-content/themes/cocoon-master/skins/skin-modernblack/style.css WordPressバージョン：5.4.1 PHPバージョン：7.3.13 ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 エンコーディング：gzip, deflate, br 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.1.4.1 カテゴリ数：2 タグ数：0 ユーザー数：1 ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：0 ホームイメージ：/wp-content/uploads/2020/04/1ac39a085e654fcbf424f6acc4046b9d.png ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：0 CSS縮小化：0 JavaScript縮小化：0 Lazy Load：1 WEBフォントLazy Load：0 ---------------------------------------------- 利用中のプラグイン： ----------------------------------------------
以上、お手数をおかけしますがよろしくお願いいたします。
2020年5月2日 17:15
tetsuo3 さん
現在は、「skin-modernblack」というスキンを設定されていらっしゃるようですが、スキンを「なし」にして、iphone7で見てみると、どのように見えますでしょうか？
tetsuo3 reacted
2020年5月2日 17:23
僕はアンドロイドですが、tetsuo3さんのサイトを見ると、右からスライドインするメニューは同じように文字が表示されない現象が発生します。
ただし、左からスライドインするメニューの文字はOKでした。
次に、モバイルの表示が確認できる https://www.responsinator.com/ で、tetsuo3さんのURLを入れて確認しても、やはり文字が表示されません。（これも左スライドインはOK）
ただし、マウスを乗せると文字が消えて、外すと文字が表示されるという謎の現象が出ます。
（添付画像参照）
tetsuo3さんへのお願いですが、追加しているCSSのコードを削除して、
・スキンがない状態でも文字が表示されないのか？
・他のスキンに切り替えても文字が表示されないのか？
を確認してもらえないでしょうか。
スキンのの問題かどうかだけでも、切り分けしましょう。
※個人的には、WordPressのバージョンが5.4.1というのが気になります。
ちなみに、僕のブログ（Cocoonは最新の2.1.4.1で、WordPressは5.3.3）で、モダンブラックに切り替えてスマホから見ましたが、両方のメニューとも文字はちゃんと表示されました。
2020年5月2日 18:59
スキンの「skin-modernblack」でインラインで出力されるCSSの、
*::
{
/*! color:#000; */
}
*::-moz-selection {
/*! color:#000; */
}
*::selection {
background:#ededc9
}
*::-moz-selection {
background:#ededc9;
}
この辺りの指定は、スキンのデザインに必要なのかなぁ・・
tetsuo3 reacted
トピックスターター 2020年5月3日 12:36
トピックスターター 2020年5月3日 12:38
@y-hiroaki さん
アドバイスいただきありがとうございました。
tetsuo3さんへのお願いですが、追加しているCSSのコードを削除して、
・スキンがない状態でも文字が表示されないのか？
こちらですが、試したところ表示されるようになりました！
①cocoon設定 → スキン → なし に変更 ← 変化なし
②その後、親テーマ、親テーマskin、子テーマ、子テーマskin、カスタマイズのCSSを削除 ← iOSでも黒色で表示されるようになる。
ただ、エラー要因がどのコードだったかは把握出来なかったため、この後原因を究明したいと思います。
私の後学のためでもありますが、追って結果をこちらに記載させていただきます。
皆様、お時間をいただきありがとうございました。
トピックスターター 2020年5月4日 12:40
@yhira さん
ご丁寧にありがとうございます。
おっしゃるとおり、追加のCSSが原因でした。
皆様、改めまして貴重なお時間をいただきありがとうございました。
任意の状態にしたいがために色々と試行錯誤していましたが、その過程で入力した以下のコードが原因とわかりました。
.menu-button:hover {
color: #ffffff; /* 文字色 */
background-color: #000000; /* 背景色 */
}
こちらは完全に私の転記ミスとなります。初歩的なミスで申し訳ないです。
重ねて御礼申し上げます。ありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。