WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、以前エントリー記事として掲載したWordPressテーマ THE THOR（ザ・トール）での「ブログ記事本文のリンク文字のカスタマイズ」の修正版となります。
WordPressテーマ THE THOR（ザ・トール） ブログ記事本文のリンク文字
元々WordPressテーマ THE THOR（ザ・トール）では、「ブログ記事本文のリンク文字」にホバーするとフォントの太さが変わってしまう仕様となっています。
この仕様に対して凄く違和感が有ったので、WordPressテーマ THE THOR（ザ・トール）導入早々に「ブログ記事本文のリンク文字のカスタマイズ」のエントリー記事にて、リンク文字にホバーしてもフォントの太さが変わらないカスタマイズを行いました。
このWordPressテーマ THE THOR（ザ・トール）の仕様については、以前エントリー記事として掲載したWordPressテーマ THE THOR（ザ・トール）での「ブログ記事本文のリンク文字のカスタマイズ」をご参照下さい。
それ以降特に問題無かったのですが、先日いつものようにWordPressテーマ THE THOR（ザ・トール）でブログ記事を作成中に、文字の太さを「bold(Ctrl+B)」に設定して、その「bold(Ctrl+B)」に設定にした文字列に対してリンクの設定を行いました。
すると、その「bold(Ctrl+B)」に設定した文字列にホバーすると、太文字が解除されてしまう不具合を確認しました。
以前の「ブログ記事本文のリンク文字のカスタマイズ」のエントリー記事で、リンク文字にホバーしても文字の太さがホバー前の文字の太さと同じ「font-weight:500」に強制的に設定したのが原因のようです。
と言う事で、リンク文字にホバーしても文字の太さが変わらないように修正してみたいと思います。
修正版！ブログ記事本文のリンク文字のカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「修正版！ブログ記事本文のリンク文字」のカスタマイズを行います。
カスタマイズ内容
「修正版！ブログ記事本文のリンク文字」のカスタマイズの内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を以前カスタマイズした部分に上書きします。
/************************************
** ■リンク文字設定
************************************/
.dividerBottom {
font-weight:500; /*フォント太さ*/
}
.dividerBottom a:hover{ /*リンク文字ホバー時*/
font-weight:inherit; /*フォント太さ*/
text-decoration:underline; /*アンダーライン*/
color: #C03; /*文字色*/
}
なお、変わっている部分は、8行目の「font-weight:inherit; /*フォント太さ*/」のみとなります。
カスタマイズ後の修正版！ブログ記事本文のリンク文字
今回のカスタマイズによって、「修正版！ブログ記事本文のリンク文字」は次の様になりました。
今回の「修正版！ブログ記事本文のリンク文字」のカスタマイズでは、リンク文字にホバーしても変わらない修正を行いました。
元々、リンク文字に対し「font-weight:500;」で設定していたのですが、これを「font-weight:inherit;」に変更しました。
「inherit」は親要素を継承する設定で、ホバー前の文字の太さを継承することになります。
最後に
最初から「inherit」を使えば良かったのですが、その当時は頭にありませんでした。
そのため文字の太さの親要素を継承する「inherit」はこれまで使ってこなかったのですが、今後ホバー時の文字の太さの設定を変えたくない場合は、この「inherit」を使う方が良いでしょう。
なお、ブログ記事内で文字の太さを変えてリンク文字に設定しなければ、今回のカスタマイズは不要です。
コメント