monogrow|ときめくモノと共に暮らし成長する。

monogrow

WordPress AFFINGER

Rinker × AFFINGER|物販リンクのクリック率を上げるCSSカスタマイズ!

更新日:

物販リンクのクリック率をあげたい、収益化を目指すブロガーなら当然考えるはずです。

Huuuub

物販アップに有益な情報があっても、カスタマイズの知識がないから、思ったとおりの表示にならない・・。

 

プロブロガー・アフィリエイターの方々の有益な情報を収集するだけで、実装できなければ意味がありません。

自己流カスタマイズを繰り返していましたが、どこかしら不具合が発生してしまう・・。

 

Huuub

そんな時に手を差し伸べてくれたのが、for menを運営するくまさん。

くまさんが運営するfor menはこちら

 

今回ご紹介するのは、当ブログ用のRinkerカスタマイズ情報になります。

AFFINGERのRinkerカスタマイズ情報が少ない、追加文言を入れると文字切れしてしまうと嘆いていた方は、ぜひ試してみてください。

Huuub

くまさんの力をお借りして、AFFINGER使いのためのRinkerのカスタマイズができました!

 

\ 当ブログ使用WPテーマ /

AFFINGERの情報を見る

AFFINGERに興味がある方はこちら!

 

Rinker|クリック率があがる物販リンク

Rinkerは商品リンクが簡単に貼れるだけでなく、プラグインを導入するだけでレスポンシブの広告デザインを表示させることが可能です。

 

\ Rinker標準 /

※商品リンク Rinker(リンカー)公式サイトはこちら

 

そのままでも十分美しいデザインですが、Twitterでクリック率が上がるカスタマイズ情報があるとやってみたいと思うもの。

 

Rinkerスマホ表示カスタマイズで物販アップ!

 

クリック率が高いボタン文言追加検証!

 

Huuuub

有益な情報を収集しても、カスタマイズが出来ないから活かせない・・

そんな時に手を差し伸べてくれたのが、SANGOのカスタマイズで有名なくまさんでした。

 

【SANGOを自分でカスタマイズ】Rinkerのデザインを変えてみる

 

PC・タブレット|Rinker標準 → カスタマイズ後の表示

Huuub

悩んだのはボタン表示を2つ並び2列表示にするか、3つ横並びにするか。

パソコンだと正直どちらの表示でもいいと思ったんですが、気になるのはiPadなどのタブレットで見たとき。

そんなに比率は高くありませんが、約6%の方がタブレットから読みにきてくれています。

手に持った状態で見た場合、物販リンクの表示が大きすぎないように今回は横並びにしてもらいました。

 

ココをカスタマイズ

  • 「で探す」文言追記状態で、物販ボタンを横並びにする
  • ボタンカラーを優しい色合いに変更
  • 表示画像を小さくする
  • テキストリンクの色をブルーへ変更

 

\ Before|Rinker標準 /

 

\ After !! /

 

スマホ|Rinker標準 → カスタマイズ後の表示

Huuub

スマホからの訪問者は6割近く!だからこそ表示にはこだわりたい。

Rinker標準デザインだと、「で探す」文言を追加した場合文字切れを起こしてしまうところがネックになっていました。

ここはプロブロガーの方が推すデザイン、横幅いっぱい表示に変更してもらうことに。

 

ココをカスタマイズ

  • 「で探す」文言追記状態での文字切れをなくす
  • 物販ボタンを幅いっぱいに修正
  • 物販ボタンの余白の余白をつくる

 

\ Before|Rinker標準 /

 

\ After !! /

 

Rinker × AFFINGER|クリック率を上げるCSSカスタマイズ

Huuub

AFFINGERを利用している、当ブログのRinker CSSカスタマイズです。

今回実装した環境は以下の通り。

ココがポイント

CSSカスタマイズ実装環境: AFFINGER5 WING EX/子テーマJET使用

設定やプラグインによっては、うまく表示されない可能性があります。

 

CSSコードを簡単に実装する方法は、WordPress標準機能の追加CSSに入れるか、プラグイン使用(Simple Custom CSSなど)がおすすめ。

追加CSSの使い方はくまさんのサイトで、詳しい使い方の確認ができます。

 

Huuub

カスタマイズは自己責任でお願いします!
バックアップは必ず事前にとっておきましょう。

 

div.yyi-rinker-contents {
margin: 0 0 1.5em;/*外側上の余白を削除*/
border: none;/*外側の枠線を削除(余計な部分)*/
box-shadow: none;/*影を削除*/
}
div.yyi-rinker-contents div.yyi-rinker-box{
border:4px double #CCC;/*二重枠線*/
}
/* 商品タイトル リンク色変更 */
div.yyi-rinker-title a {
color: #1a62af!important;/*通常時の色*/
font-weight: bold;
}
div.yyi-rinker-title a:hover {/*ホバーした時の色*/
color: #e16d15!important;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
margin-bottom: 0!important;
}
/* rinker ボタン高さを44pxに */
div.yyi-rinker-contents ul.yyi-rinker-links li {
font-size: .9em;
letter-spacing: .1em;
margin: 6px 10px 6px 0px;
padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
height:44px;
line-height:44px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
color: white!important;
opacity: 1;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
opacity:0.9;
}
/* ボタン色変更 */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
background: #ffb745; /* 背景色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
background: #d35c53; /* 背景色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
background: #65adf3; /* 背景色 */
}
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
width: 100px;
min-width: 100px;
padding: 0;
margin-right: 10px;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
width: auto;
}
/*商品タイトル・詳細・ボタン*/
div.yyi-rinker-contents div.yyi-rinker-info {
width: 100%;
}

/* スマホサイズのみ適用 */
@media screen and (max-width:767px) {
div.yyi-rinker-contents div.yyi-rinker-box{
display:block;
}
/* 画像を中央そろえ */
div.yyi-rinker-contents div.yyi-rinker-image{
margin-left:auto;
margin-right:auto
}
div.yyi-rinker-contents ul.yyi-rinker-links li{
text-align:center;
width: 100%;
margin: 6px 0px;
}
/* rinker 商品詳細(文字とボタン部分)幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: 95%;
margin: 0 auto;
text-align: center;
}
/*メーカー名・価格・日付部分*/
div.yyi-rinker-contents div.yyi-rinker-detail {
padding-left: 0;/*余計な余白を削除*/
}
div.yyi-rinker-contents div.yyi-rinker-detail div.price-box {
font-size: .5em;
}
/*値段部分*/
div.yyi-rinker-contents div.yyi-rinker-detail div.price-box .price {
font-size: 2em;
margin: 5px;
display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
width: 230px;
min-width: 140px;
}}

/*スマホボタン表示中央*/
@media (max-width: 420px) and (min-width: 321px){
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0;
}}

 

実際のリンクはこちらです

※カスタマイズは変更となる可能性があります。

 

Rinkerカスタマイズまとめ|AFFINGER × くまさん

稼ぐためのWPテーマと言われているAFFINGERは、SEO対策と広告収入UPの機能が標準装備されています。

Huuub

そのAFFINGERに、更に物販クリック率アップのカスタマイズを実装!

当ブログ用Rinkerカスタマイズにご協力いただいたくまさん、ありがとうございました!

 

Bear face|くまさんってこんな人!

・くまさんプロフィール: Bear Faceはこんな人

・Twitterアカウント:@Bearface18

カスタマイズはSANGO中心ですが、他テーマでも使える吹き出しクリエイターの使い方、商品レビューに役立つアイキャッチ画像の作り方などの情報も発信されてます。

 

\ 当ブログ使用WPテーマ /

AFFINGERの情報を見る

稼ぐための最強WPテーマ!

 

関連
AFFINGER5 WING 使用レビュー|更に使いやすく便利に!

\稼ぐためのWPテーマ!/AFFINGERを購入する 今話題のマイクロコピー付きボタンもワンクリック!   A ...

続きを見る

関連
1ヶ月で1万PVから2万PVになった理由を考察|記事を書き続ける大切を知る!

2017年11月からブログを書きはじめ、9ヶ月目で1万PVを達成。 そして10ヶ月目には、PV・収益をさらに伸ばすことが ...

続きを見る

関連
AFFINGERに商品リンクプラグイン「Rinker」を導入|カエレバから移行

長くお世話になってきた商品リンク カエレバからRinkerに移行しました。 カエレバと違い、Rinkerはプラグインとし ...

続きを見る

 

 こちらの記事も読まれています!

  • この記事を書いた人
Huuub

Huuub

関西在住のフリーランサー、Huuubです。 「ときめくモノと共に暮らし成長すること。」をモットーにブログを書いています。 3万PV/月達成しました! ◆ 詳細 →プロフィールはこちら

-WordPress, AFFINGER

Copyright© monogrow , 2018 All Rights Reserved.