ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

CSSのコピペ10秒でなんということでしょう!カエレバのカスタマイズCSS晒します!

   

140325_1903

Amazonや楽天、Yahoo!ショッピング(ヤフオク!)を紹介するとき、どんな方法で紹介していますか?

もしかしてデフォルトのまま表示していませんか?それだとクリック率が極端に低すぎて全然報酬が上がりませんよ!ボクもアフィリエイト始めたころはデフォルトのまま(テキストか画像オンリー)だったんですけど、まー全然クリックされない(笑)

クリックされないから報酬にも上がりませんでした・・・ASPの管理画面みても「ゼロ」のままで飛び立たない状態でしたね。

スポンサーリンク

 

カエレバのブックマークレットが秀逸すぎる

ヤバイ・・・全然報酬が上がらないよ・・・と思ってネットで商品の紹介方法などいろいろ見ていたところかん吉さんが作成した「カエレバ」と巡り会えました!!

カエレバに関してはコチラ
【カエレバ】アマゾン・楽天・ヤフーのアフィリリンクが一括作成・表示できる神ブログパーツ

アフィリエイトのIDを事前に登録してさえすれば、一括でアフィリリンクを作成できるこのカエレバに感動しちゃいました^^

オススメしたいモノがあればこのカエレバを使用しているんですけど・・・やっぱりデフォルトだとパッとしない(失礼ですね)。多くの人がそのままで使用しているので差別化が全然出来ていないんですよ!!

 

カエレバのデフォルト表示

140323_2101

ボクは基本的にコンテンツと広告はキッパリ分けたい派です!!なので背景が白なのは嫌なんですよね・・・それに各種リンクがとっても小さくて見にくいです。コレだとクリックされずにスルーされる確率が高いです。ただでさえ広告は嫌煙されちゃうので。

 

デザインはamazlet風(改)-1を使用して、「Amazon」「楽天市場」「Yahooショッピング」「ヤフオク」を表示させています。

赤い点線があるのはGoogle Chromeの拡張機能を使用しています。カエレバとは関係ありません。
NoFollow】リンクがnofollow属性となっているか赤枠で表示されるChrome Extension

 

カエレバをCSSでカスタマイズ

カエレバの見栄えをCSSでカスタマイズしてみました!!それがコチラ


なんということでしょう~
(大改造!劇的ビフォーアフターっぽく)

【背景色】
まず、背景をグレーにしたことでここは広告ですよ!とアピールしました。これで興味ない人はすんなりスルーできると思います。

そして背景が付いたことで画像がより見やすくなりましたね。画像が引き立つ感じがしています^^

【テキスト】
デフォルトだとテキストが小さいですが、これもCSSで調整しています。ボクのサイトの基本フォントサイズは16pxなのでそれよりも小さい15pxで設定しています。タイトルが大きいと自然と「posted with カエレバ」が小さくなるので目立たなくなりました。

 

【アフィリリンク】
アフィリリンクをボタン表示にしてみました。各サイトのサイトカラーを基本にしてみました。「楽天市場」と「Yahoo!ショッピング」「ヤフオク!」は 似たような色ですが(笑)

「Yahoo!ショッピング」のテキストは他のに比べて横幅なんですよね。なのでこのテキストに会うようなボックスを作成して調整するのに手間取りました。フォントサイズを変えればいいのでは?と思ったんですけど、フォントサイズはすべて揃えたいというこだわりがありまして・・・

 

カエレバのスマホ表示

やっぱり最近のアクセス数を見てみるとスマートフォンからの流入が多いですね。通常のカエレバですと、ちょっとレイアウト崩れがあったんですけど、ボクのは”大体(笑)”大丈夫です。

使用しているスマホ幅によってはアフィリボタンが切れていることがありますが、ご愛嬌です

140323_2101

 

カエレバのカスタマイズCSS

こちらがボクが使用しているカエレバのCSSです。ちなみに使用しているデザインは「amazlet風-2(CSSカスタマイズ用)」ではなく、「amazlet風(改)-1」です。

CSSの各要素に関してはご自身でお調べになって下さい。。。

 

まとめ

いかがでしたでしょうか?試してみてくれたでしょうか?一手間加えるだけでこんなにも見栄えが良くなりますね。

ボクはCSSもまっっっったく詳しくなくカエレバのこの見栄えができるまで・・・5時間くらいかかりました(笑)

1か所イジっては確認してどこが反映されているかを延々とやり続けてとうとう完成しました。いや~疲れましたね。。。

そのままでも十分通用する?と思いますが、自分なりにイジって個性を出し他のカエレバと差別化していきましょう!!

 

参考サイト

カエレバをカスタマイズする上で参考にさせていただいたサイトです。ありがとうございます。

カエレバのAmazonや楽天へのリンクを一括で簡単に「ボタン化」する方法
カエレバブックマークレットの見た目をCSSでカスタマイズしてみた

 - アフィリエイト


  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。

関連記事

medium_481267425
トレンドアフィリエイト(アドセンス)はアクセス(PV)が命!アクセスが見込めるネタを探そう!

トレンドアフィリエイトはその名前の通りトレンド(流行)に関する記事を書くことによ …

131219_2101
【カエレバ】アマゾン・楽天・ヤフーのアフィリリンクが一括作成・表示できる神ブログパーツ

カエレバはアマゾン・楽天市場・yahoo!ショッピング・ヤフオクなどのアフィリリ …

140306_2202
アフィリエイトで大卒初任給並みの報酬を得るまでに至ったこと

ボクがアフィリエイトの存在を知ったのは2013年1月でした。それまではインターネ …

140712_1304
アフィリエイト報酬を一括管理・チェックできる便利ツール「楽あふぃり」

毎日アフィリエイト報酬のチェックするのは楽しみの1つですよね?でもいろいろなAS …

131110_2301
プラグインなしでmoreタグ部分にアドセンス広告を挿入する方法

Google AdSenseの配置でクリックされやすい効果的な配置場所として「記 …

1340848303_e94625bbfd_z
パクリコンテンツをチェックする「コピペリン」がコスパに優れている!

アフィリエイトを行っていく上でずーっと悩みのタネでもある記事のパクリ、コピペ。 …

credit: Gonzalo Merat via FindCC
【重要】ゼロからアフィリエイトを始める人が最低限やったほうがいいこと

アフィリエイトといえば、本業の傍らお小遣いを稼ぐというイメージがあると思います。 …

medium_302498792
「記事中」のアドセンス広告をPCとスマホで切り替えるレスポンシブ対応法!

何度かこのブログでアドセンス広告をデバイスごとに切り替える方法やカテゴリーごと、 …

medium_2373914931
nend(ネンド)を使って1週間経った報酬報告!とアドセンスも

スマホ専用アフィリエイト広告のnend(ネンド)に登録してから1週間が経ちました …

140206_1802
超話題のスマホ専用アフィリエイト広告 nend(ネンド)を試してみた!コレは来る!

スマートフォンがこれでもか!と普及し始めて、スマホファーストと言ってもいいくらい …