広告 AFFINGER WordPress

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

\ 使い回しできるWPテーマ /

AFFINGERの機能を見る

●デザイン簡単、SEO対策と広告収入UPの機能が標準装備

 

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

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

 

\ Rinker標準 /

Rinker標準フォーム

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

 

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

 

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

 

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

 

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

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

 

[blogcard url="https://for-men.jp/"]

 

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

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

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

訪問ユーザーのモバイル・パソコン・タブレット率

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

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

 

ココをカスタマイズ

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

 

\ Before|Rinker標準 /

Rinker標準フォーマット

 

\ After !! /

Rinkerの表示をカスタマイズ!AFFINGER用

 

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

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

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

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

 

ココをカスタマイズ

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

 

\ Before|Rinker標準 /

Rinker標準フォームだと「で探す」文言が切れる

 

\ After !! /

Rinkerカスタマイズ後は「で探す」文言入れても綺麗に表示される

 

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

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

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

ココがポイント

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

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

 

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

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

 

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

 

ul.yyi-rinker-links {
padding: 0!important;
}

div.yyi-rinker-contents img{
max-width:100px;
}

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;
}}

 

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

Anker
¥3,590 (2024/03/29 06:13:32時点 Amazon調べ-詳細)

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

 

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

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

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

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

 

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

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

・Twitterアカウント:@Bearface18

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

 

\ 使い回しできるWPテーマ /

AFFINGERの機能を見る

●デザイン簡単、SEO対策と広告収入UPの機能が標準装備

 

-AFFINGER, WordPress