「AmazonJs」のCSSをカスタマイズをしてみました

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

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

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

amazonjs amazonjs

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

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

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

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

Use Custom Cssを有効にする

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

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

そして、以下のディレクトリに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 h4 {
 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 h4 {
 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のh4タグのコードでbackground-colorを定義していないので、テーマ本体のcssファイルのh4タグのbackground-colorの設定を引いていたようです。

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

# /etc/init.d/httpd graceful

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

  2 comments for “「AmazonJs」のCSSをカスタマイズをしてみました

Comments are closed.