黒鋼彗牙【サイト作成】メニューの翻訳の制御
ふと思いついて作ってるサイトをブラウザで翻訳かけたら
≪PC表示≫
≪スマートフォン(iPhone 5S 320x568準拠)表示≫
仕組みは知らんけどメニューがえらいこっちゃになりました。サイト名の翻訳もなんかアレだがとりあえずは置いておく。
で、それをどうにかしました(雑)
タグをそのまま貼るのがめんどくさいので図解ですが、リンクの構造はこんな感じ(？)
やったことは、
・メニューの文字の箱のCSSに「overflow: hidden; text-overflow: ellipsis;」を追加(メニューからはみ出したらはみ出し部分は...にする)。
・メニューの文字の箱の中の英語の部分に「translate="no"」属性を追加(翻訳されなくなる)。
ちなみに日本語部分と英語部分は英語部分のフォントを変更するために元々別の括りだったのでHTML的な変更は一切なしです。
どうにかなったのがこちらです。
≪PC表示≫
≪スマートフォン表示≫
英語はそのまま、日本語だけ翻訳させるようにして、はみ出した部分は...で省略するようになりました。
よくわかんないけどなんかいい感じになったのでとりあえずヨシ！
英語だと同じようなのが並ぶけど知らん！うちはJapanese writing onlyサイトじゃ！！！
≪PC表示≫
ウワーッ！
≪スマートフォン(iPhone 5S 320x568準拠)表示≫
ウワーッ！
仕組みは知らんけどメニューがえらいこっちゃになりました。サイト名の翻訳もなんかアレだがとりあえずは置いておく。
で、それをどうにかしました(雑)
タグをそのまま貼るのがめんどくさいので図解ですが、リンクの構造はこんな感じ(？)
やったことは、
・メニューの文字の箱のCSSに「overflow: hidden; text-overflow: ellipsis;」を追加(メニューからはみ出したらはみ出し部分は...にする)。
・メニューの文字の箱の中の英語の部分に「translate="no"」属性を追加(翻訳されなくなる)。
ちなみに日本語部分と英語部分は英語部分のフォントを変更するために元々別の括りだったのでHTML的な変更は一切なしです。
どうにかなったのがこちらです。
≪PC表示≫
≪スマートフォン表示≫
英語はそのまま、日本語だけ翻訳させるようにして、はみ出した部分は...で省略するようになりました。
よくわかんないけどなんかいい感じになったのでとりあえずヨシ！
英語だと同じようなのが並ぶけど知らん！うちはJapanese writing onlyサイトじゃ！！！
