スタイルシートで、個別にリンク色を変更

調べるとすぐに出てくるけど、スタイルシートで、個別にリンク色を変更

 

スタイルシートに下記のように記入

[html]
a.koko:link {color:#6b6b36;}
a.koko:visited {color:#6b6b36;}
a.koko:hover {color:#ff0000;}
[/html]

リンク色変更く表示

とりあえずこれで変わる。

 

ブロックごと変えたい時は

[css]
#aflink a:link{color:#23527c;}
#aflink a:visited{color:#23527c;}
#aflink a:hover{color:#23527c;}
[/css]

として

[css]
<div id="aflink"><a href="http://yahoo.co.jp/">yahoo</a></div>
[/css]

とdivで括れば、いけると思う

 

あと、リンクの背景色を消したい時は

[css]
#aflink a:hover{
color:#23527c;
background-color: transparent;}
[/css]

とすれば、消える。別に使う必要ないんけど、普段のリンクにバックグランドカラーを付けていて、そのまま楽天アフィリを貼ったら、当然のように楽天アフィリのリンクにもバックグランド色が付く。

 

楽天アフィリエイトの規約通り、アフィリコードは変更していないけど、バックグラウンドカラーが付いたままで、アカウント無効を喰らった。これしか原因が考えられない。

 

最近の楽天アフィリエイトは原因を教えてくれないけど、色々変更したけど2回ともこの部分を変更していなくてアウトだった。

 

ちなみに3回目の今は、この部分を修正してアカウント無効にはなっていない。

divで横並びで表示する方法

tableタグを使うとレスポンシブ時に表示がずれたりすることがあるのでdivで横並びにする方法。

 

[css]

■左1ブロック■
★左2ブロック★
●フロートの下のブロック●

[/css]

 

■左1ブロック■
★左2ブロック★
●フロートの下のブロック●

 

 

html内でmarginやpaddingを表示

分かっている人には簡単なんだろうけど、私はいつも検索してしまう・・・。

 

html的にみると見栄えなど問題あるかもしれないけど、特定部分を思ったように表示はさせやすいのでよく使っている。

まあ、知っていれば簡単。

 

[html]

<p style="padding: 8px; border: 1px solid;">padding 8px</p>
<p style="margin-top: 50px; border: 1px solid;">上にマージン</p>
<div style="color:#000066; font-size:20px; border-left: 3px solid #0066FF; padding:0px 0px 0px 10px; margin:10px;">要素に直接スタイルシートを指定01</div>
<div style="color:#FFFFFF; font-size:16px; text-align:center; border:1px solid #999999; background-color:#FF6600; margin:10px;">要素に直接スタイルシートを指定02</div>

[/html]

これだけなんですけどね。 こんな感じに表示されます。

 

1.

padding 8px

 

2.

上にマージン

 

3.

要素に直接スタイルシートを指定01

 

4.

要素に直接スタイルシートを指定02

 

1 2