言語スイッチャーは、国際的なトラフィック向けの主要なナビゲーション要素です。MultiLipiはデュアルインターフェイスエディターを提供し、デスクトップとモバイルのビューポートでこの要素の動作と美学を個別に制御できます。
このガイドでは、〜の設定について説明します。 レイアウト, 配置、そして ブランドスタイリング MultiLipiコマンドセンター経由。
1. インターフェイスエディタへのアクセス
フロントエンド統合のカスタマイズを開始するには:
- 1に移動します MultiLipi ダッシュボード.
- 2開く 設定 左側のメニューから。
- 3選択 言語スイッチャー.
💡 プロのヒント: リアルタイムプレビューキャンバスを備えたスイッチエディタに入ります。上部のトグルを使用して切り替えます デスクトップ および モバイル デバイス全体での応答性を確保するためのビュー。
2. ステップ1：アーキテクチャ（配置）の選択
スイッチャーがDOM内でどのように動作するかを定義します。デプロイモードは2つあります。
モードA：フローティング（デフォルト）
動作: スイッチャーはコンテンツの上にホバーし、画面の特定（例：右下）の角に固定されます。
ユースケース: ウェブサイトの既存のレイアウトコードを変更せずに、すぐに表示させるのに最適です。
モードB：埋め込み（統合）
動作: スイッチャーは、定義した特定のHTML要素（例：ナビゲーションバーまたはフッター内）に挿入されます。
⚠️ フォールバックプロトコル
指定されたHTMLコンテナが特定のページで見つからない場合、MultiLipiの フォールバックロジック スイッチャーは自動的に「フローティングモード」にロールバックします。これにより、レイアウトが変更されても、ユーザーが言語選択から締め出されることはありません。
3. ステップ2：ビジュアルアイデンティティ（テンプレートと色）
ブランドのデザインシステムに合わせてスイッチャーを調整します。
テンプレート選択
サイトの美観に合わせるために、事前設定されたUIパターンのライブラリから選択してください:
パレット統合
組み込みのカラーピッカーまたは生のRGB値を使用して、ブランドガイドラインに合わせてデフォルトのスタイルをオーバーライドします。
- •背景色: ナビバーまたはボタンのスタイルを一致させます。
- •文字色: アクセシビリティのために高いコントラストを確保します（WCAG準拠）。
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がデプロイされているすべてのページで変更が即座に反映されます。ほとんどの設定で、キャッシュのクリアやページの更新は不要です。