このセクションの記事

翻訳対象言語別のコンテンツ出し分け方法

概要

翻訳対象言語ごとに、異なるコンテンツを表示することができます。
翻訳対象言語が日本語のときは日本人向けのコンテンツを表示したいが、英語のときは非表示にしたい、という場合に使用できる実装装方法です。

設定手順

1.HTML に下記のように記述します。

<span class="CHOOSE YOUR CLASS">content to </span>

2.CSS に下記のように記述します。

html:lang(LANGUAGE CODE) .CHOOSE YOUR CLASS {
    display: none;
}

インフォメーション
言語コードについては、言語別コンテンツ出し分け用言語コードリストをご参照ください。

記述例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>

CSS記述例

html:lang(en) .hide_if_en {
    display: none;
}

記述例2：

・日本語表示のときは「Hello」を非表示にする
・英語表示のときは「こんにちは」を非表示にする

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_ja">Hello</span>
        <span class="hide_if_en">こんにちは</span>
    </body>
 </html>

CSS記述例

html:lang(ja) .hide_if_ja {
    display: none;
}
html:lang(en) .hide_if_en {
    display: none;
}