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

リンクテキストにアニメーション

この記事を書いている人 - WRITER -

色んな人にブログ運営の事を教えている。得意なのはブログ集客・SNS活用法・SEOライティング。
※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。 ⇒詳しいプロフィールはこちら 

JUNICHI

どうも、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)ゆっくりテキストの色が変わるリンクテキスト

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

 

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

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

 

 

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

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

 

 

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

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

 

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

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

 

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

↓この場合はHTMLの記述が少し変わります。
<a href=”リンク先のURL”><span>リンクテキスト</span></a>
簡単に言うと、リンクテキストをさらに<span></span>で囲って上げる必要があります。

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

色の変え方

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

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

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

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

色のコードを探す

 

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

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

 

 

まとめ

いかがでしたか?

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

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

リンクテキストにアニメーション

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

 

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

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

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

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

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

ebook

ブログ集客と収益化がオンラインで学べる!!
ブログマーケティングスクール

『集客』さえできれば、ほぼどんなビジネスも成功させることができます。

そしてブログは、現在のWEBメディアの中でも、最も強力な『集客メディア』として位置づけられています。

ブログマーケティングスクールでは、コンテンツマーケティング・SEOを意識したWEBマーケティングがオンラインで学べるスクールです。

BMSバナー

 

ブログマーケッターJUNICHI
×
OPEN CAGEコラボWordPressテーマ

あなたは今自分のサイトがスマートフォンからどれだけの人が見ているか知っていますか?

実は、2016年6月現在、6割~8割の人がスマホからブログを読んでいます。

なので、スマホから見た時に「分かりやすい」「使いやすい」「便利」というWordPressテーマが必要です。

『新しいスマホビュー時代を作ろう!』

がコンセプトの『STORK(ストーク)』を是非お試しください。

STORK

ABOUTこの記事をかいた人

色んな人にブログ運営の事を教えているブログ集客の専門家。得意なのはブログ集客・SNS活用法・SEOライティング。※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。