【THE THOR】フッターメニューをホバーエフェクト化する

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

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】ヘッダーメニューをホバーエフェクト化する
WordPressテーマ THE THOR(ザ・トール)での「ヘッダーメニューをホバーエフェクト化する」カスタマイズについてまとめてみました。今回のカスタマイズではヘッダーメニューとサブメニューをホバーエフェクト化しました。

今回は「ヘッダーメニュー」と同じく、「フッターメニュー」に対してもホバーエフェクト化するカスタマイズを行いたいと思います。

フッターメニューをホバーエフェクト化するカスタマイズ

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

カスタマイズ内容

「フッターメニューをホバーエフェクト化する」カスタマイズ内容は、下記の通りです。

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

/************************************
** ■フッターメニュー ホバーエフェクト化のカスタマイズ
************************************/
.bottomFooter__navi .bottomFooter__list .menu-item>a,
.bottomFooter__navi .bottomFooter__list .menu-item a:hover {
	border-bottom: none;
}
.bottomFooter__navi .bottomFooter__list .menu-item a {
	position: relative;
}
.bottomFooter__navi .bottomFooter__list .menu-item a::after {
	position: absolute;
	color: rgba(255,255,255,1);
	bottom: -3px;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 3px;
	background: #f32469;
	transform: scaleX(0);
	transition: transform 0.4s;
}
.bottomFooter__navi .bottomFooter__list .menu-item a:hover::after {
	transform: scaleX(1);
	transition: transform 0.3s;
}
.bottomFooter__navi .bottomFooter__list a:hover {
	animation:none; /*点滅停止*/
}

次のカスタマイズ内容を以前行った「フッター上の表示カスタマイズ」に上書きします。

/************************************
** ■フッター上の表示カスタマイズ
************************************/
.bottomFooter__copyright, .bottomFooter__producer, .bottomFooter__navi {
	transform: scale(1.1); /*拡大表示*/
	line-height: 40px; /*高さ*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.bottomFooter__copyright, .bottomFooter__producer, .bottomFooter__navi {
		transform: scale(1.0); /*拡大表示*/
	}
}

次のカスタマイズ内容を以前行った「フッターナビ設定」に上書きします。

/************************************
** ■フッターナビ設定
************************************/
.bottomFooter__navi .bottomFooter__list .menu-item {
	font-size:14px!important; /*文字サイズ*/
}
.bottomFooter__navi .bottomFooter__list {
	line-height: 40px!important; /*高さ*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.bottomFooter__navi .bottomFooter__list .menu-item {
		font-size:12px!important; /*文字サイズ*/
	}
	.bottomFooter__navi .bottomFooter__list {
		line-height: 36px!important; /*高さ*/
	}
}

カスタマイズ後のフッターメニュー

今回のカスタマイズによって、フッターのスタイルは次の様になりました。

【THE THOR】フッターメニューをホバーエフェクト化する

また、今回のカスタマイズによって、ホバー時の「フッターメニュー」のスタイルは次の様になりました。

【THE THOR】フッターメニューをホバーエフェクト化する

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

最後に

これで一番気になっていた「ヘッダーメニュー」と「フッターメニュー」はホバーエフェクト化することができました。

あともう少細かいところをバーエフェクト化したいと思います。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール