![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ヘッダーのロゴ、
記事一覧からの詳細へ遷移するリンクについて
押下時に点線、またロゴやボタンの背景が白くなります。
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ランキング
-
ブログでAA(アスキーアート)...
-
STRONGタグ
-
MYRSSのようにHTMLサイトのRSS...
-
レポート2000字程度なら何文字...
-
大学のレポート A4で1枚レポー...
-
テプラの文字を大きくしたいで...
-
ライブドアブログの個別記事の...
-
つぶれた文字
-
FC2で文字の色が元に戻らない
-
Wordでのレポート、文字数行数...
-
Wordで勝手に文字サイズが変わる?
-
12ptと12pxの違いですが、12pt...
-
薄く明るく柔らかいオレンジ系...
-
エクセルの改行のエンター
-
文字サイズ
-
スケジュールのブログパーツを...
-
SeeSaaブログの記事の文...
-
背景色が黒って見にくいですよね。
-
「Andoroidスマホ、Gmailで 文...
-
謎の文字記号 これどうなって...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ブログでAA(アスキーアート)...
-
オススメのブログサイトで
-
URL貼り付け
-
SEO(タイトル・H1・コピ...
-
検索避けタグ・・・
-
mixiにリンクを貼る方法
-
アメブロの日付を消す方法
-
リンクを貼ると文字の色が勝手...
-
ブログに書いたURLをリンクさせ...
-
liveboor blog タグクラウド設置
-
ブログカスタマイズ:hタグ変更...
-
ヤフーブログへのテーブル挿入
-
コメントにリンクをつけたい
-
ヤプログ レイアウトが崩れま...
-
ジュゲムブログでのEntryの日付...
-
アフェリエイトのリンクの貼り...
-
記事の本文だけリストタグの間...
-
FC2ブログをはじめてみました
-
goo ブログで 左サイドバーが...
-
fc2ブログの"ユーザータグ"に...
おすすめ情報
ご指摘頂いた通り、a:active{}内に color: var(--footer--color-link);などがありましたので
ひとまずすべてのactive内の要素は非表示にしましたが症状変わらずでした。
wordpress自体、デフォルトでこういった現象が起きるのでしょうか?
スタイルが充てられていることは確認できるのですが
「リンクを押したとき」のスタイルも確認できるのでしょうか?
ブラウザはGoogleCromeを使用しております