Amazon、楽天、Yahooショッピングの商品リンクをまとめてサクッと作成出来るプラグイン「WPアソシエイトR2」のCSSをカスタマイズする方法のメモです。
プラグインのヘルプに載っている方法と、プラグインが出力するCSSを停止して、自分のCSSに含める方法の2パターン紹介します！
目次
アフィリエイトリンクの作成は「WPアソシエイトポストR2」が便利！
当ブログではAmazonアソシエイトの公式プラグインである「Amazon Associates Link Builder」を使っていたのですが、2020年3月に利用停止になるということで、商品リンクの作成を「WPアソシエイトポストR2」に切り替えました。
Amazon、楽天、Yahooショッピングの商品リンクをまとめて作成出来る上、ブロックエディターにも対応していて管理画面から離れることなくサクサクと商品リンクを作成できます。
使い方についてはこちらの記事を参考にしてください▼
WPアソシエイトポストR2のCSSカスタマイズ
それでは、ここからはWPアソシエイトポストR2で作成する商品リンクのCSSをカスタマイズしていきます。
前提として、デザインは全て「標準」で作成したものになります。
テーマフォルダに「wpap-****.css」を作成する方法
WPアソシエイトポストR2では、テーマフォルダ直下に「wpap-****.css」というルールでCSSファイルを作成すると、管理画面からCSSを選択出来るようになります。
作成したCSSファイルをアップロードすると、WPアソシエイトポストR2の「スキンCSS」設定から作成したCSSファイルを選べるようになります。
（上の画像ではwpap-yosiakatsuki.cssをテーマフォルダに作成した例になります。）
作成したCSSにはWPアソシエイトポストR2で作成する商品リンクのスタイルを記述しておく必要があります。
「基本レイアウトは別ファイルで、カスタマイズしたい部分だけ作成したCSSに書く」という形ではないので注意してください。
プラグインに含まれているCSSをコピーして必要箇所を修正するか、「標準」デザインしか使わないようであれば後述するサンプルCSSを使ってみてください。
プラグインが出力するCSSを停止して、独自CSSにスタイルを含める
Sass(SASS,SCSS)を使っている場合は、CSSファイルを分けずに、最終的に1つにまとめてしまいたいと思うかもしれません。（僕はこの考えです）
そうすると、プラグイン側から出力されるCSSが不要になるため削除しておきます。
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'wp-associate-post-r2' );
}, 11 );後は独自のCSSに商品リンク用のスタイルを追加しましょう。
WPアソシエイトポストR2 サンプルCSS
それでは最後に、上の画像のような見た目になるサンプルCSSを紹介します。
商品リンクの挿入の時に「標準」を選んだ場合のスタイルです。
スマートフォンでは縦表示、タブレット・PCでは横並びに表示するイメージで作成しています。
.wpap-tpl {
padding: 1em;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.wpap-image {
max-width: 150px;
margin-right: auto;
margin-left: auto;
}
.wpap-title {
margin: 1em 0 0;
font-size: 1.1em;
font-weight: 700;
line-height: 1.3;
}
.wpap-creator {
margin-top: 0.5em;
color: #999;
font-size: 0.8em;
}
.wpap-price {
margin-top: 0.5em;
font-weight: 700;
color: #222;
}
.wpap-date {
margin-left: 0.5em;
color: #999;
font-size: .8em;
font-weight: 400;
}
.wpap-release {
font-size: 0.8em;
}
.wpap-link {
margin: 1em 0 0;
text-decoration: none;
}
.wpap-link > a {
display: block;
position: relative;
padding: 0.25em;
margin-top: 0.25em;
border-radius: 4px;
color: #fff;
font-weight: 700;
text-decoration: none;
text-align: center;
}
.wpap-link-amazon {
background-color: #f89400;
}
.wpap-link-rakuten {
background-color: #be0000;
}
.wpap-link-yahoo {
background-color: #d14615;
}
.wpap-note,
.wpap-service {
margin-top: 1em;
color: #999;
font-size: 0.8em;
text-align: right;
clear: both;
}
@media (min-width: 600px) {
.wpap-tpl {
padding: 1.5em;
}
.wpap-image {
max-width: 150px;
margin-right: 1em;
float: left;
}
.wpap-title {
margin-top: 0;
}
.wpap-link {
margin: 0;
}
.wpap-tpl-with-detail .wpap-link {
display: flex;
}
.wpap-link > a {
margin-right: 0.5em;
padding: 0.25em 1.5em;
}
.wpap-link > a:last-child {
margin-right: 0;
}
}
使用するテーマによってはpタグの余白がうまく効かない場合もあるかもしれません。
そのような場合は.wpap-tpl .wpap-titleのようにうまく詳細度を調整してみてください。
その他、商品タイトルや値段部分に色を入れていないので、お好みに合わせて色をつけてみても良いかもしれません。
追記：楽天で検索した場合のスタイルも調整しました。HTMLがガラッと変わるので泣きたくなりました。
ではまた。