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

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

WPアソシエイトポストR2 アフィリエイトリンクを簡単に設置

関連記事

みなさんはAmazon派ですか? 楽天派ですか? 僕はAmazon派です、からあげ棒です。 Amazon派なのでこのブログにはAmazonの商品リンクしか貼ってませんでした。 しかし「てめぇの記事読んで買う気になった[…]

アソシエイトポスト

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

以前から少しデザイン的に気になっていた箇所があったので修正しました。

 

注意

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

もととなるCSSについて

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

 

うれしデザイン

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

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

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

 

WPアソシエイトポストR2カスタム01

↑もととなるCSSを適用して出来上がったデザイン(スマホビュー)

 

気になった点

ボタンが改行してしまう。

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

写真を大きくしたい。

これはただの希望です。

 

※ボタンの行頭文字が変な四角になっているのは謎です。

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

WPアソシエイトポストR2は公式プラグインです。

 

①プラグインWPアソシエイトポストR2をインストール

ワードプレスメニュー → プラグイン → 新規追加 → WP Associate Post R2で検索 → インストールして有効化

②WPアソシエイトポストR2の設定は、各種IDなどを登録。

うれしデザインから、もととなるCSSファイルをダウンロード

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

⑤ダウンロードしたファイルを改良後にサーバーにアップロード(もとのCSSを取っておく場合は別名でファイルをコピーしてコピーをアップロード)

サーバー → 使用しているテーマ(子テーマの場合は子テーマ)のフォルダ → アップロード

⑥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) {

以上です。

上下の横棒が引いてある一文は、もとのコードを使用。目印として表記しています。

 

 

WPアソシエイトポストR2カスタム02

↑出来上がりはこのような感じ(スマホビュー)

タイトル文字やリンク文字はあえて左寄せにしました。

 

変更したCSS以外にも枠の角丸を大きくしました。(3から14へ変更)

border-radius: 14px;

あとがき

この変更は完全に自己満足です。

クリック数などが著しく低下した場合は、もとに戻すつもりでいます。

 

カスタムは自己責任でお願いします。

質問等あればコメントを頂きたいと思います。が、答えられるかはわかりませんw

 

THE THORを中心にワードプレス関連の記事はこちら