WordPressのプラグイン「AmazonJs」のCSSをカスタマイズ。

こないだWordPressのテーマのcssを編集していたら変なことになってしまいました。

変更したところは、スマホ用のcssでh2タグのbackground-colorを変更したらamazonjsのタイトルの背景が同じく変わってしまいました。

画像の左が変更前で、右が変更後の背景がおかしくなってしまった状態です。

下の画像が僕のブログのh2タグですが、ここの色がamazonjsの背景色にも適用されているようです。

投稿文の中のh2タグの背景は維持したいので、amazonjs側のスタイルシートを変更できないか調べてみました。

そうすると、2つの方法を見つけました。

１、amazonjsのプラグインの機能の「Use Custom Css」を有効にする。
２、amazonjsのcssを直接編集する

Use Custom Cssを有効にする

まずは「Use Custom Css」の方法を説明します。

こちらはプラグインの設定の画面から「Use Custom Css」にチェックを入れます。

そして、以下のディレクトリにamazonjs.cssを新規作成します。

# vim /＜サーバごとのドキュメントルート＞/wp-content/themes/＜使用しているテーマ＞/amazonjs.css

cssファイルに書くサンプルコードは以下のような感じです。適宜変更してみてください。

@CHARSET "UTF-8";
.amazonjs_item {
  border:1px solid gray;
}

amazonjs.cssの保存が終わると、httpdの再起動が必要です。

# /etc/init.d/httpd graceful

ここまでの流れが「Use Custom Css」を有効にしたときの変更方法です。

amazonjsのcssを直接編集する

僕はこちらの方法を使っています。上の方法だと初めからコードを作成するのが手間そうです。

こちらのほうが現在の設定を踏襲しつつ必要な分だけの変更で済みそうです。

編集するファイルは以下のファイルです。

# vim /＜サーバごとのドキュメントルート＞/wp-content/plugins/wp-amazonjs-0.7/css/amazonjs.css

※バージョン 0.7.3では以下のパスに変わっていました。

# vim /＜サーバごとのドキュメントルート＞/wp-content/plugins/amazonjs/css/amazonjs.css

(変更前 左の数字は行番号です)

 50 .amazonjs_item .amazonjs_info h2 {
 51   margin: 0 0 5px;
 52   padding: 0;
 53   font-size: 1.2em;
 54   font-weight: bold;
 55   clear: none;
 56   border: none;
 57 }

(変更後 左の数字は行番号です)

 50 .amazonjs_item .amazonjs_info h2 {
 51   margin: 0 0 5px;
 52   padding: 0;
 53   font-size: 1.2em;
 54   font-weight: bold;
 55   background-color: #EEEEEE;　　←追加した分です。
 56   clear: none;
 57   border: none;
 58 }

ここの部分がamazonjsのh2タグのコードでbackground-colorを定義していないので、テーマ本体のcssファイルのh2タグのbackground-colorの設定を引いていたようです。

そして、httpdの再起動の再起動をしておきます。

# /etc/init.d/httpd graceful

これで、amazonjsの広告のタイトル部分の背景が元に戻りました。

このあたりを編集すればamazonjsのカスタマイズが可能ですが、プラグインがアップデートされたときにまた戻ってしまうかもしれないので、変更した時のファイルはバックアップておいたほうが無難そうです。