WPアソシエイトポストR2 の見た目を変更【2020年版】

当サイトでは商品リンクに WPアソシエイトポストR2 というプラグインを利用しています。

WPアソシエイトポストR2 はシンプルで操作性がよく、Amazonや楽天の物販を行うのであれば必須のプラグインです。同様のプラグインで「Rinker」もあります。個人的な意見ですが、シンプルな使いやすさならWPアソシエイトポストR2、高機能で多用途ならRinkerが良い。どちらのプラグインも無料なので実際に使い比べて自分にあったものを使いましょう。

公式サイトWPアソシエイトポストR2
公式サイトRinker

ここではWPアソシエイトポストR2の外観を変更するカスタマイズを行います。

WPアソシエイトポストR2のカスタマイズは以前にも記事化していますが、前回はスキンを利用したものでFTPによるファイル操作が必要な複雑なものでした。今回は追加CSSを利用しコピペだけで簡単にカスタマイズします。

過去のカスタマイズWPAP レイアウトをカスタマイズ

WPアソシエイトポストR2の標準デザインでも使用には問題ありません。ですが画像とリンクボタンを大きく表示して少しでもクリック率が上がるよう変更しました。ビフォー・アフターは以下の通り。

標準：PC表示

カスタマイズ後：PC表示

標準：スマホ表示

カスタマイズ後：スマホ表示

WPアソシエイトポストR2 カスタマイズ【2020年版】

カスタマイズは追加CSSにコードをコピペするだけ。カラーなど好みで変更してご使用ください。なお当サイトのコードを利用してカスタマイズする際は自己責任にてお願いいたします。

コピペするコードは以下の通り。

/*アソシエイトポストカスタマイズ*/
/*メインの枠_グリッド*/
.wpap-tpl-with-detail {
	display: grid;
	grid-template-rows: 75px 20px 20px 135px;
	grid-template-columns: 35% 62%;
	grid-column-gap:3%;
	place-items: center;
	max-width:100%;
	padding: 1em;
	border:solid 2px #0268b7!important;
	border-radius:10px;
}
/*画像スペース・サイズ*/
.wpap-tpl-with-detail .wpap-image {
	grid-row: 1 / 5;
}
.wpap-tpl-with-detail .wpap-image img {
	max-width: 100%;
	max-height: 250px;
}
/*タイトルスペース*/
.wpap-tpl-with-detail .wpap-title{
	grid-row: 1 / 2;
}
/*著作者スペース*/
.wpap-creator{
	grid-row: 2 / 3;
}
/*発売日スペース*/
.wpap-release{
	grid-row: 3 / 4;
}
/*タイトル色サイズ*/
.wpap-tpl-with-detail .wpap-title a {
	border-bottom:none;
	color:#0268b7;
	font-size:120%;
}
/*リンクのサイズ並び*/
.wpap-tpl-with-detail .wpap-link {
	grid-row: 4 / 5;
	display: flex;
	flex-direction: column;
	width:100%;
}
/*リンクの装飾*/
.wpap-tpl-with-detail .wpap-link a{
	padding:10px 15px;
	margin-bottom:5px;
	border-radius:10px;
	border-bottom:none;
	text-align: center;
}
/*リンクの色 Amazon・楽天・ヤフー*/
.wpap-tpl-with-detail .wpap-link a.wpap-link-amazon {
	background: #FFB36B;
}
.wpap-tpl-with-detail .wpap-link a.wpap-link-rakuten {
	background: #EA7373;
}
.wpap-tpl-with-detail .wpap-link a.wpap-link-yahoo {
	background: #51A7E8;
}
/*リンク　マウスオーバー*/
.wpap-tpl-with-detail .wpap-link a:hover{
	opacity:.5;
	font-weight:initial;
}
/*スマホ用*/
@media only screen and (max-width: 767px){
	.wpap-tpl-with-detail {
		grid-template-rows: 250px 100px 15px 15px 135px;
		grid-template-columns: 100%;
		max-width:500px;
		margin-right:auto;
		margin-left:auto;
	}
	.wpap-tpl-with-detail .wpap-image {
		grid-row: 1 / 2;
		margin-left:auto;
		margin-right:auto;
	}
	.wpap-tpl-with-detail .wpap-title {
		grid-row: 2 / 3;
		font-size:100%;
		margin:1em
	}
	.wpap-creator{
		grid-row: 3 / 4;
		font-size:70%;
		text-align:center;
	}
	.wpap-release{
		grid-row: 4 / 5;
		font-size:70%!important;
		text-align:center;
	}
	.wpap-tpl-with-detail .wpap-link  {
		grid-row: 5 / 6;
	}
	.wpap-tpl-with-detail .wpap-link a{
		width:100%;
	}
}

以上で完成です。

このカスタマイズは別記事「WPAP価格表示と掲載元情報を非表示」とセットでの使用を前提に作っています。価格/掲載元情報を非表示にしない場合は、下部に表示されることになります。

関連記事WPAP価格表示と掲載元情報を非表示

リンクボタンの文字は別でカスタマイズが必要です。こちらもクリック率に影響があるようなので気になる方はチェックしてみてください。

関連記事WPAPリンクボタンの文字を変更

サンプル画像ではセール期間のコピーが入っていますが、こちらも別カスタマイズとなります。