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 タグに次のように設定されている部分を探してください。
1 2 3 4 5 | a { text-decoration: none; border-bottom: 1px solid #333; padding-bottom: 1px; } |
下線の色などはテーマで使用しているものに置き換えて探してみてください。傾向として、リンクすべてについて設定していることが多いので、CSS の先頭のほうを探すと良いでしょう。これらを消去すれば問題は解決します。「a:hover」にも同様の設定をしていることが多いので、そちらも消去するようにしてください。
おわりに
「簡単だけどWordPressのデザインに統一感をだすリンクの装飾 | Naokix.net」でも述べましたが、この設定はリンクの文字列をよりスタイリッシュにするためのものであり、テーマの開発者もそのつもりで設定しているはずです。ソーシャルボタンの設置の際などによからぬ動作を引き起こす原因でもありますが、CSS の優先順位に注意して、本文のリンクには同じ設定をし直してあげると良いと思います。コピーすればいいだけですからね。
Comment