ヘッダーのロゴ、
記事一覧からの詳細へ遷移するリンクについて
押下時に点線、またロゴやボタンの背景が白くなります。
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=”” にしています。
なぜ、押下時に背景が白、また枠線(点線)がついてしまうのかわからずの状態です。
ご教授頂けますと大変助かります。
何卒宜しくお願い致します。
No.3ベストアンサー
- 回答日時:
GoogleCromeなら
メニューバー > 表示 > 開発 / 管理 > デベロッパーツール
で、開発ツールが表示されます。
.btn_testの直下の aタグのクラスが付加されているか、それはcssファイルの何行目で指定されているかを確認してみてください。
それと、htmlをWordPressに移行する場合、基本的にWrodPressのテーマ、cssは流用せず、一から書く方がいいと思います。
問題解決しました。
wordpress内のcss(テーマのcss)にて
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button)
のクラスにて
アウトラインや、バックグラウンドの色を非表示にしたところ問題解消されました。
一旦css内の記述消しましたら症状は出ませんでしたので
「やはりこの中に原因がある!」と思い複数行ずつ消しては戻しての繰り返しでたどり着けました
(かなり効率の悪い解決の仕方になりましたが...)
wandere1様の仰る通り、1からcss書けばよかったかもしれません。
如何せん初めてwordpressの中身を触りましたので流用できるものは流用しようという考えでおりました。
お忙しいところ
お付き合いいただきましてありがとうございます。
No.2
- 回答日時:
WordPressのデフォルトcssファイルに追加したということであれば、そのファイル内でaタグを検索してみてください。
a:active {} 内に記載されたものがないかを確認してください。
クリック中はどうするか、を指定する擬似クラスです。
ご回答ありがとうございます。
ご指摘の通りactive内確認しまして、一通り非表示にしましたが
症状変わらずでございました。。
wordpressではこういったことは、頻繁に起こりうることなのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードプレスのプラグイン
-
外国人のコメント欄でよく、コ...
-
ワードプレスの403エラーについて
-
Adobe Express(アドビエクスプ...
-
投稿した文書の編集ができません。
-
ホームページやブログに関しま...
-
「ページにリダイレクトがあり...
-
"インターネット上のキャッシュ...
-
WooCommerceでの配送方法
-
画像ポップアップ(Lity)の使...
-
「あるサイトのリンクを踏まな...
-
ワードプレスの403Errorの消し...
-
ワードプレステーマkatawaraのCSS
-
ワードプレスのテーマ:katawara
-
ワードプレスに詳しい方に質問...
-
HPを作りたいと考えているので...
-
ワードプレスでデータの移動
-
ワードプレスで新規で新しい記...
-
WP ショートコードの編集?
-
WPにログインした状態で、自分...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードプレスで、投稿一覧ペー...
-
ブログでAA(アスキーアート)...
-
mixiにリンクを貼る方法
-
ブログの文章のどこが検索にか...
-
ブログ投稿時にタグ名を入力し...
-
Wordpressのリンク(aタグ href)...
-
mt5のブログで記事を小分けにし...
-
リンクを貼ると文字の色が勝手...
-
ヤプログ レイアウトが崩れま...
-
ジュゲムブログでのEntryの日付...
-
テプラの文字を大きくしたいで...
-
レポート2000字程度なら何文字...
-
Wordで勝手に文字サイズが変わる?
-
Gmailの表示文字を大きくする方...
-
AirPods Proをleftだけ落とした...
-
つぶれた文字
-
大学のレポート A4で1枚レポー...
-
ワードのヘッダーの文字について
-
明るい場所でのプレゼン。スラ...
-
薄く明るく柔らかいオレンジ系...
おすすめ情報
ご指摘頂いた通り、a:active{}内に color: var(--footer--color-link);などがありましたので
ひとまずすべてのactive内の要素は非表示にしましたが症状変わらずでした。
wordpress自体、デフォルトでこういった現象が起きるのでしょうか?
スタイルが充てられていることは確認できるのですが
「リンクを押したとき」のスタイルも確認できるのでしょうか?
ブラウザはGoogleCromeを使用しております