カエレバのリンクのボタンをCSSジェネレーターで大きくした。

こんにちは!GWが終わりそうになりゾンビと化している空くうかい海@kuukai13です。

shop-150362_640

連休も終わりつつある今日このごろ
「もう働きたくねえ」「会社いきたくねえ」「金持ちになりてえ」悩んでいませんかそこのアナタ!

貴方にとってもイイゲームをご紹介します。。。

それがコチラ(*´゚∀゚`)ノ!

スクリーンショット 2014 05 06 18 27 34

どうですか?コレで貴方も億万長者
バーチャルなんて気にせずにドンドン借金してください!

え!?どこで買っていいかワカらない?

ありがとう!貴重な意見をありがとう!
ボクもそう思っていたので調べてみたよ!!

※ちなみに今回はPCのみの表示です。

※適応になりました(*´゚∀゚`)ノ

SponsorLinks

カエレバのボタンを変えよう

カエレバ(ヨメレバ)のことはもうブロガーさんならばお馴染み
になっているので説明はご不要だと思います。

そんなカエレバのショップリンクを変更してみようと
調べてみました。

そこで調べた結果
コチラの記事がとても参考になりました。

5分で完了!カエレバのリンクを目立つボタンにしてクリック率を上げる方法【CSSのコピペでOK】| らふらく^^ ブログで飯を食う

らふらくさんがご紹介していました、サイトからCSSボタンを製作します。

CSS Button Generator

「CSS Button Generator」というサイトから自分好みにCSSボタンを作っていきます。

スクリーンショット 2014 05 06 18 48 12

このサイトからボタンの色、フォントサイズや高さ、幅など簡単な調整が可能です。

自分の満足できる出来になれば
その下にあるCSSを丸々コピペします。

スクリーンショット 2014 05 06 18 53 01

完成させます

最後はこのコピーしたCSSを自分のテーマ
に適応させるだけなのですがそのまま貼ってはいけませんよ。

この四角に囲まれた部分を
ショップリンクを貼ります。

「.shoplinkamazon, .shoplinkkindle, .shoplinkrakuten {」
こんな感じです。

スクリーンショット 2014 05 06 18 53 01

その他多少調整はしています。

.shoplinkamazon, .shoplinkkindle, .shoplinkrakuten {
	font-size:20px;
	font-family: Tahoma,hiragino maru gothic pron,meirio,arial,helvetica,osaka,"MS PGothic",sans-serif;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #ffaa22;
	padding:5px 20px; 
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
	background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23) );
	background-color:#ffec64; 
	color:#333333;
	display:inline-block;
	text-shadow:1px 0px 0px #ffee66;
 	-webkit-box-shadow:inset 1px 0px 0px 0px #fff6af;
 	-moz-box-shadow:inset 1px 0px 0px 0px #fff6af;
 	box-shadow:inset 1px 0px 0px 0px #fff6af;

}.shoplinkamazon:hover, .shoplinkkindle:hover, .shoplinkrakuten:hover {
	background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color:#ffab23;
}.shoplinkamazon:active, .shoplinkkindle:active, .shoplinkrakuten:active {
	position:relative;
	top:1px;
}
.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a {
    color:black;
    text-decoration : none!important ;
}
.booklink-link2 {
    margin-top:20px!important; 
}

そんでもって、できたカエレバのリンクはこちら。

これであなたも億万長者 是非購入ください!ww

まとめます

まずはいつも使わせて頂いている
カエレバのかん吉さん&今回いろいろ真似させていただいたらふらくさん、
ありがとうございました!

カエレバのボタンについてはいろいろ調べてみるとCSSのコードがそのまま掲載されたり
ボタン自体ダウンロードできたりと色々あります。

そのままコピーとも考えましたがそれならばなんにも
自分の為にもなりませんのでコチラを選びました(ジェネレーターって時点でコチラも簡単なのですが。。(^_^;)

まだ未完成感はありますがCSSムッチーな僕が作った割には
出来に満足しています。

これからも改善しながらチラチラと弄っていきたいと思います。

それではまた〜


スポンサードリンク

コメントを残す

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