AmazonJSの枠の色を変える方法!CSSが分からなくても大丈夫

amazonjs-image

私のブログはWordPressで運営しており、AmazonJSというプラグインを導入して使わせてもらっています。これが超便利。Amazonの商品を気軽にカッコ良く表示させることができるんです。

たとえば、こんなふうに。

スッキリとしていて、見やすいという点も気に入っています。

ところで、私の場合、AmazonJSの「枠の色」を、デフォルトの灰色からオレンジ色に変更しています。このほうがなんとなくAmazonっぽくて、AmazonJSのタイトル文字色とも合っていて、オシャレでしょ?

私の他にも、自分の好きな色に変更したいという方は大勢いると思うので、ここではAmazonJSの枠の色の変え方をシェアしてみます。AmazonJSのCSSをいじることになりますが、CSSの読み書きができなくても、なんとなく分かるように説明しますので、やってみてください。

スポンサーリンク

AmazonJSのCSSファイルを探し出す

AmazonJSカスタマイズ1

上の画像を見ながらいきましょう。画像が小さいと感じる方は、クリックして拡大してみてください。

WordPressの管理画面にて、

1. 「プラグイン」メニューの「プラグイン編集」をクリック

2. 右上の「編集するプラグインを選択」にて AmazonJS を選んで、「選択」ボタンを押す

3. 「amazonjs/amazonjs.phpの編集」というタイトルに切り替わったことを確認

4. 右下あたりにある amazonjs/amazonjs.css をクリック。これが目当てのCSSファイルです。

CSSの該当部分を探し出す

AmazonJSカスタマイズ2

5. CSS編集窓の上から5行目、

と記載があるところを確認してください。borderというのは枠のことで、ここで枠の太さ・形状・色が指定されています。この中の、「#dddddd」の部分を、好きなカラーコードに書きかえれば、枠の色を変えることができます。

カラーコードが分からない場合は、次のサイトを見てみるといいでしょう。

色の名前とカラーコードが一目でわかるWEB色見本

カラーコードを扱っているサイトは他にもとてもたくさんあるので、お気に入りのサイトを探してみてください。

ちなみに、私はサイトを見るのではなく、FirefoxのColorPickerというプラグインをよく利用しています。これを使えば、任意のサイトの任意の場所の色を選択して、そのカラーコードをサッと取得できます。おすすめです。

A very simple extension for learning web page colors. Copy the RGB or Hex color code of any pixel displayed in your browser to the clipboard (in CSS/HTML format...

リンク先は英語で書かれていますが、なんとなくインストールしてしまえば、あとは何とかなります(適当)。

CSSを書き換えて保存

AmazonJSカスタマイズ3

6. 今回はオレンジ色に変更してみます。オレンジ色にするには、カラーコードを#E47911と指定します。つまり、

というのを、次のように変更すればOK。

最後のセミコロンを忘れずに書きましょう。

7. 「ファイルを更新」ボタンを押して、完了!

あとは通常通り、amazonJSをブログ記事内に書けば、枠の色が変わって表示されますよ。

おわりに

以上、AmazonJSの枠の色の変え方でした。

今回は枠の色のみを変更しましたが、もっと色々な変更を加えることもできます。たとえば、

上記の 1px の部分を 5px と変更すれば、枠の太さを太く変更することができます。

また、solid というところを dashed に変えると破線に、dotted に変えると点線に、none にすると枠線無しになるはずです。

こんなふうに、AmazonJSを自分好みにカスタマイズしてみましょう!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク