WP Associate Post Amazonアソシエイト・楽天アフィリエイトかんたん導入プラグイン

ヘルプ

公開日:

Amazonや楽天のリンクにcssによる装飾のためのclassをつける方法

WPアソシエイトポストでは、アフィリエイトリンクはWordPressの投稿画面で以下のようなショートコードになっており、htmlによる表記ではありません。

[wpap service="amazon" type="detail" id="4883379248" title="WordPressレッスンブック HTML5&CSS準拠"]

このショートコードは、ユーザー側が見る閲覧画面では以下のようなhtmlになります。

展開されてhtmlになった例
<div class="wpap-tpl wpap-tpl-detail wpap-tpl-amazon">
<a href="http://amzn.to/2cbc5Tn" class="wpap-link" target="_blank" data-click-tracking="Amazon 4883379248 WordPressレッスンブック HTML5&amp;CSS準拠">
<div class="wpap-image"><img src="https://images-na.ssl-images-amazon.com/images/I/51fSgpPKVWL.jpg" alt="WordPressレッスンブック HTML5&amp;CSS準拠"></div>
<p class="wpap-title">WordPressレッスンブック HTML5&amp;CSS準拠</p>
<div class="wpap-creator">エビスコム</div>
<div class="wpap-price">3,024円<span class="wpap-date">(09/11 22:12時点)</span></div></a>
</div>

上記の大外の「div」の部分に任意のclassをつける方法を紹介します。

Amazonや楽天のリンクにcssによる装飾のためのclassをつける方法

WordPressの投稿画面で以下のようにショートコードに「class="●●●"」を記載すればOKです。)
※「class="●●●"」を記載する場所は「wpap」以降であればどこでもかまいませんが、前後の属性の間には必ず半角スペースを入れてください。

class名を「any-name」とした例
[wpap class="any-name" service="amazon" type="detail" id="4883379248" title="WordPressレッスンブック HTML5&CSS準拠"]
classを付与し、展開されてhtmlになった例
<div class="wpap-tpl wpap-tpl-detail wpap-tpl-amazon any-name">
<a href="http://amzn.to/2cbc5Tn" class="wpap-link" target="_blank" data-click-tracking="Amazon 4883379248 WordPressレッスンブック HTML5&amp;CSS準拠">
<div class="wpap-image"><img src="https://images-na.ssl-images-amazon.com/images/I/51fSgpPKVWL.jpg" alt="WordPressレッスンブック HTML5&amp;CSS準拠"></div>
<p class="wpap-title">WordPressレッスンブック HTML5&amp;CSS準拠</p>
<div class="wpap-creator">エビスコム</div>
<div class="wpap-price">3,024円<span class="wpap-date">(09/11 22:12時点)</span></div></a>
</div>

このように、好きなclass名をつけることで、アフィリエイトリンクのcssによるデザイン変更の自由度が増しますので、ぜひご利用いただければ幸いです。

ちなみに、cssの「id」に関しては、商品IDと属性名が重複してしまうためと、idはcssのルール上ひとつのページに1つの設置しか許されないため機能として実装しておりません。
何卒ご注意いただきますようよろしくお願いいたします。

ショートコードの変更を失敗するとアフィリエイトリンクが上手く表示されなくなります。
ショートコードやプログラムのカスタマイズに関しては、WordPressやPHP、Web制作に慣れている方のみ行われることをオススメします。

ヘルプ記事 一覧へ