ウェブサイトの翻訳は、単に言葉を置き換えるだけにとどまりません。異なる言語（例： ドイツ語、フランス語、スペイン語など ）では、多くの場合、テキスト文字列が長くなったり、文法構造が異なったりします。翻訳された際、これらの変化によりサイトのレイアウトが崩れ、テキストがあふれたり、ボタンが破損したり、見出しの位置がずれたりすることがあります。
これを解決するために、MultiLipiの ビジュアルエディター には、高度な視覚的スタイリングコントロールが含まれています。この機能を使用すると、カスタムコードを一から記述することなく、手動での翻訳修正を行いながら、個々のページ要素の見た目を リアルタイム で同時に管理できます。
ビジュアルスタイルカスタマイズの利点
1つの統一されたインターフェースでレイアウトとコピーを完全に制御。
単一のワークフローで翻訳とスタイリングを同時に実行
単一のインターフェース内でテキスト翻訳と視覚的スタイリングを統合することで、チームはグローバルWebページを 完全にコントロール できるようになります。翻訳ダッシュボードとコードエディタの間でコンテキストを切り替える必要はなく、すべてが1つのポイント＆クリックインターフェースに集約されます。これは、確かな成果をもたらす洗練されたネイティブのようなユーザー体験を実現するための核心部分です。 多言語SEO 結果
レイアウトの崩れを防ぐ
文字数が多くなりがちな言語に合わせてフォントサイズを縮小したりコンテナの幅を調整したりすることで、訪問者に届く前にテキストのオーバーフローやボタンレイアウトの崩れを防ぎます。
厳格なブランド美学を維持する
ローカライズされたページ上で直接、テキストの色、背景の16進数コード、要素の寸法を微調整して厳格なブランドガイドラインに適合させ、どの言語バージョンもメインサイトと全く同じ外観になるように保証します。
コードに関する摩擦ゼロ
バックエンドのスタイルシートコードを調べる代わりに、直感的なビジュアルサイドバーを使用して正確なCSSレベルの変更を行います。開発者向けに、Raw CSSタブを介した高度な調整も引き続き利用可能です。
ステップバイステップガイド：要素のスタイル設定と翻訳
ライブページのプレビューでシームレスなポイント＆クリックプロセス。
ビジュアルエディタを開く
にログインする MultiLipi ダッシュボード アクティブなプロジェクトを選択します。
左側のナビゲーションパネルに移動し、次をクリックします URL.
更新するページを見つけ、カーソルを次に移動します ビジュアルエディター 列をクリックし、次をクリックします モニター/画面アイコン インタラクティブなページプレビューを起動します。
URLsパネル — 右側のモニターアイコンをクリックしてビジュアルエディタを開きます
ターゲット要素を選択
エディタ内でライブWebサイトのプレビューを閲覧します。
変更したい特定のテキストブロック、見出し、またはボタンを直接クリックします。選択境界線が要素の輪郭を示し、設定パネルが開きます。
翻訳とテキストコンテンツの更新
中央の翻訳モーダルで、ローカライズされたテキストを手動で編集するか、クリックします AIによる提案を生成 別表現が必要な場合。
プロジェクトの用語集を使用するか、または 翻訳メモリの上書き を使用して、サイト全体の正確な語彙の整合性を確保します。
翻訳モーダル — 手動での編集、または用語集とメモリのサポートを備えたAI提案の生成
視覚的スタイルのオプションを調整
右側を見てください カスタムCSS サイドバーパネル。以下の 視覚的スタイル タブでは、アクティブな要素のセレクターパスを表示できます（例： main#main > section > div > div > h1）。翻訳されたテキストに完全に適合するようにレイアウトプロパティを変更します：
幅と高さ： コンテナの寸法を調整するか、自動に設定して、翻訳されたコンテンツを自然に収まるようにします。
フォントサイズ： ドイツ語やロシア語の翻訳によくある改行の問題を防ぐために、テキストを拡大または縮小（ピクセル単位）します。
テキストの色と背景色： 正確な16進数コード（例：#0b1736）を入力してカラープロパティを変更し、ローカライズされたページをブランドに適合させます。
カスタムCSSサイドバー — 幅、フォントサイズ、カラーコントロールを備えた「視覚的スタイル」タブ
変更を適用して保存
タイポグラフィとテキストの修正が正しく完了したら、右側パネルの下部にある青色の CSSを適用 ボタンをクリックします。
クリック 保存 テキスト翻訳モーダル上で変更を確定させ、カスタマイズされたスタイルを海外からの訪問者に向けて公開します。
スタイルの変更は翻訳版にのみ適用されるため、プライマリ言語のページは一切変更されません。
プロのヒント：高度な調整のための生CSSタブの使用
スタイルシートレベルの完全な制御が必要な開発者向けです。
ビジュアルスタイルタブと生CSSタブ
一方、 視覚的スタイル パネルでは日常的なパディング、サイズ変更、色の変更を即座に行うことができますが、開発者や上級ユーザーはすぐ隣にある 生CSS タブに切り替えることができます。
これにより、カスタムのインラインスタイル規則や、 特定のローカライズされたビューポート向けのメディアクエリを記述でき、プライマリコードベースを変更することなく、デスクトップ、タブレット、モバイルデバイスのすべてでグローバルページが完璧に表示されるようになります。
ビジュアルスタイルタブ
- •パディングおよびマージンスライダー
- •フォントサイズのピクセルコントロール
- •16進数カラーピッカー
- •幅 / 高さの入力欄
- •最適：非開発者および迅速な修正
生CSSタブ
- •カスタムインラインスタイルルール
- •ビューポートごとのメディアクエリ
- •擬似クラスセレクター
- •複雑な複数プロパティのオーバーライド
- •最適：開発者およびエッジケース
今すぐグローバルUIを完成させる
優れたローカライズは、ネイティブでシームレスであり、完全に意図されたものであるべきです。
自動翻訳とリアルタイムの視覚的調整を組み合わせることで、多言語ページもプライマリサイトと同様に洗練された印象に仕上げることができます。今すぐ MultiLipi ダッシュボードに移動してビジュアルエディタを起動し、グローバルレイアウトの最適化を始めましょう。
関連ツールとガイドを探索する
複雑なレイアウトの問題が発生していますか？ 標準的なスタイリングコントロールを超えたカスタムソリューションが必要な特定の要素がある場合は、 MultiLipiサポートに連絡 — 弊社チームが、特定のテンプレートやフレームワーク向けの高度なCSS設定をサポートいたします。