カスタマイズした「もしも・簡単リンク」がYahoo以外押せない！

「もしもアフィリエイトの簡単リンク」と言えば、RinkerやカエレバなどのAPIを使用した商品リンクが使えない場合のお助けツール。

我が家も最初はAmazonの売り上げがなかったので、簡単に商品リンクが作れるもしもアフィリエイトのかんたんツール使用していました。使いやすいので今でもそのまま簡単リンクを使っています。

そのままの見た目だとあまりに巨大でボタンも全てオレンジなので、いろいろな方のページを参考にしてもっと目立たないリンクにカスタマイズしていました。

でも、ある日気がついたのです。

ミッキー

スマホの方のかんたんリンクの「Amazonを見る」と「楽天を見る」がクリックできない…。

なぜか「Yahooを見る」だけ押せるんですよね。これは大変！ということで、調べた結果解決しましたので、備忘録として記事にしておきたいと思います。

※我が家はテーマにCocoonを使っています。

Index

もしもアフィリエイトの簡単リンクが一部動作しない理由はWordpressのバージョンアップ？
もしもアフィリエイトの簡単リンクが一部動作しない理由はかんたんリンクのカスタマイズと判明
もしもアフィリエイトの簡単リンクのカスタマイズを変更することに！
まとめ：「もしもアフィリエイトの簡単リンク」が押せない場合のカスタマイズ

もしもアフィリエイトの簡単リンクが一部動作しない理由はWordpressのバージョンアップ？

現象としては、パソコンの簡単リンクはすべて問題なくボタンがクリックできるのですが、スマホのみアマゾンと楽天が押せない、という不思議な事象です。

モバイルの方のもしもアフィリエイトのかんたんリンクがYahoo以外動作しない理由をいろいろググってみましたが、ヒットしません。

ちょうどWordpressのバージョンが5.4.2から5.5になってアップデートしたばかりだったので、まず初めにバージョンアップの影響を疑いました。

しかもバージョンアップ前にバックアップを取っておらず、

ミッキー

しまった…。

と思ったものの、気を取り直して調べるとWordpressのバージョンを元に戻すプラグインがあることが分かり、さっそくバージョンダウンすることに。

もちろん、今回はちゃんと「BackWup」でバックアップを取りました(笑)。

ダウングレードは「WP Downgrade Specific Core Version」というプラグインをインストールして設定内で任意のバージョンを選ぶだけ、という超カンタンな作業。

ミッキー

これで簡単ツールが元通り！ルンルン♪

と思ったのもつかの間…。やっぱり「Amazonを見る」と「楽天を見る」が押せないんです。

うーーん、これは困りました。何が原因なのかさっぱりです。

もしもアフィリエイトの簡単リンクが一部動作しない理由はかんたんリンクのカスタマイズと判明

その後、もしもアフィリエイトの簡単リンクについて色々と調べていたときに、カスタマイズを紹介している方のいろいろなページのリンクを次々に押してみました。

すると、我が家と同じようにスマホでは「Yahoo」以外はクリックできない商品リンクが時々あることに気付いたのです。

やはり、パソコンでは押せるのにスマホでは押せない。もしかして、クリックできないことに気付いていない人も多いのでは、と他人事ながら心配になってしまいました。

でも、ボタンがすべてちゃんと動作している商品リンクのカスタマイズもありました。

ということで原因はわからないのですが、もしもアフィリエイトの簡単リンクのカスタマイズの一部が、プラグインかバージョンアップなどと干渉し、動かなくなったのではないかと推測しています。

もしもアフィリエイトの簡単リンクのカスタマイズを変更することに！

CSSのカスタマイズをしたのはだいぶ前なので、どの方のカスタマイズを参考にしたのか忘れてしまっていました。

このため、取りあえずクリックしてちゃんと動作するカスタマイズを紹介している方のページで、見た目が好みのカスタマイズを使用させていただくことにしました。

このカスタマイズだとスマホでも画面いっぱいにならず、大満足です。

パソコンだとこのような表示になります。

スマホではこのような表示になります。結構コンパクトでいい感じですよね。

我が家のように検証のために実際に押してみたい方のために、画像ではない実際の商品リンクも貼っておきますね。

リンク

カスタマイズ用のCSSのコード

カスタマイズ用のCSSのコードはこちら

追加する前に必ずバックアップを取ってから追加してくださいね。

/*————————————–
もしもの簡単リンクのカスタマイズ
————————————–*/
div.easyLink-box {
border:3px double#CCC !important;
box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);}
div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-name {
margin:15px 2px 0 0!important;
text-align:center !important;
font-size: 14px !important;}
p.easyLink-info-model {
display: none !important;}
.easyLink-info-btn {
display: inline!important;} .easyLink-info-btn a{
margin: 5px 10px 5px 0!important; padding: 0 12px!important;
line-height: 31px!important;
display: inline-block!important;
width: 100%!important;
box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
font-size: 0.9em!important; } .easyLink-info-btn-amazon{
background:#ffb36b!important; } .easyLink-info-btn-rakuten{
background:#ea7373!important; } .easyLink-info-btn-yahoo{
background:#73c1ea!important; }

div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img
p.easyLink-img-box,
div.easyLink-box div.easyLink-img
p.easyLink-img-box img.easyLink-img-pht{
max-width: 300px !important;
max-height: 160px !important;}

@media screen and (max-width: 480px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
width: 100%!important;
position: relative; }
.easyLink-info-btn a:before { padding-right: 5px;
right: 5px;
position: absolute;
} }

@media screen and (max-width: 480px){
div.easyLink-box.easyLink-size-s {
max-width: 340px !important;
}}
/*————————————–
ここまで、もしもの簡単リンクのカスタマイズ
————————————–*/

Cocoonの場合は、外観→テーマエディターを選択。