MultiLipiは、すぐに始められる20以上の組み込み言語切り替えテンプレートを提供しています。しかし、言語トグルをブランド独自の美学に完全に一致させたい場合は、当社の カスタムCSS デフォルトのスタイルを上書きする機能。
スイッチャーエディターで、単にクリックします CSSを編集 画面上部のボタンをクリックし、コードを貼り付けます。
インスピレーションを得るために、私たちのデザインチームが作成しました 5つのプレミアムCSSテンプレート. 以下のコードスニペットをコピーして、カスタムCSSエディタに貼り付けるだけです！
カスタムCSSとは何か、そしてなぜそれを使用すべきか？
CSS（Cascading Style Sheets）は、ウェブサイトの外観を制御するデザイン言語です。ウェブサイトの「メイクアップと服」と考えてください。カスタムCSSを使用すると、複雑なコードに触れることなく、色、形状、アニメーション、影などを変更できます。
ブランドの一貫性
正確なブランドカラー、フォント、スタイルガイドに合わせる
目立つ
競合他社との差別化を図るユニークなデザインを作成する
開発者不要
すぐに使えるコードをコピー＆ペースト—コーディングスキルは不要
SEOフレンドリー
すべてのデザインはパフォーマンスとアクセシビリティのために最適化されています
これらのデザインの適用方法（ステップバイステップ）
言語切り替えボタンエディタを開く
MultiLipiダッシュボードにログインし、言語スイッチャーの設定に移動します。
「 CSSを編集」ボタンをクリックする
スイッチャーエディターインターフェースの上部にあるカスタムCSSボタンを探します。
選択したデザインをコピーする
下のデザインテンプレートまでスクロールし、お気に入りのスタイルの「コードをコピー」ボタンをクリックします。
コードを貼り付ける
コピーしたCSSコードをカスタムCSSエディタパネルに貼り付けます。
カスタマイズ (オプション)
色、サイズ、フォントをブランドに合わせて調整します。一般的なカスタマイズについては、以下で説明します。
保存してプレビュー
「変更を保存」をクリックして、ウェブサイトで言語切り替えボタンをライブプレビューしましょう！
5つのプレミアムデザインテンプレート
「コードをコピー」をクリックして、CSSをすぐに取得します。これらのスニペットはデフォルトの .ml-switcher-container および .ml-switcher-btn クラス。
1. 「エンタープライズピル」
雰囲気: 信頼を構築するために設計された、情報が豊富でクラシックなドロップダウン トリガーです。クリーンな境界線、ソフトな影、微妙なホバー インタラクションを使用して、堅牢でプロフェッショナルな印象を与えます。
✨ 最適: コーポレートサイト、B2B SaaS、金融、ヘルスケア
/* メインのトグルボタンのスタイル */
.ml-switcher-container {
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 8px 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.ml-switcher-container:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
border-color: #cbd5e1 !important;
}
/* ドロップダウンメニューのスタイル */
.ml-switcher-dropdown {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 6px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
/* 個々の言語項目のスタイル */
.ml-switcher-dropdown-item {
border-radius: 8px !important;
color: #475569 !important;
font-family: 'Inter', sans-serif !important;
transition: background 0.2s, color 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: #f8fafc !important;
color: #0f172a !important;
}2. 「編集テキスト」インライン
雰囲気: エレガントなセリフ体タイポグラフィと境界線ゼロを使用したミニマリストでテキスト中心のデザイン。サイトの美観を損なうことなくインタラクティビティを示すために、穏やかなアニメーションの下線に依存しています。
✨ 最適: ハイファッション、ラグジュアリーブランド、エディトリアルマガジン、ブティックポートフォリオ
/* すべての背景コンテナを削除 */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* テキストボタンのスタイル */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* くすんだグレー */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* アニメーションの下線 */
.ml-switcher-btn::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000 !important;
transition: width 0.3s ease-in-out !important;
}
.ml-switcher-btn:hover {
color: #000000 !important;
}
.ml-switcher-btn:hover::after {
width: 100% !important;
}3. 「ダイナミックアイランド」
雰囲気: モバイルファーストのデザインで、トグルを洗練されたピル型にスタイリングし、アクティブな言語をソフトな青色の背景モーフィング効果で強調します。
✨ 最適: モダンなテクノロジー企業、消費者向けアプリ、ミニマリストなランディングページ
/* メインコンテナラッパーのスタイル設定 */
.ml-switcher-container {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50px !important;
padding: 4px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* 個々のピルボタンのスタイル設定 */
.ml-switcher-btn {
color: #64748b !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 50px !important;
transition: all 0.2s !important;
}
.ml-switcher-btn:hover {
background: #f8fafc !important;
color: #0f172a !important;
}
/* アクティブ言語の状態 */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. 「ダークテックターミナル」
雰囲気: 開発者ツールやWeb3プラットフォームに着想を得ています。高コントラストのダークテーマ、洗練されたモノスペースハイブリッドフォントレイアウト、ホバー時のわずかなエレクトリックブルーの輝きを使用しています。
✨ 最適: 開発者ドキュメント、Web3プロジェクト、クリプトプラットフォーム、ダークモードSaaS
/* メインのトグルボタンのスタイル */
.ml-switcher-container {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 8px 16px !important;
color: #9ca3af !important;
font-family: 'Space Mono', monospace !important;
transition: all 0.3s ease !important;
}
.ml-switcher-container:hover {
border-color: #3b82f6 !important;
color: #f3f4f6 !important;
}
/* ドロップダウンメニューのスタイル */
.ml-switcher-dropdown {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 6px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* 個々の言語項目のスタイル */
.ml-switcher-dropdown-item {
border-radius: 4px !important;
color: #6b7280 !important;
font-family: 'Space Mono', monospace !important;
font-size: 12px !important;
transition: all 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: rgba(59, 130, 246, 0.1) !important;
color: #e5e7eb !important;
}5. 「中央フォーカス」モーダル（CSSハック）
雰囲気: 巨大なグローバルブランドにインスパイアされた、この見事なCSSハックは、標準のドロップダウンを切り離し、中央に配置された言語カードを備えたフルスクリーンのぼかしオーバーレイに展開させます。
✨ 最適: グローバル企業、大規模Eコマース、複雑なソフトウェアスイート
/* 1. メインのトリガーボタンをスタイル設定 */
.ml-switcher-container {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
color: #374151 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.ml-switcher-container:hover {
background: #f9fafb !important;
}
/* 2. ハック：ドロップダウンをフルスクリーンのオーバーレイに変換 */
.ml-switcher-dropdown {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
/* アイテムを画面中央に配置 */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* デフォルトのドロップダウンのスタイルを削除 */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. 個々の言語アイテムを大きなモーダルカードとしてスタイル設定 */
.ml-switcher-dropdown-item {
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
padding: 16px 24px !important;
margin: 6px 0 !important;
width: 90% !important;
max-width: 400px !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827 !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}
/* モーダルカードのホバー状態 */
.ml-switcher-dropdown-item:hover {
border-color: #3b82f6 !important;
color: #2563eb !important;
transform: translateY(-2px) !important;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.15) !important;
}簡単なカスタマイズガイド（非技術者向け）
これらのデザインをブランドに合わせて完璧に調整したいですか？以下は、最も一般的なカスタマイズです。
🎨 色の変更
次のような色のコードを探してください #3B82F6 または rgba(59, 130, 246, 0.5). これらをブランドカラーに置き換えてください。
例：変更 background: #3B82F6; へ background: #FF6B6B; （あなたのブランドカラー）
📏 サイズ調整
変更 パディング, フォントサイズ, または border-radius ボタンを大きくしたり小さくしたりする値。
例: padding: 8px 16px; → padding: 12px 24px; （大きいボタン）
✍️ フォントの変更
更新 font-family ウェブサイトのタイポグラフィに合わせる。
例: font-family: 'Inter'; → font-family: 'Roboto';
ベストプラクティスと最適化のヒント
モバイルデバイスでテストする
カスタムスイッチャーは、常にモバイルフォンやタブレットでプレビューしてください。グローバルなウェブトラフィックの60%以上がモバイルです。
アクセシビリティのためにハイコントラストを使用する
視覚障害のあるユーザーのために、テキストと背景に十分な色のコントラスト（4.5:1の比率を目指す）があることを確認してください。
アニメーションは控えめにする
派手なアニメーションはユーザーの注意をそらす可能性があります。0.3秒未満のスムーズなトランジションに留めてください。
コア機能をオーバーライドしない
スイッチャーを完全に非表示にしたり、クリックできないようにしないでください。ユーザーは簡単にアクセスできる必要があります。
ウェブサイトのテーマに合わせる
既存のサイトデザインを引き立てるデザインを選びましょう。不自然に目立たせないようにしてください。
よくある間違い
一度にアニメーションを使いすぎない—サイトが遅くなります
フォントサイズを12px未満に設定する—ユーザーは小さなテキストを読むことができません
異なるブラウザ（Chrome、Safari、Firefox）でのテストを忘れる
信頼できないソースからCSSをコピーしない—常に公式テンプレートを使用してください
大きな変更を加える前にバックアップを保存しない
パフォーマンスへの影響
すべてのこれらのCSSデザインは 超軽量 そしてウェブサイトの速度を低下させることはありません。CSSはブラウザによって即座にレンダリングされ、これらのスタイルはページサイズに2KB未満しか追加しません。
参考までに、2KBは約1つの絵文字のサイズです。ウェブサイトの速度とSEOランキングには影響しません。✨
注意: これらのスニペットはデフォルトを対象としています .ml-switcher-container および .ml-switcher-btn クラス。根本的に異なるベーステンプレートを使用している場合は、クラス名を調整してください。