AmazonJSをカスタマイズしてカエレバ風のデザインにしてみた

どうもIT大好きFwwwです!!

新年明けましておめでとうございます!!

最近ボクはブログでこの月間5万PVのブログでもっと収益を生むためにマネタイズを行っています。

アドセンス収益が9割と偏りが半端ないので他のASPでもっと成果上げて、

1PVあたり0.5円は稼げるようになりたいなと思っております。

前々からamazonアソシエイトはちょくちょく利用していたのですが、

先人(先輩ブロガー)の記事を見ると馬鹿にできないほど収益を上げることがわかりました。

ですので、このブログでもアマゾン・アソシエイトを本格導入していこうと思います。

それで、先輩ブロガーの記事を見ていると皆さんカエレバを使ってることが多いとわかりました。

うちにはライターが3名在籍しているので、

記事執筆画面から商品を貼れればすごい楽だなと思っておりました。

スポンサーリンク

AmazonJSをカスタマイズしてカエレバ風のデザインにしよう

普段Wordpressで使っているAmazonJSというプラグインはこのようなデザインですが、

amazonjs 元のデザイン

今回この記事を通してカスタマイズを行うとこのようなデザインに仕上がります。

amazonjs デザイン変更

なぜ価格を非表示にしたかというとリンクを踏む前に見えちゃうと良くないみたいだからですw

それと無駄な情報は表示せずシンプルに仕上げました!!

今回はコード修正したりデザインを追記するという形で行っていきます。

それとプラグインを編集することになるので、

うまく出来なければ潔く諦めるか僕のツイッターへどうぞ笑

プラグインの編集方法

  • プラグイン→プラグイン編集→右サイドバーのプルダウンからAmazonJS選択

サーバーの設定でmodpagespeedを有効にしていたり、

.htaccessでcssやJavascriptのキャッシュを設定している場合はうまくいかないかもしれません。

  • テーマファイルにスタイルやスクリプトを上書きで読み込ませる

試してはいませんがスクリプトはフッターで読み込ませたほうが良いと思います。

  • AmazonJSの設定でカスタムCSSやカスタムJSを利用するにチェックして、FTPで任意の場所に設置し読み込ませる

こちらもmodpagespeedを有効にしているとうまくいかないかもしれません。

AmazonJSで動的に生成してるScriptまわりのカスタマイズ

今回AmazonJSのプラグインを改造するにあたって僕はてっきりPHPで読み込ませてるのだと思ってました笑

そしたら、

amazonjs デザイン変更

これ自体Javascriptで動的生成していたのでびっくりしました。

普段あまりJavascriptをいじることがないので、

少し苦戦しましたがうまくいったのでご紹介します。

まずは58行目の

こちらのコードの下につぎのコードを追記します。

amalinkというのは自分で作成した変数なので気に入らなければ勝手に変えちゃってください笑

そして、

というのはこのような構造になっています。

それとamazonでチェックというのは、

”AmazonへGO”や”Amazonで見る”など好きにしてください。

最後に、スクリプトを生成する部分ですが、

通常の商品、DVD、本、Musicと別々の方法で生成しているみたいなので、

102行目と122行目と142行目、163行目、182行目の

上記のコードを、

のようにしてください。

amalinkというのは先程宣言した変数です。

これでスクリプト周りの編集は終わりです。

AmazonJSのデザインをカスタマイズする

まずはボタン部分のスタイルです。

これがサンプルですので気に入らなければ好きにスタイル変更してください。

ボタンだけじゃ面白くないので、hover時に下線を引くようにしました。

また僕は価格やその他の無駄な情報を表示させたくなかったのでこのように非表示にしました。

そしてこのままだと特にレスポンシブの場合で縦にはみ出てしまうことがあるので、

で対応しました。

まぁスタイルは自分好みにしちゃってください。

まとめ

Javascript書くのが苦手なので少し苦戦しましたが自分の環境の場合はうまくいったみたいです!

もしスタイルが崩れてしまってら該当URLを表記の上コメントしてください!

スポンサーリンク

シェアする



URLをコピーする

関連記事