WordPressのテーマのカスタマイズでリンクの下線が消せないときにチェックすること

 WordPress でブログを立ち上げたら、やはりお洒落なテーマで自分のブログを格好良くしたいと思う人は多いと思います。できあいのものをそのまま使っているうちは問題ないのですが、少しテーマをカスタマイズしようとすると、途端にハードルが上がったりします。管理人が最初につまづいたのは、リンクの下線が消せないことでした。

「text-decoration: none;」でも消せない

 少し検索すればわかると思いますが、リンクの下線を消すには、CSS でリンクに「text-decoration: none;」を設定するだけです。ところが、テーマによってはこれだけでは下線を消せないときがあります。CSS の優先順位などを考慮していろいろ試しても消せなかったりして、結構ハマったりします。

見栄えをよくするためにリンクの下線に border-bottom を使っている場合がある

 以前のエントリー「簡単だけどWordPressのデザインに統一感をだすリンクの装飾 | Naokix.net」でリンクの見栄えを良くするために、リンク標準の下線を使わず、「border-bottom」を使うことを紹介しました。SNS での拡散を期待して自作のソーシャルボタンを設置するときに「text-decoration: none;」を設定しているにもかかわらず、勝手に下線がでてきて悪さをすることがありますが、これが原因です。要は「簡単だけどWordPressのデザインに統一感をだすリンクの装飾 | Naokix.net」でやったことの逆をすればよいだけです。

 テーマのデザインを定義している CSS をテキストエディタなどで開き、a タグに次のように設定されている部分を探してください。

下線の色などはテーマで使用しているものに置き換えて探してみてください。傾向として、リンクすべてについて設定していることが多いので、CSS の先頭のほうを探すと良いでしょう。これらを消去すれば問題は解決します。「a:hover」にも同様の設定をしていることが多いので、そちらも消去するようにしてください。

おわりに

 「簡単だけどWordPressのデザインに統一感をだすリンクの装飾 | Naokix.net」でも述べましたが、この設定はリンクの文字列をよりスタイリッシュにするためのものであり、テーマの開発者もそのつもりで設定しているはずです。ソーシャルボタンの設置の際などによからぬ動作を引き起こす原因でもありますが、CSS の優先順位に注意して、本文のリンクには同じ設定をし直してあげると良いと思います。コピーすればいいだけですからね。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP