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

WPアソシエイトポストR2

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

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

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

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

リンクの見た目は普通

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

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

PC

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

モバイル

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

CSSカスタマイズ後

PC

PCで見た時のデザイン。

モバイル

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

ソースコード

/* 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

ブログにおすすめレンタルサーバーをご紹介！

カエレバ リンクをモダンにカスタマイズするCSS。【コピペOK】

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

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

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