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

2017年10月20日 2018年4月2日 0件のコメント ワードプレス , , ,

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アソシエイトリンクです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください