WPアソシエイトポストR2カスタマイズ

WP アソシエイトポスト R2の レイアウト をカスタマイズ

WPアソシエイトポストR2カスタマイズ

Amazonや楽天での商品紹介に「WPアソシエイトポストR2」を使用しています。

WPアソシエイトポストR2はCSSファイルを追加することによりオリジナルのデザインを導入することができます。（オリジナルスキン）

いちから作るのは難しかったのでカスタマイズを流用させていただきました。

関連記事WPAP リンク文字を変更する

 

注意

この記事のCSSはテストを繰り返してなんとかカタチになったというレベルのものです。無駄なコードや効率の悪い方法を使っている可能性があります。CSSの一部をこちらに掲載しますが、使用に関しては自己責任でお願いします。

 

目次

もととなるCSSについて

 

今回のカスタマイズには、もととなったCSSファイルがあります。

 

うれしデザイン
WPアソシエイトポストR2を導入！デザインも独自にカスタマイズできます。 | うれしデザイン

先日書いた買ってよかったおすすめのガーリーデザイン素材集の記事のAmazonや楽天へのリンクボックスは「WPアソシエイト…

上記記事のCSSを使わせていただきました。（うれしデザイン様、ありがとうございます。）

こちらの記事には、WPアソシエイトポストR2の設置からカスタム方法まで詳しく掲載されています。

 

流用させていただいたCSSでの表示は以下の通りになります。

 

アソシエイトポスト レイアウト 変更前もととなるCSSを適用して出来上がったデザイン（スマホビュー）

 

変更したい箇所

ボタンが改行を無くしたい。

通常のボタンは「Amazon」という文字だけなので改行されません。僕は「Amazonで見る」に文字を変更しているので改行されてしまいます。ボタンの文字が長くても改行しないようボタンの長さを変更します。

写真を大きくしたい。

写真は可能な限り大きくして商品をアピールしたいと思います。タイトルと画像の並びを変更して画像を大きく表示できるようにします。

 

 

※ボタンの行頭文字が変な四角になっているのは謎です。もととなるCSSでfontawesomeが使用されているための文字化けでした。

 

WP アソシエイトポスト R2の導入からカスタムスキン設定のおおまかな流れ

 

WPアソシエイトポストR2は公式プラグインです。細かい仕様や設定方法などは公式サイトをご確認ください。

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

 

①プラグインWPアソシエイトポストR2をインストールして有効化。各種設定を行う。

WordPress操作
プラグイン → 新規追加 → WP Associate Post R2で検索 → インストール/有効化/設定

 

③うれしデザインさんからCSSファイルをダウンロード

 

④ダウンロードしたファイルに変更を加える（下記変更点参照）

 

⑤変更したファイルをサーバーにアップロード

オリジナルスキンのアップロード
サーバー → テーマのフォルダ → アップロード

⑥WPアソシエイトポストR2のテンプレート設定からオリジナルスキンを選択。

 

以上が簡単な流れです。

オリジナルスキンについての詳しい説明は公式サイトを御覧ください。

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

 

WPアソシエイトポストR2 CSSの変更点

 

うれしデザインさんからダウンロードしたファイルの一部を変更します。

変更する箇所はスマホ表示の部分のみです。

 

@media screenの間を変更します。

@media screen and (max-width: 767px)
▲▲▲▲▲▲▲▲▲▲
この間を置き換えます
▼▼▼▼▼▼▼▼▼▼
@media screen and (max-width: 320px)

 

下記CSSに変更

@media screen and (max-width: 767px) {
    .wpap-tpl-with-detail .wpap-image {
        position: relative;
        width: 100%;
        height: 250px;
    }
    .wpap-tpl-with-detail .wpap-image img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        max-width: 250px;
        max-height: 250px;
    }
    .wpap-tpl-with-detail .wpap-title {
        clear:both;
    }
    .wpap-tpl-with-detail .wpap-link {
        clear: both;
        display: block;
    }
    .wpap-tpl-with-detail .wpap-link a {
        box-sizing: border-box;
        display: block;
        margin: 6px;
        padding: 6px;
    }
    .wpap-tpl-with-detail .wpap-link a span {
        margin: 0 auto;
    }
}
.wpap-tpl-with-detail .wpap-link a {
    margin-right: 8px;
}
.wpap-tpl-with-detail .wpap-link a:last-child {
    margin-right: 0px;
}
@media screen and (max-width: 320px) {

以上です。

 

アソシエイトポスト レイアウト　変更後↑出来上がりはこのような感じ（スマホビュー）

 

追記：上記コード以外にも枠の角丸を大きくしました（3から14へ変更）

border-radius: 3px;　⇒　border-radius: 14px;

あとがき

 

画像を大きく、ボタンも大きく押しやすく変更。少しでもクリックを増やし物販の売上増加を狙います。見た目を自分好みにして満足度を高める狙いもあり。

※カスタマイズは自己責任にてお願いします。

>

THE THOR
テーマの情報を詳しく見る