
ヘッダーのロゴ、
記事一覧からの詳細へ遷移するリンクについて
押下時に点線、またロゴやボタンの背景が白くなります。
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ランキング
-
ブログのプレビュー画面が表示...
-
ホームページで集客する場合た...
-
ワードプレスアドレスの固定ペ...
-
Googleアドセンス
-
ワードプレスは、ドメイン作った後
-
外国人のコメント欄でよく、コ...
-
ブログの画像サイズについて。...
-
ホームぺージの移管について。...
-
ワードプレスでドメイン2つも作...
-
「ページにリダイレクトがあり...
-
サーバーについて
-
1つのサーバー契約で複数のドメ...
-
Adobe Express(アドビエクスプ...
-
ワードプレステーマkatawaraのCSS
-
ワードプレスのテーマ:katawara
-
ホームページやブログに関しま...
-
WPにログインした状態で、自分...
-
"インターネット上のキャッシュ...
-
ワードプレスのパーマリンク設...
-
ワードプレスCocoonで作ったペ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLを使って文字を・・・
-
ホームページを作っています。
-
MYRSSのようにHTMLサイトのRSS...
-
htmlを少しだけ教えてください。
-
Voxでカテゴリー別に記事をわけ...
-
思い通りに表示されないんです。
-
FC2ブログをはじめてみました
-
リンクの張り方。
-
リンクの仕方
-
アメブロ 文字リンクタグ公開...
-
mixiにリンクを貼る方法
-
livedoorブログの本文でタグが...
-
Seesaa ブログのカスタマイズ ...
-
Wordpressのリンク(aタグ href)...
-
STRONGタグ
-
リンクするのに不正文字
-
リンクを貼ると文字の色が勝手...
-
So-netブログCSS★記事をテーブ...
-
ブログのプロフィール欄が太字...
-
Seesaaブログの記事タグで表示...
おすすめ情報
ご指摘頂いた通り、a:active{}内に color: var(--footer--color-link);などがありましたので
ひとまずすべてのactive内の要素は非表示にしましたが症状変わらずでした。
wordpress自体、デフォルトでこういった現象が起きるのでしょうか?
スタイルが充てられていることは確認できるのですが
「リンクを押したとき」のスタイルも確認できるのでしょうか?
ブラウザはGoogleCromeを使用しております