ボタンが翻訳されません | AIシュリーマン | 自社サイトを簡単に多言語化

ボタンの実装方法によって、ラベルが翻訳対象にならない場合があります。

`<input>` の `value` はデフォルトで翻訳しない

次のように <input> の value 属性でボタンラベルを表示している場合、デフォルトでは翻訳対象になりません。


<input type="button" value="決定" />

value は、ボタンラベルだけでなく、フォームの送信値やユーザー入力として使われる場合があります。意図せずデータを書き換えることを避けるため、AIシュリーマンはデフォルトでinput valueの翻訳を無効にしています。

ラベルを翻訳したいボタンは、可能であれば <button> 要素で実装してください。


<!-- 変更前：デフォルトでは翻訳されない -->
<input type="button" value="決定" />

<!-- 変更後：テキストノードが翻訳される -->
<button type="button">決定</button>

<button> の開始タグと終了タグの間にあるテキストは、通常のテキストノードとして翻訳されます。

サイト単位でinput valueの翻訳を有効にすると、ブラウザで動作する translate.js が対象要素の value を翻訳できます。

この設定は、すべてのinput valueへ影響する可能性があります。次のような要素を含むサイトでは、事前検証が必要です。

input value翻訳オプションは、ブラウザスクリプト経路の設定です。SEOのWorker SSRで同じ属性翻訳が行われることを保証するものではありません。

設定をご希望の場合は、対象ページURL、対象要素のHTML、翻訳したいラベルを添えてサポートへお問い合わせください。

表示上のボタン名が aria-label に設定されている場合は、属性翻訳の対象になることがあります。


<button type="button" aria-label="メニューを開く">
  <svg aria-hidden="true"><!-- アイコン --></svg>
</button>

placeholder も翻訳対象ですが、ユーザー入力そのものは翻訳しません。

ボタンが翻訳されない場合は、開発者ツールで対象要素を確認してください。

対象要素のHTMLとページURLを添えてお問い合わせいただくと、適切な実装方法をご案内できます。