(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約2分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ THE THOR

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd 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】見出しのアーカイブ内記事タイトル ホバー時のカスタマイズ

最後に

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

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

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

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

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】