アプリ版:「スタンプのみでお礼する」機能のリリースについて

ヘッダーのロゴ、
記事一覧からの詳細へ遷移するリンクについて
押下時に点線、またロゴやボタンの背景が白くなります。

index.php
<div class="btn_test">
<a href="http://適当なURL" class="btn">一覧</a>
</div>

css
.btn_test{
border: 1px solid #C32B7C;
color: #C32B7C;
background: transparent;
margin: auto;
}

元々はすでにデザインされているhtmlがあり
そのページをwordpressに移行し
スタイル等のcssはデフォルトのcssに移し替え(追加し)ています。

全てボタンや記事、ロゴについてのコードは
基本的にaタグ href=”” にしています。

なぜ、押下時に背景が白、また枠線(点線)がついてしまうのかわからずの状態です。

ご教授頂けますと大変助かります。
何卒宜しくお願い致します。

質問者からの補足コメント

  • うーん・・・

    ご指摘頂いた通り、a:active{}内に color: var(--footer--color-link);などがありましたので
    ひとまずすべてのactive内の要素は非表示にしましたが症状変わらずでした。

    wordpress自体、デフォルトでこういった現象が起きるのでしょうか?

    No.2の回答に寄せられた補足コメントです。 補足日時:2021/04/23 18:12
  • うーん・・・

    スタイルが充てられていることは確認できるのですが
    「リンクを押したとき」のスタイルも確認できるのでしょうか?

    ブラウザはGoogleCromeを使用しております

    No.1の回答に寄せられた補足コメントです。 補足日時:2021/04/23 18:18

A 回答 (3件)

GoogleCromeなら



メニューバー > 表示 > 開発 / 管理 > デベロッパーツール

で、開発ツールが表示されます。

.btn_testの直下の aタグのクラスが付加されているか、それはcssファイルの何行目で指定されているかを確認してみてください。

それと、htmlをWordPressに移行する場合、基本的にWrodPressのテーマ、cssは流用せず、一から書く方がいいと思います。
    • good
    • 0
この回答へのお礼

問題解決しました。
wordpress内のcss(テーマのcss)にて
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button)
のクラスにて
アウトラインや、バックグラウンドの色を非表示にしたところ問題解消されました。

一旦css内の記述消しましたら症状は出ませんでしたので
「やはりこの中に原因がある!」と思い複数行ずつ消しては戻しての繰り返しでたどり着けました
(かなり効率の悪い解決の仕方になりましたが...)

wandere1様の仰る通り、1からcss書けばよかったかもしれません。
如何せん初めてwordpressの中身を触りましたので流用できるものは流用しようという考えでおりました。

お忙しいところ
お付き合いいただきましてありがとうございます。

お礼日時:2021/04/23 19:44

WordPressのデフォルトcssファイルに追加したということであれば、そのファイル内でaタグを検索してみてください。



a:active {} 内に記載されたものがないかを確認してください。
クリック中はどうするか、を指定する擬似クラスです。
この回答への補足あり
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

ご指摘の通りactive内確認しまして、一通り非表示にしましたが
症状変わらずでございました。。

wordpressではこういったことは、頻繁に起こりうることなのでしょうか?

お礼日時:2021/04/23 18:26

aタグについてのスタイルの指定がどこかにあるんじゃないですか?


ブラウザの「開発ツール」等を使えば
要素毎にどういうスタイルが充てられているかわかると思うのですが。
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!