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

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

モバイルでもアピールエリアを表示したい
 
共有:
通知
すべてクリア

[解決済] モバイルでもアピールエリアを表示したい

5 投稿
3 ユーザー
8 Reactions
2,478 表示
(@dogdog)
Active Member Registered
結合: 3年前
投稿: 6
Topic starter  

お世話になっております。

現状、PCのみアピールエリアを表示しているのですが、

モバイルでもアピールエリアを表示するように変更しようとしています。

以下のソースを書いて非表示にしているのですが、高さや横幅を指定して書いてもきれいに画像が収まりません。

CSSはどのように指定すればよいでしょうか。

 

サイトは、

https://shimatame.com/

です。

/* アピールエリア */
@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;} /画像の配置/

   
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1089
 

貼り付けていただいているCSSの下2行が間違っていて一部CSSが反映されていないようです。

「/画像の指定/」「/画像の配置/」と書かれていますが、コメントを書くのであれば「/*画像の指定*/」という風に囲う必要があります。

ここを直してもちゃんと表示されるわけではなさそうですが…。


試してはいないので意図通りに動くか分かりませんが、「Cocoon設定>アピールエリア>エリア画像」から背景画像を設定するのではいけませんか?

CSSで背景画像を設定した方が良い事情があるのでしょうか。


   
わいひら and dogdog reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、dogdogさん

グローバルメニューを「トップメニュー」にすると、ヘッダーの背景画像で画像を大きく表示することはできないんですね・・(以前からそうだったかな?)

 

以前のトピックで、ウィジェットエリアの「コンテンツ上部」に「画像」ウィジェットを2つ入れて、PCとモバイルで差し替える、というのをご案内させていただいたことがあるのですが、それが使えそうです。(アピールエリアは使わない方法なので非表示にしてください。)

 

「画像」ウィジェットに画像を設定する際は「フルサイズ」を指定してください。

 

[解決済] コンテンツ上部ウイジェットのモバイルとPCで出し分けする方法?
https://wp-cocoon.com/community/postid/39844/

 

コンテンツ上部と「トップメニュー」のグローバルメニューの間に隙間ができたら、以下のCSSのコードを追加してください。

.content-top {
  margin: 0;
}

なぜ、2枚の画像を出し分けるのかと言うと、現在お使いの猫ちゃんのイラストの画像だと、モバイル表示で、「しまちゃんのためになるエンタメブログ」の文字が小さくなって読みにくいからです。

 

モバイル用の別の画像をご用意ください。

 

This post was modified 3年前 7回 by リフィトリー

   
わいひら and dogdog reacted
(@dogdog)
Active Member Registered
結合: 3年前
投稿: 6
Topic starter  

@haruinoue さん

ご指摘ありがとうございます。

本当ですね…コメントできていなかった部分修正しました。

「Cocoon設定>アピールエリア>エリア画像」から設定したところどうしても画像が小さくなってしまい上手くできなかったためCSSで対応しておりました。私の設定方法の問題かもしれませんが・・・。

 


   
はる reacted
(@dogdog)
Active Member Registered
結合: 3年前
投稿: 6
Topic starter  

@leafytree さん

ありがとうございます。

ご紹介いただいた記事の方法で上手く設定することができました。

(スマホ画像はサクッと作ったものですが…)

 

「画像」ウィジェットを使う方法は頭に全くなかったのでお聞きしてよかったです!

とてもcocoonが気に入っているので今後もカスタマイズ等していきたいと思っています。

またどうしても分からないときはご質問させていただきます。すみませんがよろしくお願いします。

 


共有:

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

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

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

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

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

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

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

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