リンクの色がオンマウスでゆっくり変わるようにする方法

リンクの色がオンマウスでゆっくり変わるようにする方法


アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのCSS編集用デザインでは、リンクにマウスカーソルを持って行くと文字の色がからに変わるようになっています。

通常、この色は、マウスカーソルを当てた瞬間にパッと一瞬で変わりますが、今回は、これをゆっくり「ふわっ」と変わるようにする方法をご紹介します。

CSSを編集

今回は、CSS3で導入されたトランジションという機能を利用します。

では、早速ユーザーCSSの末尾に以下のように記述して保存して下さい。

ユーザーCSSについてわからない場合はこちらを参照してください

/* リンク色がゆっくり変わるようにする */
a{
  transition: color 0.5s ease 0s;
  -webkit-transition: color 0.5s ease 0s;
}

0.5s」の部分はどのくらいの時間をかけて色が変わるかを設定する部分です。

0.5s」は「0.5秒」のことです。

ここは、短すぎると効果が見えませんし、あまり長いと鬱陶しいですから、0.3~0.5秒くらいがいいような気がします。

記事タイトルやページ切替ボタンにも適用したい

アメブロのCSS編集用デザインでは、記事タイトルやページ切替ボタンは(初期状態で)オンマウスで色が変わるようになっていませんので、上記コードで色がゆっくり変わるようにしても何の変化もありません。

もしこれらにも同様の効果を適用したい場合は、以下のコードをユーザーCSSの末尾に追加して、オンマウスで色が変わるように設定して下さい。

.skinSimpleBtn:hover,.skinArticleTitle:hover {
  color: #FF3366
}

背景色を変えることも可能

また、この効果は、文字色だけでなく背景色を変える際などにも使えますので、例えばヘッダーメニューのボタンの色を「ふわっ」と変えたりすることも可能です。

#headerMenu a{
  transition: background-color 0.5s ease 0s;
  -webkit-transition: background-color 0.5s ease 0s;
}

ちなみに、本ブログのヘッダーメニューもこの効果を取り入れています(0.3秒設定です)ので、どんな感じか確認したい方は、ヘッダーメニュの上でマウスカーソルをあちこち動かしてみて下さい。

以上、リンクの色がオンマウスでゆっくり変わるようにする方法をご紹介しました。

よかったら試していて下さいね。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん トップページ