【THE THOR】SNSボタン ホバー時のカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事をWordPressブログに毎日更新中!中の人はこれでもパパ。

これまでのWordPressテーマ THE THOR(ザ・トール)のカスタマイズや設定によって、「SNSボタン ホバー時」表示が納得できなくなりました。

そこで、WordPressテーマ THE THOR(ザ・トール)の「SNSボタン ホバー時」表示に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR SNSボタン ホバー時

通常のホバーされていない「SNSボタン」は、このように問題無く表示されています。

【THE THOR】SNSボタン ホバー時のカスタマイズ

次に「SNSボタン ホバー時」の場合、背景色が薄くなり、文字色が変わり、アンダーラインが表示されてしまいます(この場合Facebookボタン)。

【THE THOR】SNSボタン ホバー時のカスタマイズ

SNSボタン ホバー時のカスタマイズ

「SNSボタン ホバー時」の背景色はそのままで、文字色、文字装飾についてカスタマイズを行います。

カスタマイズ内容

「SNSボタン ホバー時」のカスタマイズは、下記の通りです。

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

/************************************
** ■SNSボタンホバー時設定
************************************/
.social-top a:hover{ /*上側SNSボタン*/
	color: #ffffff; /*文字色*/
	text-decoration:none; /*文字装飾無し*/
}
.social-bottom a:hover{ /*下側SNSボタン*/
	color: #ffffff; /*文字色*/
	text-decoration:none; /*文字装飾無し*/
}

カスタマイズ後のSNSボタン ホバー時

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「SNSボタン ホバー時」は次の様に表示されるようになりました(この場合Facebookボタン)。

【THE THOR】SNSボタン ホバー時のカスタマイズ

最後に

これまでのカスタマイズで「SNSボタン ホバー時」表示が変わってしまったのですが、今回のカスタマイズにより文字色がハッキリする白色となり、ボタンには不要のアンダーラインが無くなり「SNSボタン ホバー時」が見やすくなりました。

コメント