Q&A
「こうなってしまった」の通常時って、そのリンクを押したあとではないすか？ であれば、その動作は訪問済みなので正しい動作です。 キャッシュを消さない限りは「:visited」の表示になるのでそれだけ確認です。
CSSでボタンを作成しました。
訪問済みのリンクの色を変更したいと思い、a:visitedをCSSに追加記述しましたが正しく表示されません。
下記ボタンのコードで「こうなってしまった」の表示になりました。
記述や順序におかしな点がありましたらご指摘いただき「こうなってほしい」の表示にしたいです。
どうぞ宜しくお願い致します。
.BUTTON_1 { background: #F9CFD3; background-image: -webkit-linear-gradient(top, #F9CFD3, #F9A9AE); background-image: linear-gradient(to bottom, #F9CFD3, #F9A9AE); border-radius: 20px; color: #FFFFFF; font-family: '游ゴシック', 'Yu Gothic', sans-serif !important; font-size: 40px; width: 98%; font-weight: 100; padding: 47px 40px 40px 40px; text-shadow: 1px 1px 20px #FFFFFF; text-decoration: none; display: inline-block; cursor: pointer; } .BUTTON_1:hover { color: #FFFFFF; background: #F9A9AE; background-image: -webkit-linear-gradient(top, #F9A9AE, #F9CFD3); background-image: linear-gradient(to bottom, #F9A9AE, #F9CFD3); } .BUTTON_1:visited { color: #EC779F }
ご回答ありがとうございます。 キャッシュの削除は何度も試していますが、だめです。もう少し試行錯誤してみます。ご指摘ありがとうございますm(__)m
wordpressのテーマとなるとカスタムCSSの記述がHTML内でテーマ用のCSSの上に来ているとか、テーマのphpでスタイル設定されていてどうやっても上書きされるからphpを変えなきゃいけないとか、原因を特定できないですね。。。テーマ名を提示したほうが、同じテーマを使用している人からのアドバイスを期待できるかもしれません。テーマのソースをここに公開するのはなんか権利とかでダメな場合も多々ありますので。完全公開OKならソースを提示していただけるといいかなと思います。
回答2件
0
ベストアンサー
すでにそのリンクをクリックしたからではないでしょうか？
キャッシュの削除orスーパーリロードでどうでしょう？
※擬似クラスの記述順は:link→:visited→:hover→:activeです
投稿2018/08/30 04:06
編集2018/08/30 06:06
総合スコア1284
以下のHTMLでliveweave.comに最初にコピペして開いたときは問題ありませんでしたが，
「href="https://teratail.com"」としてみたところ，文字色が固定になりました
（いつも訪問しているからですね）
<a class="BUTTON_1" href="">
button
</a>
ご回答ありがとうございます。
キャッシュの削除は何度も試していますが、だめです。
記述順も正しく直してからキャッシュ削除して表示しましたが変わらずでした。
もう少し試行錯誤してみます。
ありがとうございます。
一度，リンク先を他のページ（「example.com」とか）にしてみてはどうでしょう
リンク先を変更しましたが、違う問題が発生しました。
word press を使用しているのですが、テーマのカスタマイズでリンクのvisited色を設定でき、
今現在だと、カスタムCSSで指定したvisited〈 テーマ自体のvisited になっているようです。
.BUTTON_1に!important;の記述を追加しましたがだめでした。
テーマ自体のvisited色を無効にしたり、上回るCSS追記を.BUTTON_1 に行えばよいということなのでしょうか…？
ご質問ばかりですみません。
開発者ツールの使い方は分かりますか？
「ご利用のブラウザ名 開発者ツール 開き方 使い方」などで検索してみてください
maisumakunさんへのコメントでは，プライベートウィンドウで開いた状態で，自身が設定した「:visited」ではなく，デフォルトの「:visited」が有効になったとのことですが，意味・定義的にそれはおかしいです．（訪れた記録がない状態で「:visited」にはならないです）（もし開発者ツールで確認済だったらすみません）
単純にそのテーマが持つ，デフォルトのリンク色が出ているものと思われます
色だと状況が把握しづらいので，以下のCSSを試してみてください
a::after{background: palegreen;}
a:link::after{content: "(:LINK)";}
a:visited::after{content: "(:VISITED)";}
a:hover::after{content: "(:HOVER)";}
a:active::after{content: "(:ACTIVE)";}
「::after」は見慣れないかもしれませんが，擬似要素というものです．上記のCSSではこれを使い，各擬似クラスの状態をcontentプロパティで示すことができます
尚，importantが効かないのはセレクタが間違っているか，CSSファイルが何かの理由で壊れたか，<link>タグのhrefの値がおかしくなっているか，CSSファイルの更新に失敗しているか，何らかのJSプラグインに邪魔されているか，一時的な不具合か，．．．などと考えられます
もし，該当部分のCSSだけに異常が出ているなら，自分がどこをどう書き換えたかを思い出し，その部分に間違いがないか確認してください．全角文字か半角文字かの違いでも動かなくなることはあります
ちなみに，
<link href="自作のcss">
<link href="デフォルトのcss">
という順番で書いている場合も，
自作CSSがデフォルトCSSによって上書きされるので注意してください
もしくはphpやjavascriptなどの処理でスタイル設定されてるとか。
お二方ともお付き合いいただきありがとうございますm(__)m
開発ツールは使用できます。
phpやjavaなどは使用しておりません。
テーマは「SiteOrigin Unwind」を使用しています。
いただいたCSSを記述して更新してみたところ、
.BUTTON_1 のデフォルト時 (:LINK)
.BUTTON_1 にカーソルをあてた時 (:HOVER)
.BUTTON_1 につけられたリンクを訪問し戻ってきたとき (:LINK) ←テーマが持つデフォルトのDark Accent Color があたっている
↑この状況を開発ツールでみると擬似要素の順番は以下のようになっています。
a:hover::after {
content: "(:HOVER)";
}
a:link::after {
content: "(:LINK)";
}
a::after {
background: palegreen;
}
プライベートウィンドウでも、テーマが持つデフォルトのDark Accent Color があたっている状態です。
>プライベートウィンドウでも、テーマが持つデフォルトのDark Accent Color があたっている
自作CSSが読み込まれていないということでしょうか？（→パスの確認へ戻る）
プライベートウィンドウでも、テーマが持つデフォルトのDark Accent Color があたっている
自作CSSが読み込まれていないということでしょうか？
>そういうことだと思われます。
コードの確認は何度もしているので間違いはないと思うのですが、
カスタムCSSに記述した.BUTTON_1の前後にもCSSの記述を多数しているので、なにかが影響しているのかもしれません。
色々試しているのですがまだ原因をつきとめられない状況なので、もう一度.BUTTON_1自体から作り直してみようと思います。
お付き合いいただきありがとうございましたm(__)m
コードの確認は、一度間違った視点でスルーしてしまうと結構後の方まで気づかないものです。
先に僕たちが指摘した「CSSへのリンク記述の順番」「パスの確認」について、具体的にコードを提示していただけるともう少し深く考えられるかと思います。
0
:visitedと:hoverでは詳細度（CSSのかかる「強さ」）が同じですので、後に書いたほうが優先されます。
:hover優先でかけたいなら、:hoverを:visitedより後にしてください。
投稿2018/08/30 03:56
総合スコア145184
ご回答ありがとうございます。
早速試したのですが、通常時 #EC779F、hover時 #FFFFFF、visited時 #EC779F という表示になってしまいました。
visitedの順序をすべての位置に入れ替えて試してみたのですが、どれも「こうなってほしい」の表示になってくれません。
visitedをどの位置におけばよいのでしょうか…
リンクを訪問して:visitedになってしまったものをもとに戻すのは、CSSではできないです。プライベートブラウザなどで見るのも1つの方法です。
プライベートウィンドウを忘れていました、ありがとうございます。
早速試したところ、visited時に指定していない色があたりました。
word press を使用しているのですが、どうやら
カスタムCSSで指定したvisited〈 テーマ自体のvisited になっているためだと思われます。
CSSの記述を下記のよう修正してもだめでした。
.BUTTON_VTC3:visited {
color: #EC779F !important;
}
この場合、何が原因と考えられますでしょうか？
ご質問ばかりで申し訳ございません。
あなたの回答
tips
プレビュー
