概要
翻訳対象言語ごとに、異なるコンテンツを表示することができます。
翻訳対象言語が日本語のときは日本人向けのコンテンツを表示したいが、英語のときは非表示にしたい、という場合に使用できる実装装方法です。
設定手順
1.CSS に下記のように記述します。
```css
html[lang=LANGUAGE CODE].CHOOSE YOUR CLASS {
display: none;
}
```
2.HTML に下記のように記述します。
```html
<span class="CHOOSE YOUR CLASS">content to </span>
```
インフォメーション
言語コードについては、言語別コンテンツ出し分け用言語コードリストをご参照ください。
記述例1：
・日本語のときは「日本語のときだけ表示するコンテンツ」を表示する
・英語のときは「日本語のときだけ表示するコンテンツ」を表示しない
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Switch content by selected language</title>
<script src="//j.wovn.io/1" data-wovnio="key=YOUR_WOVN_TOKEN" async></script>
</head>
<body>
<span class="hide_if_en">日本語のときだけ表示するコンテンツ</span>
</body>
</html>
```
記述例2：
・日本語のときは「Displayed only in English」を非表示にする
・英語のときは「日本語のときだけ表示」を非表示にする
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Switch content by selected language</title>
<script src="//j.wovn.io/1" data-wovnio="key=YOUR_WOVN_TOKEN" async></script>
<style>
html[lang=ja] .hide_if_ja {
display: none;
}
html[lang=en] .hide_if_en {
display: none;
}
</style>
</head>
<body>
<span class="hide_if_ja">Displayed only in English</span>
<span class="hide_if_en">日本語のときだけ表示</span>
</body>
</html>
```