WordPressリンク文字色のマウスオーバー変化速度を調節する簡単なCSS | LIVE YOUR LIFE

WordPressリンク文字色のマウスオーバー変化速度を調節する簡単なCSS

 

テキストリンクにカーソルを合わせたときに、色を変化させる効果を使ったページをたまに見かけます。

今回は、そんな効果を簡単なCSSを実装するだけで実現できる方法をご紹介します。

 

小技的なCSSですが、様々な場面において生かすこともできますので、ぜひとも参考までに。

 

リンク文字色の変化速度を調節する簡単なCSS

 

WordPressは『design.css』でリンク文字色やマウスオーバー時の変化色を設定することができますが、CSSに少し手を加えれば変化速度まで調節することができます。

今回はWordPressテンプレートの賢威を例にとって解説していくので、テンプレートごとに表示が異なる場合にはそれぞれの箇所にて変更を施してくださいね。

 

design.cssにコードを追記する

 

まずは、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択しましょう。

すると上の方に『サイト全体の共通設定』という項目があるので、その中にあるリンク文字のデザインにあたる部分をカスタマイズします。

当サイトでは以下のようなコードが記載されているので、ぜひとも参考までに。

 

具体的に解説していくと、『transition(意:移り変わり)』の中にある『0.3s』の部分が移り変わりにかかる時間(second)を表しており、下部にある『color』の部分はリンクの文字色を表しています。

個人的にはリンク文字色の変化があまりゆっくりすぎるのは好みではありませんが、好みに合わせて時間を設定してみてください。

 

文字色に関しても、当サイトでは『青→オレンジ』へと変化させていますが、これも自由に変更していただいて構いません。

 

最後に

 

以上、WordPressサイトのリンクがマウスオーバーされた際に、文字色が変化する速度を調整するためのCSSを解説しました。

ちょっとしたエフェクトではありますが、簡単なCSSで実装することが可能ですので、気軽に試してみてくださいね。

独自性や小さなこだわりを持つとWebサイト構築も楽しくなるので、ぜひとも積極的にカスタマイズしていきましょう。

 

MAIL MAGAZINE

 

 

     
公開日:2017/02/07

コメントを残す

サブコンテンツ

TO THE TOP