言語切り替え機能は国際線の主要なナビゲーション要素です。MultiLipiはデュアルインターフェースエディターを提供しており、デスクトップとモバイルのビューポートでこの要素の挙動や美観を独立して制御できます。
このガイドでは、の構成について説明します。 レイアウト , ポジショニング そして ブランドスタイリング マルチリピ指令センター経由。
1. インターフェースエディタへのアクセス
フロントエンド統合のカスタマイズを始めるには:
- 1 あなたの MultiLipiダッシュボード .
- 2 開けて 設定 左側のメニューから。
- 3 選ぶ 言語切り替え .
💡 プロのヒント: リアルタイムプレビューキャンバスを備えたSwitchエディターに入ります。上部のトグルを使って切り替えてください デスクトップ そして モビール デバイス間での応答性を確保するためのビュー。
2. ステップ1:アーキテクチャ(ポジショニング)の選択
DOM内でスイッチャーがどのように振る舞うかを定義してください。展開モードは2つあります:
モードA:フローティング(デフォルト)
行動: スイッチャーは画面の特定の隅(例:右下)に固定され、コンテンツの上にホバーします。
ユースケース: 既存のレイアウトコードを変更することなく、即時の可視性を得るのに最適です。
モードB:組み込み(統合)
行動: スイッチャーは、あなたが定義した特定のHTML要素(例:ナビゲーションバーやフッター内)に注入されます。
⚠️ フォールバックプロトコル
指定されたHTMLコンテナが特定のページで見つからない場合は、MultiLipiの フォールバックロジック これによりスイッチャーは自動的に「フローティングモード」に戻ります。これにより、レイアウトが変わってもユーザーが言語選択から締め出されることがなくなります。
3. ステップ2:ビジュアルアイデンティティ(テンプレートと色)
スイッチャーをブランドのデザインシステムに合わせて調整してください。
テンプレート選択
サイトの美学に合わせた事前設定済みのUIパターンライブラリからお選びください:
パレット統合
内蔵のカラーピッカーや生のRGB値を使って、ブランドガイドラインに合わせてデフォルトスタイルをオーバーライドできます:
- • 背景色: ナビバーやボタンのスタイルに合わせてください。
- • テキストカラー: アクセス性のために高いコントラスト(WCAG準拠)を確保しましょう。
4. ステップ3:高度なスタイリング(カスタムCSS)
ピクセル単位で完璧に制御が必要な開発者向けには、カスタムCSSルールをウィジェットのシャドウDOMに直接注入できます。
一般的なCSSセレクタ:
#dynamicDropdown- ドロップダウンリストのメインコンテナをターゲットにします。#lang-switcher-selected-lang .fi- 現在選択されている言語のフラグアイコンをターゲットにします。
例の構成:
/* Remove border radius for a sharp, square design */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Customize the dropdown background */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}💎 開発者注: カスタムCSSは、スイッチャーの機能的ロジックを維持しつつ、視覚的プロパティを上書きできます。これは複雑な設計システムのマッチングやダークモードのバリエーションの実装に特に有用です。
5. 展開と検証
設定が完了したら:
プレビュー
エディターでデスクトップモードとモバイルモードを切り替えて、視覚的な一貫性を確認してください。
セーブ
クリック セーブ ライブ制作現場に即座に変更をプッシュするために。
リセット
もし最初からやり直す必要があるなら、 リセット functionを使えば、デフォルトのMultiLipiスタイルに戻ることができます。
✅ 成功: あなたの言語切り替えツールが稼働中です!変更はMultiLipiが導入されているすべてのページに即座に伝播します。ほとんどの設定ではキャッシュクリアやページリフレッシュは不要です。