サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2022年4月16日 03:44
お世話になっております。
現状、PCのみアピールエリアを表示しているのですが、
モバイルでもアピールエリアを表示するように変更しようとしています。
以下のソースを書いて非表示にしているのですが、高さや横幅を指定して書いてもきれいに画像が収まりません。
CSSはどのように指定すればよいでしょうか。
サイトは、
です。
/* アピールエリア */
@media screen and (max-width: 769px) {
div.appeal-in {
display: none;
}
}
.appeal-content {
display: none;
}
#appeal-in {background-image: url("http://shimatame.com/wp-content/uploads/2022/03/2748ff55257c841348f94cbd06d03757.png"); /画像の指定/
background-repeat: no-repeat;background-position:center;} /画像の配置/
2022年4月16日 10:46
前略、dogdogさん
グローバルメニューを「トップメニュー」にすると、ヘッダーの背景画像で画像を大きく表示することはできないんですね・・（以前からそうだったかな？）
以前のトピックで、ウィジェットエリアの「コンテンツ上部」に「画像」ウィジェットを２つ入れて、PCとモバイルで差し替える、というのをご案内させていただいたことがあるのですが、それが使えそうです。（アピールエリアは使わない方法なので非表示にしてください。）
「画像」ウィジェットに画像を設定する際は「フルサイズ」を指定してください。
[解決済] コンテンツ上部ウイジェットのモバイルとPCで出し分けする方法？
https://wp-cocoon.com/community/postid/39844/
コンテンツ上部と「トップメニュー」のグローバルメニューの間に隙間ができたら、以下のCSSのコードを追加してください。
.content-top {
margin: 0;
}
なぜ、2枚の画像を出し分けるのかと言うと、現在お使いの猫ちゃんのイラストの画像だと、モバイル表示で、「しまちゃんのためになるエンタメブログ」の文字が小さくなって読みにくいからです。
モバイル用の別の画像をご用意ください。
この投稿は3年前 7回ずつリフィトリーに変更されました
トピックスターター 2022年4月16日 17:14
@haruinoue さん
ご指摘ありがとうございます。
本当ですね…コメントできていなかった部分修正しました。
「Cocoon設定>アピールエリア>エリア画像」から設定したところどうしても画像が小さくなってしまい上手くできなかったためCSSで対応しておりました。私の設定方法の問題かもしれませんが・・・。
はる reacted
トピックスターター 2022年4月16日 17:17
@leafytree さん
ありがとうございます。
ご紹介いただいた記事の方法で上手く設定することができました。
（スマホ画像はサクッと作ったものですが…）
「画像」ウィジェットを使う方法は頭に全くなかったのでお聞きしてよかったです！
とてもcocoonが気に入っているので今後もカスタマイズ等していきたいと思っています。
またどうしても分からないときはご質問させていただきます。すみませんがよろしくお願いします。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。