[WordPress] twentyfifteenでa要素の下線を消す方法

WordPressにパッケージされているテーマ「twentyfifteen」を使ってみました。左サイドメニューとメインコンテンツのシンプルな2カラム構成で使いやすそうです。個人的には一つ前のバージョン「twentyfourteen」は3カラムで使いにくかったので、今回は使いやすそうなテンプレートで嬉しいです。

スタイルシートを上書きして使うため、子テーマを作成してデザインを開始したところ、下記のように設定してもリンクの下線が消えませんでした。解決策が見つかりましたので記事にしておきます。

Contents

1 自作の子テーマのスタイルシート
2 twentyfifteenのstyle.css
3 自作の子テーマのstyle.css

自作の子テーマのスタイルシート

childのstyle.css

a,a:link,a:hover,a:visited{
text-decoration:none;
}

a,a:link,a:hover,a:visited{

text-decoration:none;

}

「a:hover」のマウスオン時には下線が消えます。
background-colorを設定し、マウスを持っていくと色も変わります。
何故か、aの「text-decoration:none;」だけが効きません！
何でだぁ？？？
何かのプラグインが効いてしまっているのか？
全てのプラグインを停止・・・それでも改善せず。
しばらく試行錯誤。
もしかして、これボーダー？？？

テンプレートのstyle.cssの中を覗いてみました。
ありました。予想的中。

twentyfifteenのstyle.css

style.css

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a,
.pingback .comment-body > a {
border-bottom: 1px solid #333;
}

.entry-content a,

.entry-summary a,

.page-content a,

.comment-content a,

.pingback .comment-body > a {

border-bottom: 1px solid #333;

}

ということでこれを子テーマで上書きしてしまえば良いですね。

自作の子テーマのstyle.css

childのstyle.css

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a,
.pingback .comment-body > a {
border-bottom: 0px solid #333;
}

.entry-content a,

.entry-summary a,

.page-content a,

.comment-content a,

.pingback .comment-body > a {

border-bottom: 0px solid #333;

}

これでうまく下線を消すことができました。
うーん。デフォルトの「border-bottom: 1px solid #333;」は紛らわしい。
「text-decoration:none;」で設定してあるとの思い込みで時間を無駄に浪費してしまいました。
関連記事

SearchLight