概要
WOVN の画像置換は、置換元画像の URL を参照して置換する仕様となっています。例えば、スマートフォンやタブレット等デバイスによって表示する画像を変える対応(レスポンシブデザイン対応)をしている場合、各画像に対して置換設定が必要となります。
下記手順に従って、設定を行ってください。
インフォメーション
上記に該当する場合の画像置換登録は、WOVN 管理画面でのみ対応できます。
ライブ編集機能による画像置換では対応できません。
1. 画像の URL を確認する
1. 対象ページにアクセスし、F12 キーを押下してブラウザの検証ツールを開きます。
赤枠のボタン(要素の検索)を押下します。
2. 画像コンテンツをクリックすると、
右側のコンソール画面に画像を表示するための HTML 情報が表示されます。
HTML 情報の中から、srcset 属性に付与されている画面サイズごとの画像 URL を探し、
画像の URL を取得します。
インフォメーション
img、source タグに srcset 属性が定義されている場合、
デバイスの画面サイズや解像度に応じて表示する画像が制御されています。
2. 画像置換設定を行う
1. 各画像毎に、WOVN で画像置換登録を行います。
前項で取得した画像 URL を、画像の置換元として設定してください。
例.
画面幅 | 置換元 | 置換先 |
1200px | wovn_1200_bf.png | 画像幅 1200px の英語版画像: wovn_1200_af.png |
800px | wovn_800_bf.png | 画像幅 800px の英語版画像: wovn_800_af.png |
400px | wovn_400_bf.png | 画像幅 400px の英語版画像: wovn_400_af.png |
登録方法の詳細は、画像置換機能を参照してください。