≪HOME記事一覧ワードプレスワードプレス話WPアソシエイトポストR2のレイアウトをカスタマイズWPアソシエイトポストR2のレイアウトをカスタマイズ2019-07-09ワードプレス話カスタマイズワードプレス話Amazonや楽天での商品紹介に「WPアソシエイトポストR2」を使用しています。僕はAmazon派です、からあげ棒です。Amazon派なのでこのブログにはAmazonの商品リンクしか貼ってませんでした。「てめぇの記事読んで買う気になった[...]WPアソシエイトポストR2はCSSファイルを追加することによりオリジナルのデザインを導入することができます。(オリジナルスキン)以前から少しデザイン的に気になっていた箇所があったので修正しました。注意CSSは勉強中です。本をみながら、テストを繰り返してなんとか出来たというレベルです。無駄なコードや効率の悪い方法を使っている可能性があります。CSSの一部をこちらに掲載しますが、使用に関しては自己責任でお願いします。あとがきもととなるCSSについて今回、カスタムしたものには、もととなったCSSファイルがあります。うれしデザインWPアソシエイトポストR2を導入!デザインも独自にカスタマイズできます。先日書いた買ってよかったおすすめのガーリーデザイン素材集の記事のAmazonや楽天へのリンクボックスは「WPアソシエイト...↑上記記事のCSSを使わせていただきました。(うれしデザイン様、ありがとうございます。)WPアソシエイトポストR2の設置からカスタム方法まで詳しく掲載されています。↑もととなるCSSを適用して出来上がったデザイン(スマホビュー)気になった点ボタンが改行してしまう。通常のボタンは「Amazon」という文字だけなので改行されません。僕は「Amazonで見る」に文字を変更しているので改行されてしまいます。これはただの希望です。※ボタンの行頭文字が変な四角になっているのは謎です。WPアソシエイトポストR2の導入からカスタムスキン設定のおおまかな流れWPアソシエイトポストR2は公式プラグインです。インストールして有効化2WPアソシエイトポストR2の設定は、各種IDなどを登録。アップロード6WPアソシエイトポストR2のテンプレート設定から、アップロードしたファイルを選択する。以上が簡単な流れです。CSSの変更点うれしデザインからダウンロードしたファイルの一部を変更します。変更する箇所は、スマホ表示の部分のみです。screenの間を変更します。上下の横棒が引いてある一文は、もとのコードを使用。目印として表記しています。↑出来上がりはこのような感じ(スマホビュー)タイトル文字やリンク文字はあえて左寄せにしました。変更したCSS以外にも枠の角丸を大きくしました。14px;あとがきこの変更は完全に自己満足です。クリック数などが著しく低下した場合は、もとに戻すつもりでいます。カスタムは自己責任でお願いします。質問等あればコメントを頂きたいと思います。コメントをキャンセルメールアドレスが公開されることはありません。karaagebow.com。