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

カスタマイズした「もしも・簡単リンク」がYahoo以外押せないアイキャッチ画像パソコン

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

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

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

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

ミッキー
ミッキー

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

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

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

スポンサーリンク

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

Wordpressのバージョンアップが動作しない理由?

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

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

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

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

ミッキー
ミッキー

しまった…。

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

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

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

ミッキー
ミッキー

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

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

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

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

かんたんリンクが動作しない理由はカスタマイズ

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

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

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

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

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

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

かんたんリンクのカスタマイズを変更

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

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

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

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

もしもアフィリエイトの商品リンクをカスタマイズした見た目 (PC)

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

もしもアフィリエイトの商品リンクをカスタマイズした見た目 (モバイル)
我が家のように検証のために実際に押してみたい方のために、画像ではない実際の商品リンクも貼っておきますね。

カスタマイズ用の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の場合は、外観→テーマエディターを選択。

cocoon 外観からテーマエディタを選択

次に、テーマエディターの中のCocoon Child: スタイルシート (style.css)の中の

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

この下のところにCSSのコードを貼り付けます。

cocoon カスタマイズを入力する場所

上の画像の青色の矢印の部分です。

貼り付けたら左下のファイルを更新を押せば完了です。

使わせて頂いたのは「EARN LIFE」さんのカスタマイズ。ボタンと画像の高さだけ少し高くしてあります。EARN LIFEさん、ありがとうございます!

まとめ:「もしもアフィリエイトの簡単リンク」が押せない場合のカスタマイズ

もしもアフィリエイトかんたんリンクが押せない・まとめ

もしもアフィリエイトのかんたんリンクの一部のボタンが押せず、いろいろ検証してみた結果カスタマイズを変更することで無事に解決しました。

ミッキー
ミッキー

以前よりもスマホでの表示がコンパクトになり、とても気に入っています。

もしもアフィリエイトの商品リンクを貼ったあとはパソコンでしかいつも検証しておらず、スマホの方は時々しかチェックしていなかったため、今回のような現象になっていることに気付きませんでした。

いつからこんなことになっていたんでしょう…恐ろしい。

今回の教訓としては、かんたんリンクは時々自分で押してちゃんと動作しているか確認するべき!ということでした。

最後まで読んでいただきましてありがとうございました。

【Google検索テクニック】検索条件を指定して素早く検索するコツ!
知ってるだけで大違い!Google検索が圧倒的に早くなる検索のテクニックをお伝えします。探し物に便利な検索方法が満載です。学校での勉強や仕事の際にぜひ活用してみてください。
タイトルとURLをコピーしました