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カスタマイズ依頼

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

カバーブロックの固定背景がAndroi...
 
共有:
通知
すべてクリア

カバーブロックの固定背景がAndroidしか反映されません

9 投稿
3 ユーザー
6 Reactions
566 表示
(@mikanringo)
Active Member Registered
結合: 1年前
投稿: 4
Topic starter  

不具合・カスタマイズ対象ページのURL: https://pilina-lp.allyshinkyu.com/

相談内容:

はじめて質問させていただきます

ヘッダーをカバーブロックで設定しているのですが
「ブロック」→「メディア設定」→「固定背景」
で、設定しても
反映されるのはモバイルのAndroidのみで
iPhone、iPad、PCでは反映されないのです

どのように対処すればいいのか
御指南いただけたら嬉しいです

不具合の発生手順:

解決のために試したこと:検索して解決方法を探してみましたが見つかりませんでした

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。

※高速化設定をしている場合は無効にしてください。
環境情報:

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

Cocoon環境に関する情報です。

----------------------------------------------
サイト名:pilina-lp
サイトURL: https://pilina-lp.allyshinkyu.com 
ホームURL: https://pilina-lp.allyshinkyu.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.3.1
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (iPad; CPU OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/116.0.5845.118 Mobile/15E148 Safari/604.1
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.3.4
カテゴリー数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:945バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2023/08/IMG_2960-e1691820744779.jpeg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam: Spam Protection 5.2
Edit Author Slug 1.8.4
Extendify 1.8.1
Regenerate Thumbnails 3.1.6
Search & Filter 1.2.16
SiteGuard WP Plugin 1.7.5
SNS Count Cache 1.1.3
Table of Contents Plus 2302
Wordfence Security 7.10.3
WP Fastest Cache 1.1.8
WP Multibyte Patch 2.9

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

mikanringoさん

投稿者:: @mikanringo

反映されるのはモバイルのAndroidのみで
iPhone、iPad、PCでは反映されないのです

上記のPCの「OSとブラウザ」を教えていただけますでしょうか。

もし、「MacOS + Safari」の場合は、MacOSでSafari以外のブラウザ(ChromeやFirefox等)で閲覧した場合は、どんな感じなのか、ご確認いただけますでしょうか。

 

ちなみに、私は「Windows10 + Chrome」ですが、以下のような感じです。

 
Windows10では、Edge・Firefoxでも、同様でした。
 
もしかすると、WebKit系のブラウザで発生しているのかもしれないです。

   
わいひら reacted
返信引用
(@mikanringo)
Active Member Registered
結合: 1年前
投稿: 4
Topic starter  

@mk2_mk2
はじめまして
さっそくのアドバイスありがとうございます。

PC上での「OSとブラウザ」を確認したところ
「Mac+Safari」「Mac+Chrome」どちらとも正常に動作していました

正常に動作してくれないのが、クライアントが所持しているiPhoneとタブレット(iPad)なので
改善できたら嬉しいです
このふたつは「Safari」も「Chrome」も反映してくれないです…

This post was modified 1年前 2回 by mikanringo

   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2845
 

仕様です。

●原因

2点あります。

  1. WordPressのCSS仕様で、PCで「視覚効果を減らす」設定の時、背景画像スクロールとしてあります。
    図参照、@media (prefers-reduced-motion: reduce)が定義されており。
  2. iOS、Safariでは、背景画像固定となりません。
    background-attachment: fixedが効かない

●ご参考

https://www.webcreatorbox.com/tech/prefers-reduced-motion

https://itokoba.com/archives/2375


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7833
 

mikanringoさん

「MacOS + Safari」では大丈夫なんですね。
(それはそれで・・・)

申し訳ないのですが、私のスマホはAndroidなもので、この事象が確認できないのです。

おそらく他の方(iOS系の確認ができる方)が、ご確認くださると思いますので、それをお待ちください。

 

iPadやiPhoneのSafariのバージョンが分かると良いと思います。

同じiPadやiPhoneでも、Safariのバージョンによっては、発生しないことも、他の事象ではありましたので。

 

【訂正】

まちがえてしまったので、追記は削除しました。


   
わいひら reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2845
 

●対策
追加CSSか、子テーマCSSに、以下を追加。
PCの設定に関係なく、強制的に、背景画像固定とする。

.wp-block-cover-image.has-parallax,
.wp-block-cover.has-parallax,
.wp-block-cover__image-background.has-parallax,
video.wp-block-cover__video-background.has-parallax {
  background-attachment: fixed!important;
}

>mk2さん

●ご参考
Cocoon機能のヘッダー画像、アピール画像の固定については、以前指摘し、マニュアルを修正してあります。

https://wp-cocoon.com/appeal-area-background-image-setting/


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7833
 

chu-yaさん

恐れ入ります。

言われてみれば、記憶にはあるのですけれど。
動作を実際に確認できないのがつらいところです。

ご対応いただき、ありがとうございます。


   
わいひら reacted
返信引用
(@mikanringo)
Active Member Registered
結合: 1年前
投稿: 4
Topic starter  

@chu-ya さま
はじめまして、詳細な原因と対策方法を、初心者のわたしにも分かりやすくご説明いただきありがとうございます
さっそくやってみたのですが

ファイルエディタからCSSを追加してみると、画像上部がおそらく拡大(?)された状態でスクロールされます
外観→カスタマイズからCSSを追加してみると変化なし
カバーブロック→高度な設定からCSSを追加してみると変化なしでした

やり方が何か間違っているのでしょうか?
引き続きご指南いただけましたら幸いです


   
返信引用
(@mikanringo)
Active Member Registered
結合: 1年前
投稿: 4
Topic starter  

@mk2_mk2 さま
こちらの所持していない媒体での動作具合を教えてくださって、反映されていない場所がどこかの確認が取れて、とても助かりました。ありがとうございました 😊


   
mk2 reacted
返信引用
共有:

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

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

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

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

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

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

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

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