【Bogo】言語切り替えボタンのカスタマイズ

当サイトは広告を含んでいます。

2026-06-04

Bogoの言語切り替えボタンをおしゃれにしたい…

今回は、言語切り替えプラグイン「Bogo」での言語切り替えボタンのCSSカスタマイズを紹介します。

【Bogo】CSSカスタマイズ

上記のようなおしゃれなボタンにするには、下記のコードを使います。

（今回は、英語と日本語に2言語です）

/**bogoカスタマイズ**/
.wp-block-bogo-language-switcher ul{
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bogoflags,.bogoflags-before:before{
	display:none;
}



.wp-block-bogo-language-switcher li.en-US a{
  font-size: 0;
}

.wp-block-bogo-language-switcher li.en-US:not(:has(a)){
  display: none;
}

.wp-block-bogo-language-switcher li.ja a{
  font-size: 0;
}

.wp-block-bogo-language-switcher li.en-US a::after{
  content: "EN";
  font-size: 16px;
}


.wp-block-bogo-language-switcher li.ja a::after{
  content: "JP";
  font-size: 16px;
}

.bogo-language-switcher a,{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #737373;
  border-radius: 3px;
  color: #737373;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: all .6s ease;
}

.bogo-language-switcher a:hover{
  background: #737373;
  color: #fff;
  transform: translateY(-2px);
}

.wp-block-bogo-language-switcher li a{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #737373;
  color: #737373;
  text-decoration: none;
  border-radius: 3px;
  transition: all .6s ease;
}

.wp-block-bogo-language-switcher li.current a{
  background: #737373;
  color: #fff;
}

.wp-block-bogo-language-switcher li:not(.current) a:hover{
  background: #737373;
  color: #fff;
}

.wp-block-bogo-language-switcher ul{
  justify-content: center;
}

.bogo_sp{
	margin-top:-100px;
}

.wp-block-bogo-language-switcher li a::after {
    display:block;
    text-align:center;
}