A2-blog

AmazonJSをちょこっとカスタマイズ！

投稿日:2017/10/20 更新:2020/2/7 コメント 0件 ワードプレス amazonjs, アフィリエイト, サイト運営, プラグイン, ワードプレス

AmazonJSのデザインが気に入らなかったのでCSSを弄ってカスタマイズしてみました。

 

デザイン比較

下記がデフォルトのデザインです。

余白(padding)が広過ぎるのとフォントが大きいのが気になったのでその辺とロゴ画像を変更して以下のような感じに変更しました。

 

 

CSSカスタマイズ

AmazonJSの設定画面で「カスタムCSSを使用する」にチェックを入れます。

テーマフォルダに「amazonjs.css」というCSSファイルを作成してこのCSSファイルに記載した内容がデフォルトのCSSより優先されます。

～wp-content/themes/(テーマ名)/amazonjs.css

下記コードは今回カスタマイズするクラスで「プライグイン編集」の「amazonjs.css」にあります。

.amazonjs_item {
 font-size: 14px;
 margin: .5em 0 1em 0;
 padding: 25px 10px 25px 10px;
 border: 1px solid #ddd;
 position: relative;
 display: block;
 background: white url(../images/amazonjs.png) no-repeat right bottom;
 color: #333;
}

.amazonjs_item .amazonjs_info h4 {
 margin: 0 0 5px;
 padding: 0;
 font-size: 1.2em;
 font-weight: bold;
 clear: none;
 border: none;
}

修正したのは上記コードの赤字部分とカーソルをリンクに合わせた時にアンダーバーが表示されるようにコードを追記しました。

テーマフォルダに作成した「amazonjs.css」に以下の修正コードを記載するとこちらのCSSファイルがデフォルトのCSSに上書きされる形で反映されます。

.amazonjs_item {
font-size: 12px;
padding: 15px 10px 15px 10px;
background: white url(images/amazonjs-logo.png) no-repeat right bottom;
}
.amazonjs_item .amazonjs_info h4 {
font-weight: normal !important;
}
.amazonjs_item .amazonjs_info h4:hover {
 text-decoration: underline;
}

こちらはAmazonJSで作成された本物のAmazonアソシエイトリンクです。