Weglotを使用した翻訳サイトのスタイルを整える方法【備忘録】

お客様で「Weglot」アプリを使用した翻訳サイトを作成していて、日本語の表示に合わせたスタイル(CSS)が英語になった時に崩れてしまった現象が起こりました。

直すのに少し苦戦しましたので備忘録として簡単に書いておきます。

なんと英語版用のCSSの変更はたったこれだけ!

:lang()

完全に失念しておりました。翻訳機能を使用するときもlang設定が英語に変わるんですね!
そうじゃんそれがあったじゃんという気持ちw

例えば、英語翻訳の時だけ消したい言葉があったとします。
よくあるパターンで、メニューなどで「ホーム」の下に「Home」と入れていて、英語翻訳すると「Home」と「Home」同じものが2個続いてしまうなど。。

その場合は、以下のようにCSSを加えるだけで英語版の時だけ消えてくれます!

html:lang(en) *Classなどのセレクタ* {
    display: none;
}

すっかり覚えていそうで覚えていなかったので、忘れないようにメモしておきました。

翻訳アプリを使って英語サイトを作った時、英語と日本語でクラス分けできてないよ!って時など、越境系のさまざまな場面で活躍するのではないでしょうか!

以上エンジニアチームの備忘録でした!

関連記事

  1. WordPress の管理画面にもファビコンを表示する方法