livedoor ナレッジ

バナーや文字などにカーソルを合わせると動いたり、文字の色が変化するようにしたいです。

素材屋さんがリンク集で使われているように、
「カーソルを合わせるとバナーや文字が反応して引っ込む（？）」ようにしたいのですが、ライブドアブログでもできるのでしょうか？　
文字の色が変化するような仕掛けもあるようですが、もしこれらができるようであれば方法を教えてください。

お手本さん

キョロさん。ご質問ありがとうございます。

管理画面で、カスタマイズ/管理　→　デザインの設定 →　カスタマイズ　→　スタイルシート（CSS） と進んで、出てきた文字列の内容を変更します。

念のため、内容をctrl＋Aで全て選択され、ctrl+Cでコピー、ワードパットにペーストし、保存されておいて下さい。
これでスタイルシートのバックアップとなります。

下記のような部分を探されてみて下さい。

a{color:#cc0001;text-decoration:none;}
a:link{color:#cc0001;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#cc0001;text-decoration:none;}

a　は文字。
a:link　はリンク。
a:visited　は訪問済みリンク。
a:hover　はマウスカーソルを載せたときのリンクです。

color:#cc0001;　は文字の指定です。
http://www.htmq.com/color/index.shtml
↑こちらで色がわかります。#000000;のような感じで好きな色を指定できます。

text-decorationは文字の飾りです。
text-decoration:underline;　とすれば、下線が引かれます。
text-decoration:none;　は飾り無しです。
text-decoration:line-through　は打消し線です。


このような感じで、a:linkと、a:hoverの形式を変えればマウスカーソルを載せた時に、いろいろな変化をさせることができます。

スタイルシートを知れば画像を入れたり変化させる事も可能です。

また、
position:relative; top:1px; left:1px;
を入れれば、リンクする文字や画像を動かすことができます。

a{color:#cc0001;text-decoration:none;}
a:link{color:#cc0001;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#cc0001;text-decoration:none;position:relative; top:1px; left:1px;}

という感じで。

a:link　などの指定は色々な場所にあります。

例えば、タイトルの文字は、
#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#fff;text-decoration:none;}

で指定してあります。


このように個別に指定してあるところは、個別に変更する必要があります。

スタイルシートを変更したら、スタイルシートを再構築してサイトをご確認下さい。

表示が崩れたりしたら、バックアップしたスタイルシートに戻してください。


もしわからないことがありましたら、この質問のコメント欄にコメントをされて下さい。
詳しい方からより良い回答が寄せられると思います。