収益化テクニック

WPアソシエイトポストR2のモダンなCSS[コピペOK]

WPアソシエイトポストR2

WPアソシエイトポストR2は、Amazonアソシエイト楽天アフィリエイト、Yahooショッピングのショップリンクを貼るためのWordpressのプラグインツールです。

WordPressのエディタ内に機能として追加されるため、別のWebサイトなどに行くことがなく、記事作成の一環としてショップリンクを貼り付けることが可能となります。

 

また、作成したコードのリンクも短い文字列で済むため、テキストエディタで編集するときもごちゃごちゃせず、非常に使い勝手の良いプラグインツールです。

物販アフィリエイトをメインにやる場合は、ぜひインストールしておきたいプラグインの一つです。

リンクの見た目は普通

ただし、リンクの見た目はまずまずといったところなので、CSS(スタイルシート)でカスタマイズすると、よりクリック率の良いアフィリエイトリンクを作成することが可能となります。

ワードプレスアソシエイトポストR2標準の見た目

PC

WPアソシエイトポストR2でリンクを生成し、サイトにそのまま貼り付けた時の見た目です。

モバイル

標準の見た目でも、リンクはボタンですし、必要な情報が綺麗に表示されています。

トノ君
ブログとかでよく見るやつだな!
タコ博士
ブロガー・アフィリエイターで使っている人は多いよ。

CSSカスタマイズ後

PC

PCで見た時のデザイン。

モバイル

スマホで見た時のデザイン。

・リンクボタンを大きく表示し、押しやすくする
・ボタンの色は強すぎないパステルカラー
・可能な限りシンプルな表示(価格表示や、「Amazonの情報を掲載」は非表示とした)
・スマホで表示された時にボタンを縦に並べて、全てのボタンを押しやすくした
・背景を白に。
・ボーダー(囲み線)はシンプルで色は薄めな1重線
クリック率を測定し、可能な限り高くなるようにデザインしました。
月間40万PVのWebサイトで測定していますので、それなりの効果が見込めるかと思います。
トノ君
シンプルな感じになったな。
タコ博士
必要のない情報は非表示にしたよ。

ソースコード

/* WordPress Associates Post */
.wpap-tpl.wpap-tpl-with-detail {
  width: 100%;
  max-width: 100%;
}
@media(min-width: 768px) {
  .wpap-tpl.wpap-tpl-with-detail {
    padding-bottom: 14px !important;
  }
}
.wpap-tpl.wpap-tpl-with-detail .wpap-image {
  float: none;
  margin-right: 0;
}
.wpap-tpl.wpap-tpl-with-detail .wpap-image img {
  margin: 0 auto;
}
.wpap-tpl.wpap-tpl-with-detail .wpap-title {
  font-size: 14px;
  text-align: center;
}
@media(min-width: 768px) {
  .wpap-tpl.wpap-tpl-with-detail .wpap-title {
    font-size: 18px;
  }
}
.wpap-tpl.wpap-tpl-with-detail .wpap-price {
  text-align: center;
  opacity: 0.6;
  font-size: 12px;
  margin-top: 8px;
  display: none;
}
.wpap-tpl.wpap-tpl-with-detail .wpap-link {
  margin-top: 16px;
  display: block;
}
@media(min-width: 768px) {
  .wpap-tpl.wpap-tpl-with-detail .wpap-link {
    display: flex;
    margin-left: -5px;
    margin-right: -5px;
  }
}
.wpap-tpl.wpap-tpl-with-detail .wpap-link a {
  height: 40px;
  width: 100%;
  position: relative;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}
.wpap-tpl.wpap-tpl-with-detail .wpap-link .wpap-link-amazon {
  background-color: #ffb36b;
}
.wpap-tpl.wpap-tpl-with-detail .wpap-link .wpap-link-rakuten {
  background-color: #ea7373;
}
.wpap-tpl.wpap-tpl-with-detail .wpap-link .wpap-link-yahoo {
  background-color: #51a7e8;
}
.wpap-tpl.wpap-tpl-with-detail .wpap-link a:not(:first-child) {
  margin-top: 10px;
}
@media(min-width: 768px) {
  .wpap-tpl.wpap-tpl-with-detail .wpap-link a:not(:first-child) {
    margin-top: 0;
  }
  .wpap-tpl.wpap-tpl-with-detail .wpap-link a {
    margin: 0 5px !important;
  }
}
.wpap-tpl.wpap-tpl-with-detail .wpap-link a:after {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
.wpap-tpl.wpap-tpl-with-detail .wpap-note {
  display: none;
}

ソースをコピペして、外観→テーマエディタからstyle.cssの編集をします。

コピペする時に、style.css全てを間違えて上書きしないよう気をつけてください。

また、ソースコードは分かりやすいように一番下に記述するのが良いと思います。

まとめ

以上、WPアソシエイトポストR2のモダンなCSSスタイルでした。

カエレバのCSS

takotonoアフィリエイト

CONTENTS 1 カエレバ・ヨメレバ2 最近はRinkerを使用しています3 過去のカエレバのリンクのcssを調整し…

全く同じ見た目で、カエレバのCSSも書きました。

WPアソシエイトポストR2とカエレバを同時に使っていて、見た目を揃えたいという場合、便利です。

最新情報をチェックしよう!

LATEST新着記事