リンクの色がオンマウスでゆっくり変わるようにする方法(CSSの編集を使わない編) | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。



私の場合、記事内のリンクにマウスカーソルを持って行くと、文字の色が青色から赤色に変わるようになっています。

この色の移り変わりをふわ~っとしてくれるカスタマイズを
わざめーばさん

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

で教えてくれました^^

そして、よりふわ~っとさせるべく
ふえるさん

*** CSS *** リンクに矢印を置くと「ふわっ」となるカスタマイズ

で教えてくれました^^!

ふわ~っとカスタマイズ、ありがとうございます!!


でも、お二人ともCSSの編集でのカスタマイズ方法でしたので、

私は・・・

CSSの編集デザインを使っていない方用のをお伝えしますね^^


次のコードを、HTML表示(新エディタ)orHTMLタグ(標準エディタ)orそのまま(タグ編集エディタ)のところにコピペして、それぞれ「リンク先のURL」と「リンクする文字列」をご自分のお好みに変更してください。



今まで通りの、シュパンと青から赤にすぐ変わる普通のリンクはこちら↓↓↓

リンクする文字列

<a href="リンク先のURL" target="_blank">リンクする文字列</a>



0.5秒で青色から赤色に「ふわっ」と変わるリンクはこちら↓↓↓
 IE9以前では「ふわっ」としませんので。)

リンクする文字列

<a style="transition: color 0.5s ease 0s; -webkit-transition: color 0.5s ease 0s;" href="リンク先のURL" target="_blank">リンクする文字列</a>



1秒で青色から赤色に「ふわぁ~っ」と変わるリンクはこちら↓↓↓
 IE9以前では「ふわぁ~っ」としませんので。)

リンクする文字列

<a style="transition: color 1.0s ease 0s; -webkit-transition: color 1.0s ease 0s;" href="リンク先のURL" target="_blank">リンクする文字列</a>



2秒で青色から赤色に「ふわふわぁ~っ」と変わるリンクはこちら↓↓↓
 IE9以前では「ふわふわぁ~っ」としませんので。)

リンクする文字列

<a style="transition: color 2.0s ease 0s; -webkit-transition: color 2.0s ease 0s;" href="リンク先のURL" target="_blank">リンクする文字列</a>


さぁ、ふわ~っとなりましたでしょうか^^♪




ちなみに、冒頭のわざめーばさんの記事へのリンクは0.5秒で、

ふえるさんの記事へのリンクは1.0秒にしております、ハイ^^;
 IE9以前では「ふわっ」としませんので。)


スマホやタブレットの方、何言っているかわからない記事で失礼しました~^^;




以上、パソコンワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大