稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

ボタンのクリック率を上げる簡単なcss

投稿日:2014年10月4日 更新日:

マウスオーバー時に少し変化がある事でクリック率を高める事が出来ます。

はじめに

画像などのボタンをマウスオーバー時に簡単な変化を加える事でクリック率を高める事ができます。

注意事項

Opacityを使うのでクロスブラウザ用にカスタマイズしなければいけません

ボタンを作ろう

まずはボタン用のhtmlを用意します。


<a href="#"><img src="画像" class="btn" /></a>

aタグに対して使うのが多い場合もありますが、今回は画像に対して作用させたいので画像にclassをつける形にしました。

cssを使おう

次にcssを作ります。


a:hover img.btn {

opacity:0.8;
filter: alpha(opacity=80);        /* IE lt 8 IE8までのバージョン */
-ms-filter: "alpha(opacity=80)";  /* if gte IE 8 IE8以上のバージョン */
-moz-opacity:0.8;                 /* FireFox */
-khtml-opacity: 0.8;              /* Safari */
zoom:1;

}

opacityの0.8や80と出ている数字は透過度80%と言う数字になります。

この数字をいじることでお好みの透過度にする事が出来ます。

サンプルで確認して下さい

透過度のサンプルを作ってみました。

https://www.moco358.com/wp-content/uploads/touka.html

90%から10%までを作ってみました。

さいごに

JavaScriptよりももっと簡単に

マウスオーバー時に少し変化を加えたいがJavaScriptを使用する場合、画像にonとoffを加える場合はon用の画像とoff用の画像を2枚用意しなければいけなかったり、マウスオーバー時に1pxや2pxだけ位置を少し動かしてボタンに動きを加えるタイプもありますが、思ったように画像の位置を動かす事が出来なかったり、レイアウトが変わってしまう場合などもございます。

それに比べて透過系の変化であれば位置を動かすわけでもないのと画像を用意しなくても済むので非常に簡単に導入する事が出来ました。

そして、この透過のcssはよく忘れるのでメモとしてブログにアップしました。

-副業で稼ぐ仕組みの作り方
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

バリューコマースアフィリエイトの登録方法

バリューコマースでアフィリエイトを始めたい方へ 関連記事: googleマップの登録方法 アフィリエイトBの登録方法 Yahoo地図に掲載する方法 もしもドロップシッピングの登録方法

画像を簡単に軽く出来るサイト

画像を軽くさせるために縮小したり解像度を低くするのは時代遅れです。 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 【2019年版】googleショッピングに掲載する方法 ECCUBE4 …

無料のお問合せフォームの作り方【FC2】

今回は無料で使えるFC2のお問合せフォームの導入方法をご紹介いたします。 関連記事: エックスサーバーからさくらサーバーにドメインを移管してみた 自動相互リンクの作り方 もしもドロップシッピングの登録 …

Yahoo!メールを複数取得する方法

1つの電話番号で複数のYahoo!メールアドレスを取得できます。 関連記事: yahooリスティング広告の申し込み方法 Yahoo地図に掲載する方法 yahooリスティング広告らくアドの利用方法 ya …

もしもドロップシッピングの登録方法

無料でドロップシッピングがはじめられるもしもドロップシッピングの登録方法です。 関連記事: A8の登録方法について 自動相互リンクの作り方 無料アクセス解析 ace-analyzerの登録方法 アクセ …

新着記事一覧

2025/06/24

エイプリルフールズ

2025/06/23

罠の戦争

2025/06/20

ニューヨークの恋人

2025/06/19

ミギとダリ

2025/06/18

ある男