長い画像を自然にポップアップさせたい

Question

お世話になっております。
こちらの良くある質問を画像ポップアップして表示したい場合

宝石職人スマホリングのよくある質問▼
この長めの画像を文字をクリックしたら表示したいのですが、
100％幅で違和感なく画面に表示され、閉じたら戻れるようにしたと考えています。

その場合どのようにするべきでしょうか？
よろしくお願いいたします。###HR######IMG08547d73f1a10f2f4f3480b5a610d6d96.jpegIMG0###

Accepted Answer

ECマスターズの伊藤です。

> パソコンとスマホだとスマホの方を優先するのがいいとは思うのですが、
> この画像のようにあまりにパソコンで読みづらい大きさになることがあります。

画像だと、どうしても難しくなっていしまいますので、
PC、スマホ別々に作成いただくことになりますが、

いただいた画像のデザインであれば、
HTMLで作成するのがよろしいかと思います。

HTMLベースであれば、PC、スマホともに、
極端に読みづらいといったことが発生しませんし、
スクロールを行うこともできますので、
縦長のページになっても、問題ございません。

Answer

ECマスターズの伊藤です。

> この長めの画像を文字をクリックしたら表示したいのですが、
> 100％幅で違和感なく画面に表示され、閉じたら戻れるようにしたと考えています。

幅100%で表示、とのことですが、
スマホでの表示をご希望でしょうか。

それともPCでの表示をご希望でしょうか。

スマホの場合、長い画像ですと、表示しきれないため、
頂いた画像を貼り付けたページをご用意いただき、
そちらに誘導していただくのがよろしいかと思います。

その際、別タブで表示するには
a タグに target="_blank"
を追加してください。

宝石職人スマホリングのよくある質問▼

PCの場合、幅100％にすると、
かなり大きな画像となってしまうと思いますが、
こちらはどのようにお考えか、
ご確認いただければと思います。

Answer

伊藤さんありがとうございます。

放置していてごめんなさい。
こちらのやり方でやることができました。

> PCの場合、幅100％にすると、
> かなり大きな画像となってしまうと思いますが、
> こちらはどのようにお考えか、
> ご確認いただければと思います。

質問返しのようになってしまい申し訳ないです。私にはこの解決の考えがないのでアドバイスお願いしたいです。

パソコンとスマホだとスマホの方を優先するのがいいとは思うのですが、
この画像のようにあまりにパソコンで読みづらい大きさになることがあります。

画像では文字の大きさ変えられないので仕方ないと思うのですが、
画像内の文字でスマホとパソコン両方のページ商品説明に適し大きさや並びなどはありますでしょうか？スマホとパソコンを両方作るのは難しいのでスマホを重視して作りたいと思っているのですが、PCの見せ方も見やすくなる工夫やアドバイスあればお願いします。なるべくスマホ一つのページを作る工程でPCページも作りたいと思っています。

Answer

伊藤さんありがとうございます。

> いただいた画像のデザインであれば、
> HTMLで作成するのがよろしいかと思います。

やはり文章は HTMLベースが基本という感じですね。
ありがとうございました参考になりました。