【THE THOR】見出しのアーカイブ内記事タイトル ホバー時のカスタマイズ

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

WordPressテーマ THE THOR

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

ZMASAa.blog│購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

これまでのWordPressテーマ THE THOR(ザ・トール)のカスタマイズや設定によって、「見出しのアーカイブ内記事タイトル ホバー時」表示が納得できなくなりました。

そこで、WordPressテーマ THE THOR(ザ・トール)の「見出しのアーカイブ内記事タイトル ホバー時」表示に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR 見出しのアーカイブ内記事タイトル ホバー時

通常のホバーされていない「見出しのアーカイブ内記事タイトル」は、このように問題無く表示されています。

【THE THOR】見出しのアーカイブ内記事タイトル ホバー時のカスタマイズ

次に「見出しのアーカイブ内記事タイトル ホバー時」の場合、文字色とフォント太さが変わってしまいます。

【THE THOR】見出しのアーカイブ内記事タイトル ホバー時のカスタマイズ

見出しのアーカイブ内記事タイトル ホバー時のカスタマイズ

「見出しのアーカイブ内記事タイトル ホバー時」の文字色、フォント太さについてカスタマイズを行います。

カスタマイズ内容

「見出しのアーカイブ内記事タイトル ホバー時」のカスタマイズは、下記の通りです。

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

/************************************
** ■見出し:アーカイブ内の記事タイトル設定
************************************/
.heading.heading-secondary a:hover{
	font-weight:bold; /*フォント太さ*/
	color: #C03; /*文字色*/
}

カスタマイズ後の見出しのアーカイブ内記事タイトル ホバー時

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「見出しのアーカイブ内記事タイトル ホバー時」は次の様に表示されるようになりました。

【THE THOR】見出しのアーカイブ内記事タイトル ホバー時のカスタマイズ

最後に

「見出しのアーカイブ内記事タイトル ホバー時」のフォントサイズは、ホバーされていないときの「見出しのアーカイブ内記事タイトル」と同じにしたことで、ホバーしても違和感がなくなりました。

また、カスタマイズ前はホバーすると文字色が濃い文字から薄い文字になっていたのですが、今回文字色を濃いくしたことで、ホバーされていないときの「見出しのアーカイブ内記事タイトル」の黒色と比べても違和感がなくなりました。

アンダーラインは消しても良かったのですが、今回そのままアンダーラインを表示させています。

コメント