THE THORWordPress

【THE THOR】コメント送信ボタン ホバー時のカスタマイズ

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

WordPressテーマ THE THOR

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

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

WordPressテーマ THE THOR(ザ・トール)の「コメント送信ボタン ホバー時」に変化が有りません。

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

WordPressテーマ THE THOR コメント送信ボタン ホバー時

ホバーされていない「コメント送信ボタン」は、このように表示されています。

【THE THOR】コメント送信ボタン ホバー時のカスタマイズ

次に「コメント送信ボタン ホバー時」の場合、特に変化はありません。

【THE THOR】コメント送信ボタン ホバー時のカスタマイズ

コメント送信ボタン ホバー時のカスタマイズ

「コメント送信ボタン ホバー時」の背景色についてカスタマイズを行います。

カスタマイズ内容

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

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

/************************************
** ■コメント送信ボタンのホバー時カスタマイズ
************************************/
.comment-respond .submit:hover {
	opacity: 0.6; /*不透明度*/
	transition: all 0.8s ease; /*アニメーション*/
}

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

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「コメント送信ボタン ホバー時」は、次の様になりました。

【THE THOR】コメント送信ボタン ホバー時のカスタマイズ

最後に

今回のカスタマイズで「コメント送信ボタン ホバー時」の背景色を薄くして、滑らかに変化するようにしてみました。

これにより、ホバーされている状態かホバーされていない状態かの判断が分かりやすくなったと思います。

「コメント送信ボタン」は読者がコメントを書き込む際に押して貰うボタンなので、不安無く押して頂く環境を構築していきたいですね。

コメント