サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-03-21 12:49
いつもお世話になっています。
頼まれて制作したWebサイトにて「m-sora」スキンを使用しておりますが、iOSで表示すると背景画像がスクロールされてしまいます。
そのため、記事が増えると背景画像が記事全体の長さに拡大されてしまい、背景がザラザラしたノイズとして表示されてしまいます。
配布元のサイトもiPhone6sのchromeとsafariにて同様に表示されております。
参考までに、制作したサイトはこちらです。
調べた結果、IEとiOSのバグで
background-attachment: fixed;
と
background-size: cover
を同時に使用した場合にbackground-attachment: fixed;が無効になるようです。
※参考 https://y-com.info/contents/?p=5941
参考元に記述されている「body:before」を使用する方法でバグ対策をしましたが、これだと背景画像を差し替えるにはcssを触るしかありません。
バグである以上、バグフィックスを待つしかないのですが…
これで対応するとcocoonやwordpressの編集画面から背景画像を簡単に差し替えることができないので、どうにかならないかなあとダメ元で投稿してみました。
（自分の検索の仕方ではこちらのフォーラムにてこういった事例の対策を見つけることができなかったこともあります）
（単に検索の仕方が悪かったのでしたら申し訳ありません）
Topic starter
2019-03-21 12:57
すみません、制作したサイトの方はすでに疑似要素を用いて背景画像が固定表示されるようにしています。
こちらがドメインを取得する前に仮で設置した物で、バグ対策をする前の、cocoonもスキンも導入したばかりの状態です。
2019-03-21 22:21
対策としては、以下のコードをm-soraのstyle.cssに追記するということでいいのでしょうか？
body::before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url("https://im-cocoon.net/wp-content/uploads/bg.jpg") center no-repeat;
background-size: auto;
background-size: cover;
}
僕は、iPhoneを持っていないので、ご確認いただければ幸いです。
もしそれで、問題が解決するようであれば、m-soraにコードを追加します。
2019-03-21 22:23
一応修正版もアップしておきました。
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
Topic starter
2019-03-26 17:31
早速対応頂いたのにお返事が遅くなり申し訳ありませんでした。
修正版で問題なくiPhoneでも背景が画面のサイズで固定されるようになりました。
ありがとうございました！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。