【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressTHE THOR

【THE THOR】ウィジェット 画像ホバーエフェクトのカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約2分で読めます。
スポンサーリンク

WordPressテーマ THE THOR

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

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

今回は、WordPressテーマ THE THOR(ザ・トール)の「ウィジェット 画像ホバーエフェクト」に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR ウィジェット 画像ホバーエフェクト

WordPressテーマ THE THOR(ザ・トール)の「ウィジェット 画像ホバーエフェクト」は次の様になっています。

【THE THOR】ウィジェット 画像ホバーエフェクトのカスタマイズ

画像にマウスカーソルをホバーしても特に何も起こりません。

と言う事で、この点について改善するカスタマイズを行ってみました。

ウィジェット 画像ホバーエフェクトのカスタマイズ

「ウィジェット 画像ホバーエフェクト」のカスタマイズを行います。

カスタマイズ内容

「ウィジェット 画像ホバーエフェクト」のカスタマイズは、下記の通りです。

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

/************************************
** ■ウイジェット画像ホバー時のエフェクト処理
************************************/
.widget img:hover {
	opacity: 0.5; /*不透明度*/
	transition: all 0.4s ease; /*エフェクト処理*/
}

カスタマイズ後のウィジェット 画像ホバーエフェクト

今回の「ウィジェット 画像ホバーエフェクト」のカスタマイズによって、「ウィジェット 画像ホバーエフェクト」は次の様になりました。

【THE THOR】ウィジェット 画像ホバーエフェクトのカスタマイズ

今回の「ウィジェット 画像ホバーエフェクト」のカスタマイズは、ウィジェットに表示されている画像にマウスカーソルをホバーすると、全体が白っぽくなるエフェクト処理を設定しました。

最後に

自分の場合、ウィジェットに表示される画像は全てリンク画像となっているので、今回のカスタマイズは手っ取り早くウィジェットの全ての画像を対象としました。

そのためリンク画像で無い画像を表示している場合は、ホバーするとエフェクト処理されるので注意が必要です。

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

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

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



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

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

MASAa.net

コメント