「カエレバ」「ヨメレバ」でアフィリエイトリンクを貼るならスマホ用のカスタマイズも同時に考えるべし

responsive-1622825_1280

WordPressでブログを書く目的は人それぞれだと思いますが、記事を書くついでに広告収入も得られたらと考えている方もみえるかと思います。私もあわよくばサーバー代くらいは稼げるようになったらいいなぁとか思ってたりするその中の一人ですが、今日はそんなアフィリエイトに役立つツール「カエレバ」の事をちょっと書いてみたいと思います。

スポンサーリンク

アフィリエイトに欠かせない商品紹介用ブログパーツ「カエレバ」「ヨメレバ」

既にアフィリエイトをされている方には有名なツールですが、実は私も当サイト以外でちゃっかり利用させていただいてます。

詳しい説明や使用方法は公式サイトを熟読して下さいませ。断じて手抜きではなくその方がわかりやすいからです…ホントですよ?

「カエレバ」「ヨメレバ」ってどんなツール?

本来ならアフィリエイト毎に作成する必要がある商品リンクを「カエレバ」を利用する事でまとめて作成出来る上に、リンク自体はコンパクトに収まるというメリットがあります。正確には商品リンクは画像と商品名のみで、あとは各アフィリエイト先でそれぞれのアフィリエイトIDを埋め込んだ検索結果リンクを作ってくれるといった感じです。

レスポンシブ対応の重要性を改めて確認

スマホでレイアウトを確認したのは、最初にテーマを有効化して記事を数件書いた時以来だったので、さすがにそれではチェックが甘かったと反省しています。私は普段全くと言っていいほどスマホを使わない人なので、PCからちゃんと見えればスマホも大丈夫だろうと軽く考えてしまっていたようです。

PCとスマホじゃ全然違うから大丈夫なはず無いのにね…何を根拠に大丈夫だと思ったのか、その時の自分を小一時間問い詰めたい気分です。

テーマのレスポンシブ対応を過信しすぎた

今は私を含めてほとんどの方がレスポンシブ対応のテーマを利用していると思いますが、テーマ自体がレスポンシブ対応しているという安心感があったので、まさかその「カエレバ」で貼った商品リンクの部分だけスマホで見るとこんな事になっているとは思ってもみなかったのです。考えてみればどんなに優秀なテーマでもユーザーが勝手に追加する部分までは対応しきれませんよね。

超便利ブラウザ「Blisk」でレイアウトを確認してみた

スマホだと画像デカ過ぎでしたの巻

この画像は実機ではなく「Blisk」というブラウザで「Galaxy S6 Edge」を選択して表示したものです。これは私がお気に入りの楽曲を紹介している音楽系ブログでの商品リンク部分ですが、ジャケットの右側にあるはずのリンクが全て見えなくなっていて、これでは「カエレバ」を使っている意味がありません。完全に見切れていればまだ良かったものを、ホンの少しだけ何か見えてしまっているところが非常にイヤーンな感じです。

運が悪い時は全てが悪い方に作用する

そのサイト以外にゲームの紹介をしているブログもあるんですが、そちらでも同様の症状が出ていました…そりゃそうですよね、同じ作り方してるわけですから。そこでまずは記事の量が少ない方で対応方法を検討してみて、うまくいったら多い方にも反映する事にしようと思いました。

どうせ直すならと欲張った結果

今にして思えば画像が小さくなるようcssをちょちょいと追加すれば何とかなるレベルの事だったと思いますが、もういっそこうなったらデザインもイジって、リンクもボタンにしてしまえ!と欲張ったせいで更に深みにハマってしまいました。

えぇ、結局リンクを全て作り直しました orz

「カエレバ」をカスタマイズする上で失敗だった事

スマホでの対応を私が軽く考えていた事や、リンクを貼った後にPC・スマホ両方からの表示確認を怠った事もありますが、私が「カエレバ」によって作成される商品リンクの仕様をキチンと把握していなかったのが最大の原因でしょう。

そこで、「カエレバ」で作成した商品リンクをcssでカスタマイズしようとした時に私が失敗していた点を挙げてみます。

見映えを良くしようと大きめの画像を選んだ

例えばCDのジャケットだと中サイズの画像は320pxになるんですが、そのサイズだとスマホによっては画面の幅いっぱいになってしまうので、肝心のリンクを表示している部分が右に切れてしまうんですね。

そこでスマホの場合は商品説明やリンクを画像の右側に回り込まないようにするか、単純にcssで画像を小さくしてやる必要があります。

cssカスタマイズ用のデザインを使っていなかった

画像の件だけならcssで画像を小さくするのは何とか出来ますが、それ以外の部分もカスタマイズしようとすると「カエレバ」側のデザインを「cssカスタマイズ用」にしていなかったのが地味に響いてきました。別にcssを使えないわけでは無いですが、スタイルの適用にstyle属性が使ってあるのでそれがジャマになってしまいます。

ショップのアイコンをなしにしていなかった

どうせcssを使うんだからと各アフィイエイト先へのリンクもボタン化してみたら、ボタンの前にショップのアイコンが…これがダメ押しでした。

このアイコンもcssで消す事は出来ますが、原因の発生元で直すべき事を後の工程でムリヤリ誤魔化すというのはプログラマー時代から一番嫌いな事だったので、後々手を加える可能性も考慮して今の内にちゃんとした形にしておくべきだと判断し、全てのリンクを「cssカスタマイズ用デザイン」で作り直す事にしました。

商品リンクを増やす前に確認しておこう

私が運営しているサイトは複数あって、全てを合わせるとそれなりの数の商品リンクをこの「カエレバ」で貼らせていただいてるので、リンクの貼り直しは結構骨の折れる作業になります。

今回のエントリーではその修正内容までは紹介出来ませんが、それはまだ対応が完全に済んでいないからです。カスタマイズ部分のcssは他のサイトで公開されているものをベースに利用させていただきましたが、テーマによっては単純にコピペでは効かない部分もあってそれだけでも四苦八苦させられています。

そんなわけで、とりあえず失敗談だけでも先にエントリーにしておいて、一人でも私と同じ轍を踏む事の無いようにと思った次第です。

「カエレバ」をカスタマイズする場合のポイント

まだそれほど「カエレバ」を使い込んでいるわけではありませんが、私はこんな感じの設定で商品リンクを作るようにしました。

カエレバ 画像+リンクリスト ブログパーツ生成画面

  • デザインは「amazlet風-2(cssカスタマイズ用)」を選択
  • リンクをボタン化するのでショップアイコンは「なし」に
  • 商品キーワードはなるべく該当なしにならないものを
  • タイトル変更は自分でフォーマットを決めるのもアリか
  • ○○で買う・探すの部分は、ボタン化するなら無い方がスッキリ
  • 画像サイズはレイアウト次第、cssで調整してもいいかも
  • 規約に触れる可能性を考慮するとrel=「なし」で良さげ
  • SSL化したサイトでエラーが気になるなら、画像SSL化をONに
  • 「Yahoo!ショッピング」がどうしても長くなるので横幅に注意

とりあえずこんなところですかね。

苦労して修正した甲斐はありました

そんなわけで、結局全ての商品リンクを作成し直す事になりましたが、苦労した甲斐あって結果的には満足しています。後で手直しするにしても今度はcssだけで対応出来ますからね。まだこの時点で気がついて良かったということにしようと思います。

参考までに私のゲーム紹介サイトでの「カエレバ」商品リンクの修正結果を貼ってみますが、あくまでも暫定的な対応でまだ手直しが必要なので、完成したら改めてカスタマイズ方法を紹介したいと思います。

修正前の商品リンク(PC)

カスタマイズ前の商品リンク(PC)
スマホ側であんな事になっていなかったら直す気はありませんでしたが、改めて見るとちょっと物足りない感じがしなくもありません。、

修正後の商品リンク(PC)

カスタマイズ語の商品リンク(PC)
うーん…やはりPCだとこれでは画像が小さ過ぎる気もしますが、ボタンはなかなかいい感じではないかと思います。

修正後の商品リンク(スマホ)

カスタマイズ語の商品リンク(モバイル)
スマホでもうまく表示されるようになりましたが、小さい画面だと結構スペースを取ってしまうのが悩みどころです。

スマホ利用率は無視出来ないほど大きくなっています

数年前ならともかく、現在ではスマホからのネット利用率が無視出来ないほど大きくなっているので、デバイスを選ばないシームレスなサイトデザインが求められる時代が来てしまったと実感しています。ガラケー派のオールドタイプの私も「モバイルファースト」とまではいきませんが、もっとマジメにレスポンシブ対応について勉強しなければいけないと今回の件で身にしみました。「頭の固いオッサンは~ 取り残されて行く~」とそんな歌もあったように、時代に取り残されない努力をしなければと思います、はい。

最後に誤解の無いよう言っておきますが

「カエレバ」自体はとても素晴らしいツールで、今回の件はあくまでも使う側(つまり私です)のミスである事を念の為に書いておきます。

これから「カエレバ」を利用する方へ

これから「カエレバ」を使ってみようと思っている方は、まずデフォルトで用意されたデザインを確認してその中から選択するか、cssを使ってカスタマイズして利用するか、その辺りをしっかり決めておいてからリンクの作成に取り掛かった方がよろしいかと思います。

ユーザーの方が作成したカスタマイズ用のcssも公開されていますので、事前にある程度リサーチをしてから取り組む事をおすすめします。さすがにある程度リンクを貼ってしまってからだと、やり直すにもそれなりの気力と時間が必要になりますので。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る