WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
wp.masaa.net
MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト
wp.masaa.me
今回は、WordPressテーマ THE THOR（ザ・トール）での「ヘッダーお知らせ表示」のカスタマイズ2回目についてまとめてみました。
WordPressテーマ THE THOR（ザ・トール） ヘッダーお知らせ表示
以前にも「ヘッダーお知らせ表示」のカスタマイズは行ってきました。
【THE THOR】ヘッダーお知らせ表示のカスタマイズ
WordPressテーマ THE THOR（ザ・トール）で「ヘッダーお知らせ表示」のカスタマイズについてまとめてみました。今回のカスタマイズでは「ヘッダーお知らせ表示」の背景グラデーション化、上下ライン設置、フォントカラー変更を行いました。
masaa.net
2021.02.07
現在のWordPressテーマ THE THOR（ザ・トール）での「ヘッダーお知らせ表示」のスタイルは、次の様になっています。
スタイルは特に問題ありませんが、気になる点が1つあります。
それは「ヘッダーお知らせ表示」上にマウスカーソルをホバーしてもそのまま流れていってしまうことです。
今回はこの「ヘッダーお知らせ表示」上にマウスカーソルをホバーしたときに一時的に停止するカスタマイズを行いたいと思います。
ヘッダーお知らせ表示 カスタマイズ2回目
WordPressテーマ THE THOR（ザ・トール）での「ヘッダーお知らせ表示」のカスタマイズ2回目を行います。
カスタマイズ内容
「ヘッダーお知らせ表示」のカスタマイズ2回目の内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「ヘッダー お知らせの表示のカスタマイズ」に上書きします。
/************************************
** ■ヘッダー お知らせの表示のカスタマイズ
************************************/
.l-headerBottom .infoHead {
background:linear-gradient(to top, #ffc5e0, #fe619a, #ffc5e0); /*フッターグラデーション化*/
box-shadow: 0 0 0 1px rgba(243,35,105,1); /*下枠設定*/
}
.l-headerBottom .infoHead .infoHead__text {
color: yellow; /*フォントカラー*/
font-size:16px;
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
.l-headerBottom .infoHead .infoHead__text {
font-size:14px;
padding-top:4px;
}
}
.l-header-shadow {
box-shadow: 0 0 0 1px rgba(243,35,105,1); /*上枠設定*/
}
.l-headerBottom .infoHead .infoHead__text:hover { /*プロフィールアイコン ホバー時*/
animation-play-state: paused!important;
}
カスタマイズ後のヘッダーお知らせ表示
今回のカスタマイズによって、「ヘッダーお知らせ表示」のスタイルは次の様になりました。
と言っても、画像では分からないので実際にZMASAa.blogで確認して下さい。
今回のカスタマイズでは、
- 「ヘッダーお知らせ表示」上にマウスカーソルをホバーしたときに一時停止
- 「ヘッダーお知らせ表示」のフォントサイズを拡大
の2点について行いました。
最後に
「ヘッダーお知らせ表示」の一時停止はスマートフォンなどの端末ではあまり意味はありませんが、PCで見たときのイライラ感が少しでも無くなると思います。
コメント