サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2022年3月19日 13:58
対象サイト： コース (esthe-kirara.link)
このページの1番上の画像のみですが、マウスオーバー時に画像が明るくなるようにしてみました。
ですが、PCで見ると丁度いいサイズなのにスマホで見ると大きすぎて横に飛び出てしまいます。
使用したHYMLとCSSは以下のものです。
HTML
https://notepad.pw/share/gtbf3upj4
CSS
https://notepad.pw/share/gtbf3upj4
どのようにしたらスマホでもPCでも丁度いいサイズにできますでしょうか。
また、これをいじる以外に別のHTMLやCSSはありますでしょうか。
教えていただけると幸いです。
よろしくお願いいたします。
このトピックは3年前からkarenに変更されました
2022年3月19日 14:54
karenさん
スマホからなもので、確認が難しいのですが。
2箇所以下のようにあり、大きさを固定なさっているように思います。
width: 1024px; height: 341px;
わいひら reacted
トピックスターター 2022年3月19日 20:18
2022年3月19日 20:35
@karen さん
「フォーラムを再読み込みとはどういったことでしょうか？」こちらは一旦書き込んでからコードを少し修正したので、ブラウザで再読み込みしてください、ということでした。
こちら、固定ページの画像サイズを変えても小さく画質の荒いままになってしまい、CSSの数値を変えたところ綺麗に大きくなってくれたのです…
スマートフォンの表示に対応させるには、いわゆるレスポンシブ表示になっていないとうまく表示されません。
画像のimgタグや画像を囲っているコンテナ（外側の入れ物）の横幅と縦幅を固定してしまうと、小さな画面で見たときに、画面からはみ出してしまいます。mk2さんがおっしゃっているのはそのことです。画像や画像のコンテナのサイズを固定してしまったら、小さな画面でははみ出してしまうのは、当然のことでしょう、という意味です。
一度、ご自身でお書きになったCSSのコードは、どこかにバックアップしておき、一旦消して、以下のコードを設定してみてください。
.image_mouseover_2 a:hover {
opacity: 0.6;
transition: .3s;
}
この投稿は3年前 2回ずつリフィトリーに変更されました
2022年3月19日 21:21
リフィトリーさんが詳しくご説明くださいましたし、対策もご提示くださっていますし、私からは・・・ですが。
リフィトリーさんの動画が分かりやすいと思います。
ちなみに現状は、大きさを固定していますので、以下のように画面幅（ブラウザの幅）が小さくなっても、画像の大きさが変わらない状態です。
これがモバイル端末など画面幅が狭い端末では、はみ出すということかと思います。
わいひら reacted
トピックスターター 2022年3月19日 22:01
リフィトリー様
ありがとうございます。
CSSを教えていただいたものに書き換えたら、スマホのほうもサイズが丁度よくなりました！
ただ、ここにリンクが貼ってありますよ～と分かるようにするにはどうしたらいいのでしょうか。
２カラムも以前試してみたのですが、やはりスマホで見ると崩れてしまい、画像と右側の文章まとめて一つにURLを貼るのが理想なのです。
2022年3月19日 22:08
@karen さん
パソコンではマウスポインタを画像に乗せると、画像が淡く表示されるので、リンクがあるのかな？と理解しやすいですが、スマホでは、ボタンのようなものを設定しないと、リンクなのかわかりにくいかもしれませんね。
私にもすぐに妙案は浮かびません。
ご自身で、いろいろ試してみてください。
トピックスターター 2022年3月19日 22:10
リフィトリー様
やはりそうですよね
ありがとうございます！
ちなみに、最後にお聞きしたいのですが、先ほどのCSSを書き換えたところ、ホバー効果がなくなってしまったのですが、HTMLの書き換えなどはどうしたらいいのでしょうか。
ワードプレス初心者で、無知ですみません…
2022年3月19日 22:42
と、修正いただくとイケるかと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。