キーワード検索結果のレイアウト崩れ

[piece]

バージョン1.7.2を使用していますがキーワード検索結果をパソコンで確認するとレイアウト崩れが発生しました。
3サイトほどWelcartを使用して運用してますが、全てレイアウト崩れが発生しています。
対処をお願いいたします。

• このトピックはnanbuが8年、 1ヶ月前に変更しました。

[ohnishi]

こんにちは
テーマは何をお使いでしょうか？

どうぞよろしくお願いします。

[piece]

テーマは「Welcart Default Theme」を使用しています。
よろしくお願いいたします。

[ohnishi]

レイアウト崩れが起きているページは、検索結果ページでよろしかったでしょうか？
また、どのようにレイアウトが崩れているか詳しくお聞かせいただけますか？

[piece]

そうです、検索結果ページになります。
URLパターンは以下のような形になります。
http://example.com/?s=xxx

その検索結果ページを見るとサムネイル画像の上にテキストが重なってしまっていたり、
商品タイトルも背景色やレイアウト調整無しのリンクのみとなっていて一部のcssが無効になっているようなレイアウトになっています。
よろしくお願いいたします。

[ohnishi]

検索結果ページのほう確認させていただきましたが、
そのような症状は出ておりません。

Welcart Default Theme ライブデモ

上記URLの検索結果ページがデフォルトのレイアウトになります。
どうぞよろしくお願いいたします。

[piece]

そうですか・・・
原因調査してみます、ありがとうございます。

[yasumax]

こんにちは。

usces_cart.cssが読み込まれているかどうかなど、ブラウザ付随の要素検証などで確かめてみてください。
また、管理画面「Welcart Shop」＞「システム設定」内の「usces_cart.cssの無効化」にチェックが入っていたりしませんか？
そこら辺を重点的に確認してみてください。

[piece]

ありがとうございます。
どこかのcssが有効になっていない可能性も含めて確認してみます。

[sekimotoweb]

同じような状況で困っています。
検索結果ページ等に表示される小さいサイズの画像の上？に商品詳細ページのサイズの画像が重なってしまっているような現象です。
それによってレイアウトが崩れているように見えテキストも画像の上に重なってしまいます。
最近ワードプレスとウェルカートのアップデートを行ったところこのようになりました。
解決策のご対応宜しくお願いいたします。
——————————————-
WordPress のバージョン： 4.5.2–ja
Welcart のバージョン：1.8.2
ご利用のテーマ：CYBERバージョン: 1.0.3
症状を確認したブラウザ：chrome　IE　safari
サーバー（会社名、サービス名）：エックスサーバー
SSLの利用：なし
WordPress のパーマリンク設定：/%category%/%postname%.html（基本の状態でも同様でした）
——————————————–

• この返信は7年、 11ヶ月前にsekimotowebが編集しました。

Attachments:

You must be logged in to view attached files.

[ohnishi]

こんにちは

お使いのテーマに以下のスタイルを追記してみてはいかがでしょうか？

img {
	max-width: 100%;
	height: auto;
}

どうぞよろしくお願いいたします。

[sekimotoweb]

ありがとうございます。

追加したところテキストが重なることがなくなりました。

ただ何か以前よりおかしいので添付画像のご確認とご教示お願いいたします。
（画像の後ろ側にNOIMG画像と思われるものがでてしまいサイズが合いません。）

Attachments:

You must be logged in to view attached files.

[sekimotoweb]

画像を入れていない商品はこんな形です。

Attachments:

You must be logged in to view attached files.

[ohnishi]

商品画像が表示されている部分に背景画像・背景色が指定されているみたいですので、
表示させないようスタイルの修正を行なう必要があります。

Google ChromeやFirefoxなどのブラウザに付属している要素検証を利用していただくと、
商品画像にどんなスタイルが効いているのかなどの確認ができますので、
その後、CSSの修正を行ってみてください。

どうぞよろしくお願いいたします。

[sekimotoweb]

ありがとうございます。
CSSの背景画像や背景色を一部削除することでひとまず解決しました。

以前と変わってしまった点は、商品画像を入れなかった場合、
NOIMG画像が表示されるようになっていたようなのですが、それが表示されなくなりました。
これはどうしようもないのでしょうか。

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿