デジタルマーケティング専門家/デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

コピペOK!CSSでリンクテキストにアニメーションを付ける11の技

 
リンクテキストにアニメーション
この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

どうも、JUNICHIです。

リンクが付いたテキストや画像にマウスを乗せた時(マウスオーバー時)、色んなアニメーション・効果があるとなんだかカッコいいサイトになった気分になりますよね。

そこで今回は、WordPressでブログを運営しているあなたのために、プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょうぜ!

 

まずは、プラグイン「Simple Custom CSS」を入れよう

CSS(スタイルシート)を直接いじってしまうと、サイトが一気に変になってしまうので、今回は本体のCSSを上書きしなくても編集ができるプラグインを入れていきます。

「Simple Custom CSS」というプラグインを使えば、WordPressのどのテーマでも、メインのスタイルシートをいじらなくても一部だけ上書きする事ができます。

※既に、JetPackというプラグインが入っていれば同じような機能「カスタムCSS」がついているので、Simple Custom CSSはインストールする必要はありません。

プラグイン「Simple Custom CSS」のインストール方法

↓プラグイン>新規追加の順にクリック
プラグインのインストール1

 

↓右上の検索窓に「simple custom css」と入力してEnterを押す。
プラグインのインストール2

 

↓図のようなものが出てくるので「今すぐインストール」をクリック
プラグインのインストール3

 

↓すぐにインストールできるので、「プラグインを有効化」をクリック
プラグインのインストール4

 

↓そうすると、「外観」のメニューの中に「Custom CSS」というメニューが追加されています。
プラグインのインストール5

 

↓「Custom CSS」という文字をクリックすると、こんな画面が出てきます。
simplecustomcss

 

Simple Custom CSSの使い方

使い方はめっちゃ簡単。

新たに追加したいCSSや、メインのスタイルシートに上書きしたいCSSのコードを大きな赤枠の部分に入力して、「Update Custom CSS」をクリックするだけ!

カスタムCSSの使い方

 

 

これで準備ができました。

あとは、今から紹介するCSSのコードを、コピペしてみましょう!

 

1)ゆっくりテキストの色が変わるリンクテキスト

a {
	color: #808080;
	text-decoration: underline;
	-webkit-transition: .8s;
	-moz-transition: .8s;
	-o-transition: .8s;
	-ms-transition: .8s;
	transition: .8s;
}

a:hover {
	color: #ffd700;
}

↓ こちらがデモ
ゆっくりテキストの色が変わるリンクテキスト

 

2)ゆっくり背景色が変わるリンクテキスト

a {
	color: #f5f5f5;
	background: #a9a9a9;
	text-decoration: none;
	-webkit-transition: .8s;
	-moz-transition: .8s;
	-o-transition: .8s;
	-ms-transition: .8s;
	transition: .8s;
}

a:hover {
	color: #f0f8ff;
	background: #ff99cc;
}

↓こちらがデモ
ゆっくり背景色が変わるリンクテキスト

 

 

3)マウスオーバー時に拡大するリンクテキスト

a {
	display: inline-block;
	color: #4169e1;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	-ms-transition: .3s;
	transition: .3s;
}

a:hover {
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	transform: scale(1.2,1.2);
}

↓こちらがデモ
マウスオン時に拡大するリンクテキスト

 

 

4)リンクテキストにアンダーラインが中央から広がる

a {
	position: relative;
	display: inline-block;
	color: #4169e1;
	padding: .4em;
	text-decoration: none;
}

a:hover {
	color: #ff69b4;
}

a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	background-color: #ff69b4;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

a:hover::after {
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}

↓これがデモ
マウスオン時にリンクテキストにアンダーラインが広がる

 

5)マウスオーバー時にリンクテキストが傾く

a.{
	display: inline-block;
	transition: .3s;
}
a:hover {
	transform: rotate(5deg);
}

↓これがデモ
マウスオン時にリンクテキストが傾く

 

6)リンクテキストが縦にくるくるっと回転する

a,
a span {
	display: inline-block;
}
a span {
	transition: .5s;
}
a:hover span {
	-webkit-transform: rotateX(360deg);
	transform: rotateX(360deg);
}

↓この場合はHTMLの記述が少し変わります。

<a href=”リンク先のURL”><span>リンクテキスト</span></a>
簡単に言うと、リンクテキストをさらに<span></span>で囲って上げる必要があります。

↓これがデモ
マウスオン時にリンクテキストがくるっと回転

 

7)リンクテキストの背景が左から現れる

a {
	padding: 0 .3em;
    text-decoration: underline;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,187,255,1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s;
}
a:hover {
	background-position: -100% 0;
    text-decoration: none;
	color: #fff;
}

↓これがデモ
マウスオン時に背景が左から現れる

 

8)リンクテキストの背景が下から現れる

a {
	padding: 0 .3em;
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,187,255,1) 50%);
	background-position: 0 0;
	background-size: auto 200%;
	transition: .3s;
}
a:hover {
	background-position: 0 100%;
	color: #fff;
}

↓これがデモ
マウスオン時に背景が下から現れる

 

9)マウスオン時にアンダーラインがフワッと出てくる

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	transition: .3s;
}

a:hover {
	color: #ff80ff;
}

a::after {
	position: absolute;
	bottom: .3em;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #ff80ff;
	opacity: 0;
	transition: .3s;
}

a:hover::after {
	bottom: 0;
	opacity: 1;
}

↓これがデモ
マウスオン時にアンダーラインがフワッと現れる

 

10)マウスオン時にアンダーラインが左から出てくる

a {
	position: relative;
	display: inline-block;
	transition: .3s;
        text-decoration: none;
}
a:hover {
	color: #ff80ff;
}

a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #ff80ff;
	transition: .3s;
}
a:hover::after {
	width: 100%;
}

↓これがデモ
マウスオン時にアンダーラインが左から現れる

 

11)マウスオン時に上下にラインが出てくる

a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	transition: .3s;
}

a:hover {
	color: #ff80ff;
}

a::before,
a::after {
	position: absolute;
	content: '';
	width: 0;
	height: 1px;
	background-color: #ff80ff;
	transition: .3s;
}

a::before {
	top: 0;
	left: 0;
}

a::after {
	bottom: 0;
	right: 0;
}

a:hover::before,
a:hover::after {
	width: 100%;
}

↓これがデモ
マウスオン時にアンダーラインが上下に現れる

 

色の変え方

基本的に以下の考え方で色を変えてもらったらOKです。

  • a { color: #0000ff ;} ⇒ マウスをオンする前の色
  • a:hover { color: #ff00ff ;} ⇒ マウスオン時の色 (hover)

この中の色のコード「#0000ff」みたいなところを好きな色のコードに変えてあげればOKです。

色のコードは以下のサイトを参考に見つけるといいですよ。

色のコードを探す

 

おまけ)リンクのある画像にマウスオン時に透過させる

a:hover img {
	opacity: 0.5 ;
	filter: alpha(opacity=50) ;	/* Ie用 */
}

img, video, object {
 max-width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom;
 display: block;
 -webkit-transition: 0.8s;
 -moz-transition: 0.8s;
 -o-transition: 0.8s;
 -ms-transition: 0.8s;
 transition: 0.8s;
}

↓実装するとこんな感じにマウスを置くとすーっと色が透過します
リンク画像サンプル

 

 

まとめ

いかがでしたか?

こんなオシャレなアニメーションが簡単にCSSにコピペで実装ができるんです。

是非これで他のサイトとちょっと差を付けて見て下さい。

 

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

Comment

  1. […] コピペOK!CSSでリンクテキストにアニメーションを付ける11の技 […]