WordPressCocoon

【Cocoon】Google翻訳の言語選択ウィンドウをカスタマイズする

アイキャッチ画像 Cocoon
この記事は約2分で読めます。
スポンサーリンク

Google翻訳の言語選択ウィンドウ

前回のエントリー記事「ウェブサイト翻訳ツール Google翻訳ブログパーツを導入する」で、ブログに「ウェブサイト翻訳ツール Google翻訳」ブログパーツを導入しました。

【WordPress】Google翻訳ブログパーツを導入する
ウェブサイトの内容を色々な国の言語に翻訳を行うブログパーツ「Google 翻訳」を導入しました。WordPressテーマ Cocoonは簡単に導入できるのですが、Simplicityでは登録の必要があるので手順についてまとめてみました。

これによりGoogle翻訳の「言語選択ウィンドウ」が表示されるようになりました。

以前のエントリー記事「【WordPress】検索ウィンドウと月選択ウィンドウをカスタマイズする」で、「検索ウィンドウ」と「月選択ウィンドウ」をフォーカスしたときにウィンドウの枠線をピンクにするカスタマイズを行いました。

【Cocoon】検索ウィンドウと月選択ウィンドウをカスタマイズする
WordPressテーマ Cocoonの【検索ウィンドウ】と【月選択ウィンドウ】をカスタマイズしてみました。カスタマイズの内容は【検索ウィンドウ】または【月選択ウィンドウ】をフォーカス時に枠のカラーを任意に設定するものです。

このGoogle翻訳の「言語選択ウィンドウ」にも同様のカスタマイズを行いたいと思います。

Google翻訳の言語選択ウィンドウ(フォーカス時)

Google翻訳の「言語選択ウィンドウ」のフォーカス時は、次の様になっています。

【WordPress】Google翻訳の言語選択ウィンドウをカスタマイズする

カスタマイズ内容

「人気記事ランキング」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

.goog-te-combo:focus{ /*Google翻訳の言語選択ウィンドウ(フォーカス時)*/
  outline: none;
  border-color: #fe619a; /*フォーカス時の枠カラー*/
}

カスタマイズ後のGoogle翻訳の言語選択ウィンドウ(フォーカス時)

今回のカスタマイズによって、Google翻訳の「言語選択ウィンドウ」のフォーカス時は、次の様になりました。

【WordPress】Google翻訳の言語選択ウィンドウをカスタマイズする

最後に

今回のカスタマイズで、

  • Google翻訳の「言語選択ウィンドウ」
  • 「検索ウィンドウ」
  • 「月選択ウィンドウ」

の3つのウィンドウに対し統一感が出ました。

フォーカスしないと現れない地味なカスタマイズですが、取りあえず統一されるのは良いですね。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ブラック・サージナイト
リネージュ2M
商人放浪‪記
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
ロードモバイル
パズにゃん

おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ WING(AFFINGER5)
WordPressテーマ Diver

MASAa.net

コメント