(2017年6月6日更新)
私の尊敬するアフィリエイターの一人、かん吉さんが運営するアフィリエイター御用達のツールカエレバ。
知ってる人も多いと思いますが、
紹介したい商品を指定すると、amazonや楽天、Yahooショッピング、やふおく等の代表的なサイトへのリンクをまとめて簡単に作成する事ができるアフィリエイトコード生成ツールです。
で、私も最近このツールをガッツリ使っているのですが、
どうしても画像の大きさが調整できないのだけがネックとなってきたのでちょっと調べてみました。
ちなみにamazon、楽天はもしもアフィリエイト、やふおく等はバリューコマースを使ってます。
以下説明はamazon純正のコードを使っている人には無効かもしれないので注意してください。
カエレバの画像を大きくしてみたサンプル
まずはサンプル。
ノーマルVer
ちょっと大きいサイズVer
大きいサイズVer
特大Ver
具体的方法
といった具合になるのですが、ではどうやったか!?
まずはカエレバで生成されたコード※から、以下のコードを「ctrl + F」で探します。
※メイン画像をAmazonにした場合。楽天とYahooは文末参照
1 |
._SL160_.jpg |
見つかったら、そのコードをそれぞれ以下に置換します。
ちょっと大きいサイズVerにする場合
1 |
._SL300_.jpg |
に置換。
<例>
1 |
<img style="border: none;" src="https://images-fe.ssl-images-amazon.com/images/I/61WZh2kXjQL._SL160_.jpg" alt="" /> |
↓
1 |
<img style="border: none;" src="https://images-fe.ssl-images-amazon.com/images/I/61WZh2kXjQL._SL300_.jpg" alt="" /> |
<解説>
最大幅を160pxから300pxに変更
大きいサイズVerにする場合
1 |
.jpg |
に置換。
<例>
1 |
<img style="border: none;" src="https://images-fe.ssl-images-amazon.com/images/I/61WZh2kXjQL._SL160_.jpg" alt="" /> |
↓
1 |
<img style="border: none;" src="https://images-fe.ssl-images-amazon.com/images/I/61WZh2kXjQL.jpg" alt="" /> |
<解説>
最大幅を160pxから500pxに変更
特大Verにする場合
1 |
.jpg" width="600 |
に置換。
<例>
1 |
<img style="border: none;" src="https://images-fe.ssl-images-amazon.com/images/I/61WZh2kXjQL._SL160_.jpg" alt="" /> |
↓
1 |
<img style="border: none;" src="https://images-fe.ssl-images-amazon.com/images/I/61WZh2kXjQL.jpg" width="600" alt="" /> |
<解説>
最大幅を160pxから500pxに変更して、幅を600pxに拡大。
あくまで拡大なのでちょっとぼやけます。
600の部分の値はいくつにしても構いません。
まとめとその他解説
まあ要は、カエレバのコードの中から探し当てた
1 |
._SL160_.jpg |
を
1 |
.jpg" width="任意の値 |
に置換して、「任意の値」に好きな数値を入れればOKって事ですね♪
ただ、それだと強制的に500px幅の画像を読み込んじゃうので、読み込み速度を考えると160px幅と300px幅も表示サイズによっては使った方が良いとは思います。
あと、画像サイズを変えると、スマホで表示が崩れる事があるので、一番表示がくずれにくいと思われる「もかり風-1」を使用する事をおすすめします♪
(「もかり風-1」をレスポンシブ化するための方法を記事にしました)
ではでは、今回は以上!
もし、もっと良さそうなカスタマイズ方法あったら、コメント欄等で教えてもらえると幸いです(≧∇≦)/
追記.
上記は商品キーワード検索をamazonで行なった場合の方法です。他のアフィリエイトサービスを検索先とした場合の方法は今のところ以下のみ見つけれました。
▼楽天市場
.jpg?_ex=
という部分を探して、その後の「128x128」等の数値を「300x300」や「500x500]等に変更
▼Yahooショッピング
http://item.shopping.c.yimg.jp/i/g/
という部分を探して
http://item.shopping.c.yimg.jp/i/j/
にすれば300px幅になる。
コメント