ホテルカードの画像がスマホ表示で住所テキストに被ってしまう
Quote from chimusawa on 2026年8月19日, 3:45 PMおせわになっております。
便利に使わせていただいております(開発ありがとうございます!)
スマホでの表示の時に、画像が大きくなり、住所のテキストが隠れてしまう件でご連絡いたしました。
【利用のサーバー・テーマ】
サーバー:エックスサーバー(Xserver)
テーマ:Xwrite(エックスライト)【スクリーンショット】
添付します【こうなるはずが、こうなってしまう、という状況の説明】
ホテリップで挿入したホテルカードについて、スマホで表示すると、画像が大きくなってしまい、下にあるホテル名・住所・地図ボタンなどのテキストに被って(重なって)表示されてしまいます。
PC表示では正常に見えているのですが、スマホ表示のみでこの崩れが発生しています。【試したこと】
・ホテリップ以外のプラグインを一時的に無効化しても同じ症状が出るか確認済みです
お手数をおかけしますが、ご確認いただけますと幸いです。よろしくお願いいたします。
@miya0001
おせわになっております。
便利に使わせていただいております(開発ありがとうございます!)
スマホでの表示の時に、画像が大きくなり、住所のテキストが隠れてしまう件でご連絡いたしました。
【利用のサーバー・テーマ】
サーバー:エックスサーバー(Xserver)
テーマ:Xwrite(エックスライト)
【スクリーンショット】
添付します
【こうなるはずが、こうなってしまう、という状況の説明】
ホテリップで挿入したホテルカードについて、スマホで表示すると、画像が大きくなってしまい、下にあるホテル名・住所・地図ボタンなどのテキストに被って(重なって)表示されてしまいます。
PC表示では正常に見えているのですが、スマホ表示のみでこの崩れが発生しています。
【試したこと】
・ホテリップ以外のプラグインを一時的に無効化しても同じ症状が出るか確認済みです
お手数をおかけしますが、ご確認いただけますと幸いです。よろしくお願いいたします。
Uploaded files:
Quote from みや on 2026年8月19日, 10:29 PM@chimusawa
いつもホテリップをご利用いただき、ありがとうございます。
また、詳しいご報告とスクリーンショットをお送りいただき助かりました。■ 想定される原因
いただいたスクリーンショットを拝見したところ、テーマ側のCSSがカード内の画像の高さを上書きし、画像が本来の枠からはみ出して下のテキストに重なっているものと考えられます。現在、プラグイン側で修正案を策定しております。次回以降のアップデートで順次対応いたしますので、少々お待ちいただけますと幸いです。
■ 恐れ入りますが、切り分けのためご協力のお願い
原因を確定させたく、可能でしたら以下をお送りいただけますでしょうか。1. 該当ページのURL
2. スマホ表示での開発者ツールの画面
(Chromeで該当ページを開く → F12 → スマホ表示に切り替え → 崩れている画像を右クリック「検証」 → 右側「Computed(計算済み)」の height の項目を開いた状態のスクリーンショット)2番が難しい場合は、1番のURLだけでも問題ありません。
■ 暫定の回避策
お急ぎでしたら、下記のCSSを「外観 → カスタマイズ → 追加CSS」に貼り付けていただくと、症状が解消するかと思います。アップデート後は削除していただいて構いません。@media screen and (max-width: 600px) {
body .hotelipp-card .hotelipp-image {
height: 200px !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
position: relative !important;
display: block !important;
}
body .hotelipp-card .hotelipp-image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
display: block !important;
}
}貼り付け後も改善しない場合は、その旨お知らせください。
引き続きよろしくお願いいたします。
いつもホテリップをご利用いただき、ありがとうございます。
また、詳しいご報告とスクリーンショットをお送りいただき助かりました。
■ 想定される原因
いただいたスクリーンショットを拝見したところ、テーマ側のCSSがカード内の画像の高さを上書きし、画像が本来の枠からはみ出して下のテキストに重なっているものと考えられます。
現在、プラグイン側で修正案を策定しております。次回以降のアップデートで順次対応いたしますので、少々お待ちいただけますと幸いです。
■ 恐れ入りますが、切り分けのためご協力のお願い
原因を確定させたく、可能でしたら以下をお送りいただけますでしょうか。
1. 該当ページのURL
2. スマホ表示での開発者ツールの画面
(Chromeで該当ページを開く → F12 → スマホ表示に切り替え → 崩れている画像を右クリック「検証」 → 右側「Computed(計算済み)」の height の項目を開いた状態のスクリーンショット)
2番が難しい場合は、1番のURLだけでも問題ありません。
■ 暫定の回避策
お急ぎでしたら、下記のCSSを「外観 → カスタマイズ → 追加CSS」に貼り付けていただくと、症状が解消するかと思います。アップデート後は削除していただいて構いません。
@media screen and (max-width: 600px) {
body .hotelipp-card .hotelipp-image {
height: 200px !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
position: relative !important;
display: block !important;
}
body .hotelipp-card .hotelipp-image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
display: block !important;
}
}
貼り付け後も改善しない場合は、その旨お知らせください。
引き続きよろしくお願いいたします。
Quote from chimusawa on 2026年8月20日, 9:06 AMご丁寧なご案内、ありがとうございます。
開発者ツールのスクリーンショットは撮影できましたので、添付いたします。次回以降のアップデートで順次対応していただけるとのことですので、アップデートを待ちたいと思います。
URLを非公開でお伝えしたいのですが、DMというのはTwitterのDMのことでしょうか?
お手数ですが、メールアドレスなど、URLを非公開でお送りできる方法を教えていただけますでしょうか。
どうぞよろしくお願いいたします。
ご丁寧なご案内、ありがとうございます。
開発者ツールのスクリーンショットは撮影できましたので、添付いたします。
次回以降のアップデートで順次対応していただけるとのことですので、アップデートを待ちたいと思います。
URLを非公開でお伝えしたいのですが、DMというのはTwitterのDMのことでしょうか?
お手数ですが、メールアドレスなど、URLを非公開でお送りできる方法を教えていただけますでしょうか。
どうぞよろしくお願いいたします。
