WordPressTHE THOR

【THE THOR】ウィジェット カテゴリーをホバーエフェクト化する

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

WordPressテーマ THE THOR(ザ・トール)

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

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

WordPressテーマ THE THOR(ザ・トール) ウィジェット カテゴリー

現在のWordPressテーマ THE THOR(ザ・トール)の「ウィジェット カテゴリー」のスタイルは次の様になっています。

【THE THOR】ウィジェット カテゴリーをホバーエフェクト化する

親カテゴリーにホバーした時の「ウィジェット カテゴリー」のスタイルは次の様になっています。

【THE THOR】ウィジェット カテゴリーをホバーエフェクト化する

子カテゴリーにホバーした時の「ウィジェット カテゴリー」のスタイルは次の様になっています。

【THE THOR】ウィジェット カテゴリーをホバーエフェクト化する

これまでホバーエフェクト化については、「ヘッダーメニューとサブメニュー」「ウィジェット ナビゲーションメニュー」が対応しました。

【THE THOR】ヘッダーメニューをホバーエフェクト化する
WordPressテーマ THE THOR(ザ・トール)での「ヘッダーメニューをホバーエフェクト化する」カスタマイズについてまとめてみました。今回のカスタマイズではヘッダーメニューとサブメニューをホバーエフェクト化しました。
【THE THOR】ナビゲーションメニューをホバーエフェクト化する
WordPressテーマ THE THOR(ザ・トール)での「ウィジェット ナビゲーションメニューをホバーエフェクト化する」カスタマイズについてまとめてみました。今回はウィジェット ナビゲーションメニューをホバーエフェクト化しました。

今回は、この「ウィジェット カテゴリー」に対しホバーエフェクト化するカスタマイズを行いたいと思います。

ウィジェット カテゴリーをホバーエフェクト化するカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「ウィジェット カテゴリーをホバーエフェクト化する」カスタマイズを行います。

カスタマイズ内容

「ウィジェット カテゴリーをホバーエフェクト化する」カスタマイズ内容は、下記の通りです。

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

/************************************
** ■ウイジェット カテゴリー ホバーエフェクト化のカスタマイズ
************************************/
.l-sidebar .widget.widget_categories ul li a,
.l-sidebar .widget.widget_categories ul .children a,
.menuBtn__content .widget.widget_categories ul li a,
.menuBtn__content .widget.widget_categories ul .children a {
	position: relative;
}
.l-sidebar .widget.widget_categories ul li a::after,
.l-sidebar .widget.widget_categories ul .children a::after,
.menuBtn__content .widget.widget_categories ul li a::after, 
.menuBtn__content .widget.widget_categories ul .children a::after {
	position: absolute;
	color: rgba(255,255,255,1);
	bottom: -3px;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 3px;
	background: #ff005d;
	transform: scaleX(0);
	transform-origin: left top;
	transition: transform 0.4s;
}
.l-sidebar .widget.widget_categories ul li a:hover::after,
.l-sidebar .widget.widget_categories ul .children a:hover::after,
.menuBtn__content .widget.widget_categories ul li a:hover::after, 
.menuBtn__content .widget.widget_categories ul .children a:hover::after {
	transform: scaleX(1);
	transform-origin: left top;
	transition: transform 0.3s;
}
.l-sidebar .widget.widget_categories ul li a,
.menuBtn__content .widget.widget_categories ul li a {
	margin-bottom:2px;
}
.l-sidebar .widget.widget_categories ul .children a,
.menuBtn__content .widget.widget_categories ul .children a {
	margin-bottom:2px;
}

カスタマイズ後のウィジェット カテゴリー

今回のカスタマイズによって、「ウィジェット カテゴリー」のスタイルは次の様になりました。

【THE THOR】ウィジェット カテゴリーをホバーエフェクト化する

親カテゴリーにホバーした時の「ウィジェット カテゴリー」のスタイルは次の様になっています。

【THE THOR】ウィジェット カテゴリーをホバーエフェクト化する

子カテゴリーにホバーした時の「ウィジェット カテゴリー」のスタイルは次の様になっています。

【THE THOR】ウィジェット カテゴリーをホバーエフェクト化する

画像だけでホバーエフェクトの動きが分からないので、実際にZMASAa.blogをご覧下さい。

最後に

これで「ヘッダーメニューとサブメニュー」「ウィジェット ナビゲーションメニュー」「ウィジェット カテゴリー」がホバーエフェクト化に対応しました。

実際にマウスカーソルをホバーしてみないとと分からないのですが、サイトに動きが増えて自己満足しています。

また、あわせて認識性も向上することができました。

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

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

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



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

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

MASAa.net

コメント