画像置換機能

概要

画像置換機能を使うと、翻訳言語別に表示する画像を置換できます。
例えば、日本語の場合は日本語で書かれたバナー画像、英語の場合は英語で書かれたバナー画像といった設定ができます。

注意

プロジェクト設定の 自動コンテンツ取得機能自動画像取得機能 が ON になっている場合

同じパスの画像がサイト上の複数ページで使用されている場合、いずれかのページで置換した画像が他のページにも自動的に共有され、同じ画像が置換されます。
共有されるタイミングは、それぞれのページで レポート が送信されたときです。

目次

仕様

取得できる画像属性

  • img タグ
  • input タグ
  • srcset 画像

Base64 エンコードされた画像には対応していません。
pdf など、画像ファイルでないものは対象外です。リンク置換機能 で代替できます。

アップロードできる画像の拡張子

  • jpg
  • png
  • svg
  • webp

注意

SVG 形式以外の画像は、画像をアップロードして置換を設定すると、画像サイズが元画像のサイズにリサイズされます。

アップロード可能な画像のファイルサイズ

最大 5 MB までです。

画像の登録方法

元言語の画像を登録するには、手動で追加する方法と、自動で取得する方法があります。
元言語の画像を自動で取得するには、画像の自動取得機能 を ON にします。
置換したい多言語版の画像は、手動で登録する必要があります。

画像置換を設定する

  1. 対象のプロジェクトを選択し、ページリストに移動します。

  2. 対象のページを選択し、翻訳編集ページ に移動します。

  3. 翻訳編集ページの上部にある「画像」タブを選択し、画像置換の編集画面を表示します。
    画像の自動取得機能 が ON になっており、元言語の画像がすでに取得されている場合は、6 へ進みます。
    image-example.png

  4. 元言語の画像が表示されていない場合は、手動で登録します。
    「+画像」または「画像をアップロード」ボタンを押下します。

  5. 元言語の画像 URL を入力し「追加」ボタンを押下します。

    インフォメーション
    画像の URL がわからない場合、画像を右クリックし「画像アドレスをコピー」の値を貼り付けてください。
    :::
    mceclip5.png

  6. 画像を置換する翻訳言語を選択します。左側に元言語の画像が表示され、右側にアップロードした翻訳言語の画像が表示されます。

    なお、左側の画像はサイトにコード化されている画像を表示しているため、画像の編集はできません。

    image-lang.png


  7. 画面右側の「ドラッグ&ドロップ または クリックしてアップロード」を押下し、置換したい翻訳言語の画像を選択します。

    または、置換したい画像をドラッグ&ドロップして登録します。

    image-drag.png


  8. 翻訳言語の画像が右側に表示されます。

    設定内容をサイト上に公開する場合は「保存&公開」を、保存のみする場合は「保存」を押下します。

    image-hozonkoukai.png


  9. アップロードした翻訳言語の画像を削除したい場合は、画像右上の「×」アイコンを押下します。

    元言語の画像は削除できません。

    image-clear.png

information
インフォメーション
ライブ編集機能 でも画像置換の設定が可能です。
ライブ編集を起動し、ページ内の画像をクリックすることで、画像置換を設定できます。
image-live2.png
:::

画像置換の除外設定をする

置換した翻訳言語の画像を WOVN に保存しつつも、翻訳版サイト上では元言語の画像を表示したい場合は、画像の除外設定を行います。

  1. 「画像」タブで画像左側のチェックボックスにチェックを入れ、右下の「除外」ボタンを押下します。
    gazou-jogai1.png

  2. 下記のポップアップが表示されます。「除外」ボタンを押下します。
    gazou-jogai2.png

  3. 翻訳除外実施後の画像は、「翻訳除外」タブで確認できます。
    gazou-jogai3.png

  4. 除外された画像を再度「リンク済み」タブに戻し、サイト上に反映させたい場合は、画像にチェックを入れ、右下の「復元」ボタンを押下します。
    gazou-jogai4.png

  5. 下記のポップアップが表示されます。「復元」ボタンを押下します。
    gazou-jogai5.png