- 4395.スタイルシートの上書き - としき 15/04/05-16:06
- 4396.Re: スタイルシートの上書き - めざら 15/04/09-07:20
- 4397.Re^2: スタイルシートの上書き - としき 15/04/09-23:49
- 4399.Re: スタイルシートの上書き - としき 15/05/16-22:11
- 4400.Re^2: スタイルシートの上書き - めざら 15/05/27-23:16
- 4396.Re: スタイルシートの上書き - めざら 15/04/09-07:20
うちの掲示板よりもこちらのほうが、スタイルシートに詳しい人が多そうなんで
質問します。
とあるサイトのスタイルシートが気に入らないもので、ユーザ側（ブラウザ側）の
スタイルシートで上書きすることを考えています。ソースは以下のような感じです。
<div class="title"><span>関連記事</span></div>
<ul class="clearfix">
<li class="clearfix">
<div class="ttl"><a href="〜" class="link-box"><span class="column-ttl">タイトル</span></a></div>
</li>
（以下略）
ここで、最後の部分、<a>の中に<span>があるので、そちらのほうのclassで
フォントなどが修飾されてしまいます。
やりたいことは、それを解除して、<a>での修飾を復活させるというか、リンクが
visitedかそうでないかの区別がつくようにしたいということです。
適切な検索語がわかれば自分でも調べられるのですが、そういうものがわからない
場合はGoogle先生も無力ですし。
ということで、どなたかアドバイスをいただけると幸いです。
> やりたいことは、それを解除して、<a>での修飾を復活させるというか、リンクが
> visitedかそうでないかの区別がつくようにしたいということです。
単純にユーザースタイルシートに同じクラス名で擬似クラスを
.column-ttl a:visited { … };
…のようにしてしてやればよいのではないでしょうか．
あっ！違うか，aの中にspanがあるのですよね．これは厄介だな．完全にcolumn-ttlを無効化するしかないのか．
こういう問題は，環境がひどく影響するので，ローカルで実験しようとするとかなり厄介ですよね．差し支えなければ実際のURIを教えていただくのが近道と思いますけれど．
自分の場合，表示が気にくわないページは行かないか，スタイルシートを切るかしちゃうので，ユーザースタイルシートを設定するような面倒なことってしたことなかったから勉強になりますけどね．^^
さすがに、３日前に踏んだリンクは覚えていますが。
半年前に踏んだリンクは覚えていなくて、しばらく読み進めて「あれ、これは読んだことがあるぞ」となるわけです。
で、その後を覚えていないようなら再び読むのですが、もう読んだことがあるということで閉じるような場合の、ほんの十数秒から数十秒がもったいないと感じるわけです。
表示よりもコンテンツのほうが優先されるで、なかなかそういうわけにも行かないんですよ。なので、次善の策として
こういうことをしているわけですがね。
スタイルシートを切って再表示する手間も惜しいというか。
全く差し支えありません。
雑誌の東洋経済のサイトです。
参考URIとしては、例えば
ttp://toyokeizai.net/articles/-/51296
とか。
普通に表示したときは、これの一番下のほうの部分です。
半年前に踏んだリンクは覚えていなくて、しばらく読み進めて「あれ、これは読んだことがあるぞ」となるわけです。
で、その後を覚えていないようなら再び読むのですが、もう読んだことがあるということで閉じるような場合の、ほんの十数秒から数十秒がもったいないと感じるわけです。
> 自分の場合，表示が気にくわないページは行かないか，
表示よりもコンテンツのほうが優先されるで、なかなかそういうわけにも行かないんですよ。なので、次善の策として
> スタイルシートを切るかしちゃう
こういうことをしているわけですがね。
スタイルシートを切って再表示する手間も惜しいというか。
> 差し支えなければ実際のURIを教えていただくのが近道と思いますけれど．
全く差し支えありません。
雑誌の東洋経済のサイトです。
参考URIとしては、例えば
ttp://toyokeizai.net/articles/-/51296
とか。
普通に表示したときは、これの一番下のほうの部分です。
自己解決しましたが。
イマイチ、釈然としないというか。
いや、私のスキルの低さが原因とは推測できるのですが。
私がメインで使っているFirefoxでは、以下のスタイルでうまく行きました。
a span.column-ttl{color:#0000ff ! important;}
a:visited span.column-ttl{color:#800080 ! important;}
ポイントは、spanタグのclass名をきちんと書くところ。
これが
a span{〜}
みたいなタグだけだったり、逆に
a .column-ttl{〜}
みたいなclass名だけだとうまく行きません。
というか、これらがうまく行かなかったおかげで、あさっての方角にさまよう羽目になってしまったというか。うん、ヨーロッパからインドに行くのに、西に向かってはダメだよ。
あと、もうひとつ気になったこと。
Firefoxでは、リンクの右クリックから新しいタブで開いたらすぐに、visitedの色になりました。でも、IEでは、新しいタブで開いた直後はvisitedの色になりませんでした。これはそういうものなのかなぁ。
イマイチ、釈然としないというか。
いや、私のスキルの低さが原因とは推測できるのですが。
私がメインで使っているFirefoxでは、以下のスタイルでうまく行きました。
a span.column-ttl{color:#0000ff ! important;}
a:visited span.column-ttl{color:#800080 ! important;}
ポイントは、spanタグのclass名をきちんと書くところ。
これが
a span{〜}
みたいなタグだけだったり、逆に
a .column-ttl{〜}
みたいなclass名だけだとうまく行きません。
というか、これらがうまく行かなかったおかげで、あさっての方角にさまよう羽目になってしまったというか。うん、ヨーロッパからインドに行くのに、西に向かってはダメだよ。
あと、もうひとつ気になったこと。
Firefoxでは、リンクの右クリックから新しいタブで開いたらすぐに、visitedの色になりました。でも、IEでは、新しいタブで開いた直後はvisitedの色になりませんでした。これはそういうものなのかなぁ。
> イマイチ、釈然としないというか。
そうなんですよね。どうもよくわからない。
あまり気合を入れて試してみる時間がなかったので、結局何のお役にも立てずに申し訳ありませんでした。
> ポイントは、spanタグのclass名をきちんと書くところ。
うーん、それは試してみていなかったように思います。
classを指定するところで、同時に要素をきっちり書くということはですね、わたし日常的に一切していないんですよ。習慣的にclassしか指定しないので。
そう考えると、自分はスタイルシートの本質を理解していないということかもしれませんね。ファイル群全体に適用するスタイルではなく、特定の部分だけに適用するスタイルをstyle要素で指定していたり、へたするとstyle属性で指定していたりする。
> あと、もうひとつ気になったこと。
それは、そういうものでしょうね。
ブラウザの挙動を気にしてCSSを書いていたら、きりがないので気にしません。