ページ内の特定部分を日本語でのみ表示するために、「翻訳時には特定のエリアを表示させたくない（翻訳画面上では隠したい）」というニーズがある場合、HTMLのclass属性に data-hidden-ai-translate を追加することで特定のエリアを非表示（hidden）にできます。
実装手順
HTML要素へのクラス付与
非表示にしたい要素のHTMLタグに、data-hidden-ai-translate というクラス名を付けます。HTMLのclass属性には、先頭のドットを含めません。CSSセレクターとして記述するときは .data-hidden-ai-translate です。
例えば以下のように、
div や span、あるいは p タグなど、任意の要素に指定できます。<div class="data-hidden-ai-translate">
ここは翻訳時に非表示にしたいエリアです。
</div>
実際の翻訳画面での確認
- 実際にサイトの言語を切り替えて表示し、
.data-hidden-ai-translateを付与した部分が表示されなくなっているかを確認します。
- もし表示されてしまう場合は、class属性に先頭のドットが含まれていないか、表示言語や対象要素が正しいか確認してください。