WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「ウィジェット カテゴリーをホバーエフェクト化する」カスタマイズについてまとめてみました。
WordPressテーマ 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;
}
カスタマイズ後のウィジェット カテゴリー
今回のカスタマイズによって、「ウィジェット カテゴリー」のスタイルは次の様になりました。
親カテゴリーにホバーした時の「ウィジェット カテゴリー」のスタイルは次の様になっています。
子カテゴリーにホバーした時の「ウィジェット カテゴリー」のスタイルは次の様になっています。
画像だけでホバーエフェクトの動きが分からないので、実際にZMASAa.blogをご覧下さい。
最後に
これで「ヘッダーメニューとサブメニュー」「ウィジェット ナビゲーションメニュー」「ウィジェット カテゴリー」がホバーエフェクト化に対応しました。
実際にマウスカーソルをホバーしてみないとと分からないのですが、サイトに動きが増えて自己満足しています。
また、あわせて認識性も向上することができました。
コメント