Q.編集機能でHTMLを直接を設定することはできますか？

#A.

#HTMLタグを直接入力・編集することはできません。

編集機能では、元のHTML構造を保ったまま、テキスト部分のみを編集する仕組みになっています。

---

#編集画面の仕組み

Autolingualは、HTMLタグで区切られた「翻訳ユニット」単位で翻訳を管理しています。 編集画面では、この翻訳ユニットに含まれるHTMLタグが編集できない部品として固定表示され、テキスト部分のみを入力欄として編集できます。

例えば、元のHTMLが以下のような構造の場合、

<p>詳しくは<strong>こちら</strong>をご覧ください</p>

編集画面では「詳しくは」「こちら」「をご覧ください」の3つのテキスト部分をそれぞれ編集でき、<strong> タグの位置や構造は自動的に維持されます。

---

#この仕様の理由

表示崩れを防ぐため

HTMLを自由に編集できるようにすると、タグの閉じ忘れや構造の誤りによって、サイトのレイアウトが崩れる可能性があります。 編集の結果としてページ全体の表示が壊れることを防ぐため、構造は変更できない設計としています。

セキュリティ上の理由

翻訳内容はサイト訪問者の画面に表示されるため、任意のHTMLやJavaScriptを埋め込める仕様は、セキュリティ上のリスクとなります。 入力されたテキストは、HTMLとして解釈されないよう適切に処理したうえで表示しています。

---

#編集機能でできること

HTMLの直接編集はできませんが、以下の調整は編集機能から行えます。

各種編集機能はこちらのリンクを参照ください。（【プロジェクト画面】2-3-1.プレビュー / 編集 【プロジェクト画面】2-3-2.ライブモード（ライブプレビュー/ライブ編集機能） ）

---

#HTML構造そのものを変更したい場合

言語によってHTML構造自体を変えたい場合（要素の追加、順序の変更など）は、編集機能ではなくサイト側での実装が必要です。

SDKが提供するJavaScript APIを使って現在の表示言語を取得できますので、言語に応じた出し分けをサイト側で実装いただけます。

window.addEventListener("autolingual:ready", function () {
  var lang= window.Autolingual.getCurrentLanguage();
  // lang.languageCode に応じた処理を実装
});

また、CSSによる調整をご希望の場合は、カスタムCSS機能（Lite / Businessプラン）で言語ごとにスタイルを適用できます。 ご参考）【プロジェクト画面】2-3.(補足)CSS編集

ご要望の内容によって最適な方法が異なりますので、実現したい表示についてサポートまでご相談ください。

---