サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年2月23日 13:07
お世話になります。
いろいろとフォーラムなど見て、style.cssに記述してみたり、
.header {
background-size: contain;
}
iphonのキャッシュを削除してみたりしているのですが、
バージョンアップしてみたり、親テーマVersion: 2.2.7.2 小テーマVersion: 1.1.2
トップ画像の下がうまく表示できません。
コンテンツ幅850PXとサイド350PXにしているのですが、そもそも画像が大きすぎるのでしょうか？
質問に対して何か必要な情報はありますか？
2021年2月23日 13:45
atsushi.c さん
アピールエリアの背景画像の文字がスマホでは、小さくて読めない！ という場合は、現在設定している背景画像とアスペクト比が同じで、スマホでも読めるように文字を大きくた画像を、もう一枚作成して、以下のようにメディアクエリで画面幅によって、切り替わるようにしておけば良いかもしれません。
@media screen and (max-width:480px) {
.appeal {
background-image: url( https://スマホ用の画像のURLをここに書く);
}
}
This post was modified 4年前 3回 by リフィトリー
Topic starter
2021年2月23日 14:49
@leafytree こちらも一度試してみます。ありがとうございました。
少し質問なんですが、38.55の数値の意味を把握したいのですが、
画像サイズが1280x500なので、1280÷約320（スマホ画面）＝4 ×10＝40vw
で合ってますか？
#appeal {
height: 38.55vw;
max-height: 500px;
}
アピールエリア
高さ ： 38.５５ ビューポート width
最大 高さ：５００px
わいひら reacted
2021年2月23日 15:01
@atsushi-c さん
計算方法は、以下のとおりです。
（（背景画像の高さ ÷ （ 背景画像の幅 + ブラウザの縦スクロールバーの幅 ））× 100 ＝ height（vw）
((500 ÷ （1280+17)) × 100＝38.55
単純に横幅を100とした場合の高さを計算しているだけです。
なお、アピールエリアの背景画像が常に画面横幅いっぱいに表示されるサイトの場合は、max-height は不要です。
@atsushi-c さんのサイトの場合は、アピールエリアの横幅は、画面横幅いっぱいではなく、限定されているのでPCで画面幅を 1282px 以上に広げたときのために、max-height を指定しています。（アピールエリアの左右にも余白ができるため）
This post was modified 4年前 5回 by リフィトリー
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。