言語切り替えのバナー

説明

ここで説明されているのは、本プロジェクトで使用したバナーのコンポーネントのHTML構造です。

コンポーネントのルートである親要素「language-banner」の中にWebサイトで使用するぞれぞれのローケルのバナーを設置しています。

各バナーの中にはそのレイアウトとコンテンツを作る要素がありますが、その他には2つのボタンが入っています：「banner-button」と「banner-dismiss-link」。

全てのバナーの下にローケルリスト、テキストブロックとスクリプトを包む「banner-utility」の要素があります。中に入っている要素は機能的ですので、非表示にすることができます。

上記の説明の中に出てくる要素については以下で詳しく説明されています。

この構造はサンプルです。必ずこの構造を守る必要はありません。

説明

Webサイトで使用する全てのローケル（言語）に対してバナー要素を作成する必要があります。それぞれのバナーにそれに合うISOコードを使用した属性を設定してください。

ISOコードはWebflowのLocalization設定のパネルで確認できます。

設定後のバナーの属性は lang-banner="en" のようにWebflow設定で表示されます。

説明

それぞれのバナー内に自動的に提案するローケルに移動するボタンを設置してください。それぞれのボタンに属性を設定してください。

ISOコードは、親要素のバナーと同じにする必要があります。例えば、英語に移動するバナーを設置する場合、バナーの属性が lang-banner="en"になり、その中に入るボタンの属性が lang-button="en"になります。

説明

この属性は無視のボタンに設定してください。無視ボタンは同じページに複数あることも可能です。

無視ボタンをクリックすることでバナーが消える動作にする必要があります。 埋め込みコードの仕様によって、無視ボタンをクリックすることでSession Storageに情報を追加します。そうすることでブラウザのタブを閉じるまでにそのSessionの間にバナーを二度と表示しないようになっています。

説明

全てのバナーの下にLocales List要素を追加してください。

この属性はLocales List内にあるLinkに対して設定してください。

LInkの設定では、プラスのアイコンを押して、Visibilityを「Active」に設定してください。そのすると、Locales Listには現在のローケルの一つだけの要素が表示されます。

Linkの「Link」設定をCurrent Locale → Subdirectoryに設定してください。

Linkの「Text」設定をCurrent Locale → ISO Codeに設定してください。

説明

前のLocales Listの下にもう一つのLocales Listを追加してください。このリストには、Webサイトで使えるすべてのローケルが入ります。 Locales Listの中にあるLinkに対して属性を設定してください。

Linkの「Link」設定をLocale List Item → Subdirectoryに設定してください。

Linkの「Text」設定をLocale List Item → ISO Codeに設定してください。

説明

Locales Listの下にText Blockを追加してください。そのテキストとしてデフォルトとなるローケルのISOコード（例：「en」）を入力してください。 この要素に対して属性を設定してください。

デフォルトのローケルは、訪問者のブラウザで設定されている言語にマッチするWebサイトのローケルがない場合に移動先として提案されるローケルです。普段は英語となります。