Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

iPad(第6世代)だけ追加CSSが反...
 
共有:
通知
すべてクリア

[解決済] iPad(第6世代)だけ追加CSSが反映されない

5 投稿
3 ユーザー
6 Reactions
241 表示
あおい
(@aoi-coconala)
Active Member Registered
結合: 3年前
投稿: 5
Topic starter  

不具合・カスタマイズ対象ページのURL:
https://chiyuru-bannai.blog/5-dungeons-1/

相談内容:
特定のカテゴリだけにCSSカスタムを行うため、追加CSSで以下を追記しております。

.categoryid-1,
.categoryid-4,
.categoryid-5,
.categoryid-6,
.categoryid-8,
.categoryid-9
{
rt {
    color: #7d7d7d; 
}
p {
    letter-spacing: -0.05em; 
    text-align: justify;
}
.entry-title{
    display: none;
}

Windows11,iPhone15,Microsoft Surface Go3などでは問題なく追加CSSが反映されるのですが
iPad(第6世代)のSafari・Chromeともに、追加CSSが反映されません。

たとえば、
.entry-title{
    display: none;
}
などがきかず、以下のようにでてきてしまいます。
https://gyazo.com/0c790af4d2851af3d7ca0248de2f2713

カテゴリIDの指定をせずに
.entry-title{
    display: none;
}
だけをした場合は、問題なく追加CSSが反映されます。

 

ディベロッパーモードでiPadの出力を確認すると
.categoryid-4が出力されているようなので、原因が特定できず困っております。 https://gyazo.com/a0e983ac62c615563cf9b61f272ef526

不具合の発生手順:
https://chiyuru-bannai.blog/5-dungeons-1/
をiPad(第6世代)で表示する(SafariもしくはChrome最新版)

解決のために試したこと:

カテゴリIDの指定をせずに
.entry-title{
    display: none;
}
を記述→問題なく追加CSSの内容が反映された。

iPad(第6世代)だけというニッチな症状なのですが
他にも見落としがあるかもしれないと思い投稿いたしました。

 

お知恵をかしていただければ幸いです。


   
トピックタグ
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2930
 

●回答

CSSをネスト記述していますが、2023年頃の最近のブラウザからの対応だったと思います。
この為、古いブラウザは非対応の為、CSSエラーで反映されないのでは?

CSSのネスト記述を、止めてみて下さい。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2930
 

●補足

以下のように記述したら表示されるのでは?

https://notepad.pw/share/fViseT3okXZM7ezZN1TM

CSSネスト記述だと、以下のチェックでエラーとなり。

https://jigsaw.w3.org/css-validator/


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7945
 

ご参考に。

 
(「&」が必要なくなったのは、ごく最近な気がしますし、まだちょっと早いのかなという気はします)

   
あおい
(@aoi-coconala)
Active Member Registered
結合: 3年前
投稿: 5
Topic starter  

うわああ!!

記述完全に見落としておりました。

おっしゃるとおり記述を修正したら無事に表示できました。

ありがとうございます。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました