サポート・機能ガイド/Module / Plugin/言語バー設定
⚡ HTMLページ翻訳タグ🧩 Module / Plugin
🌐
言語バー設定
標準機能
訪問者が言語を切り替えるためのウィジェット(言語バー)の表示位置・色・オプションの表示/非表示などをカスタマイズできます。ブランドのデザインに合わせた見た目に調整してください。
1
機能概要

言語バー設定(Box Style Settings)では、画面上に表示される言語切り替えウィジェットの外観を細かくカスタマイズできます。設定は 言語バーウィジェットの歯車アイコン(1番目のアイコン) から開く専用パネルで行います。

設定できる項目は、ウィジェットの表示位置・位置オフセット・カラー・編集メニューの表示/非表示・言語オプションの表示/非表示です。


2
設定パネルを開く

言語バーウィジェットの 1番目のアイコン(⚙️ 歯車マーク) をクリックすると「Box Style Settings」パネルが開きます。

1番目:言語バー設定アイコン(歯車)

3
パネルの各部位

「Box Style Settings」パネルの全体構成と各設定項目の位置を確認してください。

A
表示位置(4方向)画面上のどの角にウィジェットを表示するか選択
B
Hide edit menu辞書登録・直接編集などの操作アイコンを非表示にする
C
Position オフセット角からの距離(X・Y方向)をピクセル単位で微調整
D
カラー設定(4項目)ウィジェット本体・文字・オプション枠・オプション文字の色を個別設定
E
Show options言語の選択肢一覧を常時展開表示にするかどうか
F
Save ボタン全ての設定変更を確定して保存する

4
表示位置の設定(Select the position)

4つのラジオボタンから、ウィジェットを画面のどの角に表示するかを選択します。選択中のボタンは青くハイライトされます。

Upper Left
Upper Right
Bottom Left
Bottom Right
ページ表示
エリア
4方向から選択
Upper Left — 左上
Upper Right — 右上
Bottom Left — 左下
Bottom Right — 右下(デフォルト)
💡
デフォルトは Bottom Right(右下) です。サイトのデザインや既存のボタン・チャットウィジェットなどと重ならない位置を選んでください。

5
位置オフセットの調整(Position)

選択した角からウィジェットをどれだけ内側にずらすかを、ピクセル単位で調整します。左側の数値がX軸(横方向)、右側の数値がY軸(縦方向)のオフセット量です。

操作パネル
Position :
-
60
+
-
20
+
X軸
(横)
Y軸
(縦)
Bottom Right 配置でのオフセット例
← X: 60px
Y: 20px ↑
English
X=60 は右端から60px内側、Y=20 は下端から20px上に配置
ボタン動作
- / +(左ペア)X軸方向(横)のオフセットを1pxずつ減少 / 増加させます。値が大きいほど選択した角から内側(中央側)に離れます。
- / +(右ペア)Y軸方向(縦)のオフセットを1pxずつ減少 / 増加させます。値が大きいほど選択した角から内側(中央側)に離れます。

6
カラーの設定(Select the color)

ウィジェットの色を4つの項目で個別にカスタマイズできます。各カラースウォッチをクリックするとカラーピッカーが開き、任意の色を選択できます。

ウィジェット表示例
通常表示
English
Show options ON 時
English
日本語
English ✓
한국어
Box(ボックス色)
ウィジェット本体(言語名が表示される部分)の背景色
Font(ボックス文字色)
ウィジェット本体に表示される言語名のテキスト色
Option(オプション背景色)
言語の選択肢一覧(ドロップダウン)の背景色
Font(オプション文字色)
言語の選択肢一覧に表示されるテキストの色
💡
見やすさを確認しながら設定を:Box の色と Font の色はコントラスト比が十分あるか確認してください。特にアクセシビリティの観点から、白背景には暗い文字色、濃い背景には明るい文字色を使用することを推奨します。

7
その他のオプション
オプション機能
Hide edit menu.
チェックを入れると、言語バーウィジェットから辞書登録・直接編集・翻訳禁止・画像置換の操作アイコンを非表示にします。訪問者に編集ツールを見せたくない場合や、本番公開時に使用します。
※ 管理者はロックを解除することでアイコンを表示できます。
Show options.
チェックを入れると、言語バーをクリックしなくても言語の選択肢一覧を常時展開した状態で表示します。チェックなしの場合はウィジェットをクリックしたときだけ選択肢が表示されます。
Hide edit menu:OFF(デフォルト)
歯車・辞書・編集などのアイコンが表示される
Hide edit menu:ON
言語名と鍵アイコンのみ表示。訪問者に操作アイコンが見えない

8
設定を保存する

すべての設定変更は、パネル下部の 「Save」ボタン をクリックして初めて確定・保存されます。

設定を変更したら…
Save
⚠️
Save を押さないと設定は保存されません。ポジションや色を変更した後、Save をクリックせずにパネルを閉じると、変更内容は破棄されます。設定変更後は必ず Save をクリックしてください。

9
Tips & 注意事項
💡
本番公開前に「Hide edit menu」をONに:編集作業が完了したら、訪問者に操作アイコンが見えないよう Hide edit menu にチェックを入れて Save してください。言語バーがすっきりとした見た目になります。
💡
他のウィジェットと重なる場合:チャットボットやクッキー同意バナーなど他のウィジェットと重なる場合は、Position のオフセット値を調整してずらしてください。チャットが右下にある場合は Bottom Left や Upper Right に変更するか、Y軸オフセットを大きくして上にずらします。
✅
設定は全言語ページに共通適用:言語バーのスタイル設定(位置・色など)は、英語・韓国語・中国語など全ての翻訳言語ページに共通して適用されます。言語ごとに別々のスタイルを設定することはできません。
🔒
鍵アイコンについて:言語バー右端の鍵アイコンは施錠・解錠を切り替えるボタンです。施錠状態では辞書登録・直接編集・翻訳禁止・画像置換・言語バー設定のすべての操作ができません。設定変更を行う際は必ず解錠状態で行ってください。