ウェブパーソナライズで出力する画像を画面サイズによって変更する方法 | Community
Skip to main content
fukutaro_kawaka
November 11, 2019

ウェブパーソナライズで出力する画像を画面サイズによって変更する方法

  • November 11, 2019
  • 1 reply
  • 100 views

お世話になっております、JBS川上と申します。

ウェブパーソナライズ機能(RTP)で出力する画像を、画面サイズによって変更したいと考えております。
具体的には以下が実施したい内容です。
・モバイル(768px)の場合はAの画像
・モバイル以上の場合はBの画像

CSSによる制御をページ毎に行うのはメンテナンス性に欠けますので、その他の方法で出来たらと思いご質問させて頂きました。

もし方法をご存知であればぜひご教授頂けますと幸いです。
どうぞよろしくお願いいたします。

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Shintaro_Toh
Adobe Employee
Adobe Employee
November 11, 2019

@fukutaro kawakami‌さま

ご質問ありがとうございます。Adobeコンサルタントの棟と申します。

CSSかJSで実装ということになるかと思います。

一番シンプルなのはCSSのメディアクエリで制御するのがよろしいかと思います。

※JSでの制御でもメンテナンス性はそこまで変わらないかと思います。

<style>
.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
</style>


<img class="pc" src="http://XXXXX.com/pc.png" alt="PC用の画像" width="150" height="100">
<img class="sp" src="http://XXXXX.com/sp.png" alt="スマートフォン用の画像" width="150" height="100">
‍‍‍‍‍‍‍‍‍‍‍

CSSだとメンテナンス性に欠けるとのことですが、

上記だと問題ありそうであれば、コメントください。

よろしくお願いいたします。

Shintaro Toh
fukutaro_kawaka
November 12, 2019

棟さま

早速のご返答ありがとうございます。

サンプルコードまで丁寧に連携くださり助かります。

 

Webパーソナライズ機能の中で設定が閉じること(HTMLのみなど)が出来れば、CSSへの変更が発生しないため煩雑にならないと思った次第でした。メディアクエリを利用しても出来ることを確認し、こちらで進めようと思います。