ページ内の一部を多言語において非表示にする

ページ内の特定部分は日本語のみで対象にする観点で「翻訳時には特定のエリアを表示させたくない(翻訳画面上では隠したい)」というニーズに対応する方法として、.data-hidden-ai-translate を設定することで特定のエリアを非表示(hidden)にすることができます。
 

実装手順

HTML要素へのクラス付与

非表示にしたい要素(テキスト・画像・リンクなど)のHTMLタグに、.data-hidden-ai-translate クラスを付与します。
例えば以下のように、divspan、あるいは p タグなど、任意の要素でOKです。
<div class="data-hidden-ai-translate"> ここは翻訳時に非表示にしたいエリアです。 </div>

実際の翻訳画面での確認

  • 実際にサイトを言語切り替えして表示し、.data-hidden-ai-translate を付与した部分が表示されなくなっているか確認します。
  • もし表示されてしまう場合は、翻訳エンジン側の設定やクラス名の指定方法に誤りがないかを見直してください。