2. レイアウトの修正と翻訳言語に応じたコンテンツの出し分けを行う

翻訳が完了したら、必要に応じてレイアウトの修正とコンテンツ出し分け作業を行います。

翻訳する言語によっては、文字数の影響により、翻訳後の Web サイトデザインが崩れることも多々あります。
また、特定の言語に切り替えているときには表示させたくないコンテンツがあったり、その逆のケースもあったりします。

目次

レイアウトを修正する

WOVN でレイアウト修正を行うには、2 つの方法があります。
なお当社では、「言語切替後に有効になる CSS を記述する」パターンを推奨しています。
Web サイトのスタイルや挙動への影響を最小限に抑えられるためです。

言語切替後に有効になる CSS を記述する

文字サイズの変更だけでは対応できない場合、テキストが配置されたブロックサイズを大きくしたり、余白を変更したりするなど、CSS の記述を言語ごとに上書きすることができます。

CSS ファイルを用意し、Web サイトで読み込ませる(推奨)

お客様サイト側で CSS ファイルを用意することで、表示言語に応じてスタイルを切り替えることができます。
詳細は 翻訳言語別のコンテンツ出し分け方法 を参照してください。

CSS カスタマイズ機能を使って WOVN 管理画面から行う

WOVN の CSS カスタマイズ機能を使い、管理画面上で、表示言語に応じてスタイルを切り替えることができます。
詳細は CSS カスタマイズ機能 を参照してください。

ライブ編集で文字サイズを変更する

ライブ編集機能を使って文字サイズを変更できます。
詳しくは、ライブ編集の使い方 > 文字サイズを変更する を参照してください。

言語ごとにコンテンツを出し分ける

英語のときにだけ特定のバナーを表示させるなど、CSS を使ってコンテンツの出し分けをすることもできます。詳しくは、翻訳言語別のコンテンツ出し分け方法 を参照してください。

インフォメーション
新たに HTML を生成する必要があるものは、JavaScript を使って制御します。
WOVN が提供する JavaScript 関数 を使い、言語切替イベントを受け取ってコンテンツを出し分けすることができます。