<< April 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< 最近はお弁当生活 | main | Twitterはじめました >>

ハムからみんなへお願い&お知らせ

相互リンク募集!
ハムにメールを送る時はここから
07月05日(Sat)

スポンサーサイト

一定期間更新がないため広告を表示しています

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • -
  • -
  • by スポンサードリンク

11月07日(Wed)

CSSでするリンク装飾

今日はちょっとCSSの説明。
ブログの装飾にお役立てくださいな!

僕のブログは、通常リンクにすると、
下線がついた紺色の文字になっていて、
さらに、マウスカーソルを文字の上に持っていくと
水色の背景に白色の文字に変化するように設定してある。

これは
<a href="〜">の部分のCSSで

a:hover{ 〜 }

っていう指定があるからできているのであ〜る。

例えばこんなのがある。ちょっと色を変えてみる。
そして、マウスカーソルが上にのったら下線を消すようにしよう。

マウスカーソルをのせてみて(その1)。

どうでしょう?変わったでしょうか?

コレはこんなソースになっています。
(CSSのみ抜粋して書いてます。)

a,
a:visited {
color:#ff0000;
background:#fff;
text-decoration:underline;
}
a:hover {
color:#0000ff;
background:#fff;
text-decoration:none;
}


「a:hover」の時に「text-decoration:none;」ってすると
下線が消えるんですよ。

背景の色を変える方法もあります。

マウスカーソルをのせてみて(その2)。

マウスカーソルをのせてみて(その3)。

これはどうなっているかというと、
その2
a,
a:visited {
color:#fff;
background:#ff0000;
text-decoration:underline;
}
a:hover {
color:#0000ff;
background:#fff;
text-decoration:none;
}


その3
a,
a:visited {
color:#fff;
background:#000099;
text-decoration:underline;
}
a:hover {
color:#fff;
background:#0000ff;
text-decoration:none;
}


皆さんも自分のブログをカスタマイズをするときの
参考にしてみてくださいね!

JUGEMテーマ:コンピュータ

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


07月05日(Sat)

スポンサーサイト

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • 12:09
  • -
  • -
  • by スポンサードリンク

【i2i】SEO対策ツール ロリポップ NetMile 見ると得する『CMサイト』
コメント
コメントする









この記事のトラックバックURL
トラックバック
categories
archives
recent comment
recent trackback
friend links
link list
あわせて読みたい
search this site.
tag cloud search
others
  • RSS1.0
  • Atom0.3
powered
みんなのブログポータル JUGEM
sponsored links