言語スイッチャーは、国際的なトラフィック向けの主要なナビゲーション要素です。MultiLipiはデュアルインターフェイスエディターを提供し、デスクトップとモバイルのビューポートでこの要素の動作と美学を個別に制御できます。
このガイドでは、〜の設定について説明します。 レイアウト, 配置、そして ブランドスタイリング MultiLipiコマンドセンター経由。
1. インターフェイスエディタへのアクセス
フロントエンド統合のカスタマイズを開始するには:
- 1に移動します MultiLipi ダッシュボード.
- 2開く 設定 左側のメニューから。
- 3選択 言語スイッチャー.
💡 プロのヒント: リアルタイムプレビューキャンバスを備えたスイッチエディタに入ります。上部のトグルを使用して切り替えます デスクトップ および モバイル デバイス全体での応答性を確保するためのビュー。
2. ステップ1：アーキテクチャ（配置）の選択
スイッチャーがDOM内でどのように動作するかを定義します。デプロイモードは2つあります。
モードA：フローティング（デフォルト）
動作: スイッチャーはコンテンツの上にホバーし、画面の特定（例：右下）の角に固定されます。
ユースケース: ウェブサイトの既存のレイアウトコードを変更せずに、すぐに表示させるのに最適です。
モードB：埋め込み（統合）
動作: スイッチャーは、定義した特定のHTML要素（例：ナビゲーションバーまたはフッター内）に挿入されます。
⚠️ フォールバックプロトコル
指定されたHTMLコンテナが特定のページで見つからない場合、MultiLipiの フォールバックロジック スイッチャーは自動的に「フローティングモード」にロールバックします。これにより、レイアウトが変更されても、ユーザーが言語選択から締め出されることはありません。
3. ステップ2：ビジュアルアイデンティティ（テンプレートと色）
ブランドのデザインシステムに合わせてスイッチャーを調整します。
テンプレート選択
サイトの美観に合わせるために、事前設定されたUIパターンのライブラリから選択してください:
パレット統合
組み込みのカラーピッカーまたは生のRGB値を使用して、ブランドガイドラインに合わせてデフォルトのスタイルをオーバーライドします。
- •背景色: ナビバーまたはボタンのスタイルを一致させます。
- •文字色: アクセシビリティのために高いコントラストを確保します（WCAG準拠）。
- •ホバー背景色: ユーザーがドロップダウン内の言語オプションにカーソルを合わせたときのハイライト色を設定し、即座に視覚的フィードバックを提供します。
✨ インタラクティブなホバー効果の設定
インタラクティブなホバー状態を追加することで、言語スイッチャーにプレミアムでネイティブな感触を与えます。
- 1Under the 視覚的スタイリング タブで、新たに追加された ホバー背景色 フィールド。
- 2をクリックしてカラーピッカーを開くか、ブランドガイドラインに一致する正確な RGB/RGBA 値を手動で入力します。
- 3この色は、ユーザーがドロップダウン内の言語オプションにカーソルを合わせるたびに動的に表示され、即座に視覚的フィードバックを提供します。
表示オプション: 言語切り替え順序
アルファベット順のリストに妥協する必要はもうありません。主要なターゲット市場に基づいて、ドロップダウン内の特定の言語に優先順位を付けられるようになりました。
言語切り替え順序を設定する
- 1までスクロールします 言語切り替え順序 セクションは、左側のスイッチャーエディターサイドバーにあります。
- 2アクティブなすべてのターゲット言語のブロックリストが表示されます（例：
EN,アルゼンチン,フィリピン,FR). - 3クリック 上 (↑) および 下 (↓) 各言語ブロックの横にある矢印を使用して、表示優先度を並べ替えます。
- 4このリストの 最上部 に配置された言語が、ユーザーがドロップダウンメニューを開いたときに最初に表示されます。
💡 プロのヒント: 最もトラフィックの多い言語を一番上に固定します。たとえば、国際的な訪問者のほとんどがドイツからの場合、 DE を最初に配置すると、切り替えに必要なクリック数が減り、UXが向上し、翻訳されたページの直帰率が低下します。
4. ステップ3：高度なスタイリング（カスタムCSS）
ピクセルパーフェクトな制御が必要な開発者は、ウィジェットのシャドウDOMにカスタムCSSルールを直接挿入できます。
一般的なCSSセレクター：
#dynamicDropdown- ドロップダウンリストのメインコンテナを対象とします。#lang-switcher-selected-lang .fi- 現在選択されている言語のフラグアイコンを対象とします。
設定例:
/* シャープでスクエアなデザインのために境界線の半径を削除 */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* ドロップダウンの背景をカスタマイズ */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}💎 開発者向け注記: カスタムCSSを使用すると、スイッチャーの機能ロジックを維持しながら、あらゆる視覚プロパティをオーバーライドできます。これは、複雑なデザインシステムに合わせたり、ダークモードのバリエーションを実装したりする場合に特に役立ちます。
5. デプロイと検証
設定が完了したら:
プレビュー
エディターでデスクトップモードとモバイルモードを切り替えて、視覚的な一貫性を確認します。
保存
クリック 保存 変更をライブのプロダクションサイトに即座にプッシュします。
リセット
最初からやり直す必要がある場合は、 リセット デフォルトのMultiLipiスタイルに戻す関数。
✅ 成功: 言語スイッチャーがライブになりました！MultiLipiがデプロイされているすべてのページで変更が即座に反映されます。ほとんどの設定で、キャッシュのクリアやページの更新は不要です。