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

INDEX

WordPressテーマ THE THOR
1. WordPressテーマ THE THOR SNSボタンホバー時
SNSボタンホバー時のカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のSNSボタンホバー時
最後に

WordPressテーマ THE THOR

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

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

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

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

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

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

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; /*文字装飾無し*/
}