Google Language Translatorの国旗アイコンを文字表記にして並び替えたい

公開日:2019/09/15 更新日:2020/11/12

Google Language Translatorは、手軽に翻訳機能をつけることができるプラグインです
手軽さゆえに、選択肢が国旗のアイコンで表示されたり、並び順が固定になっているなど細かいカスタマイズをしたくなることがあります
生成されるボタンのhtmlをコピペしてスタイルする方法もありますが、今回はスタイルシートの修正だけでできるカスタマイズを検討してみました

国旗のアイコンを文字表記に変える

div.tool-container {
    padding: 10px;
    width: 180px;
}

div.tool-container > div.tool-items > a.tool-item {
    background: none !important;
    min-width: 100%;
    text-decoration: none;
}
div.tool-container > div.tool-items > a.tool-item::after {
    display: block;
    white-space: nowrap;
    content: attr(title);
}

背景画像として設定される国旗アイコンを無効化しています
プラグインの方でwidthが設定されているため、「min-width: 100%;」で強制的に表示領域を広げています
表示する文字はaタグの疑似要素を使い、ボタンに設定されている「title」属性の値を参照しています

国の並び順を変える

各選択肢を囲む親クラス「tool-items」をFlexboxにし、各ボタンに「order」プロパティを設定することで順番を入れ替えています
ボタンの識別は、「title」属性の値を参照しています

div.tool-container > div.tool-items {
    display: flex;
    flex-wrap: wrap;
}
div.tool-container > div.tool-items > a[title="Japanese"] {
    order: 1;
}
div.tool-container > div.tool-items > a[title="English"] {
    order: 2;
}
div.tool-container > div.tool-items > a[title="Chinese (Simplified)"] {
    order: 3;
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。