「もしも・かんたんリンク」のボタンがスマホで押せない！？

◆目次◆

もしもアフィリエイトのかんたんリンクのボタンがスマホだけ押せない

もしもアフィリエイトのかんたんリンクのボタンがスマホだけ押せない

かんたんリンクは、もしもアフィリエイトのツールで、Amazonや楽天、yahoo!ショッピングといった大手ECサイトの商品を簡単に紹介することができます。

◆ASPのススメ◆
ブロガーさんで登録がまだなASPがあれば即登録をおすすめします。５～１０分で無料登録可能です。
がんばる個人のための「もしもアフィリエイト」
バリューコマース
 A8.netの申し込みページはこちら

Amazonアソシエイトの審査規格が変更になり、物販をかんたんリンクで行っているブロガーさんもさらに増えたのではないでしょうか。
Amazonアソシエイト審査の「180日メール」についてCocoon(コクーン)ユーザーが解説

今回は、そんな「かんたんリンク」で困ったことがありました。

もしも・かんたんリンクのAmazonボタンがスマホページで反応しない

当ブログがお世話になっているもしもアフィリエイトのかんたんリンクに、

スマホページでAmazonのリンクボタンをタップしてもリンク先に飛べない

という問題が発生。

いや致命的！！

かんたんリンクの不具合関係でググっても、

「かんたんリンクが表示されない」系の記事が上位を埋め尽くしていて解決できない。。。

しかしあまりに大きな問題なので、調べました。

結果解決したので、同じように困っている方のために記事にしておきますね！

PCで記事を書くブロガーさん、記事公開後のかんたんリンクの動作チェックをスマホページでもしていますか？
スマホ版だけリンクボタンが反応しないという現象は確かに存在します。
機会損失を防ぐためにも、一度自サイトのチェックを推奨します。

もしもアフィリエイトのかんたんリンクのボタンが押せない原因はかんたんリンクのCSSカスタマイズだった

なんだかんだ調べているうちに、最近かんたんリンクの見た目を変更するためにCSSをカスタマイズしたことを思い出しました。

このCSSが原因では。。。？

かんたんリンクのCSSを一旦削除

と、いうわけで、もしもアフィリエイトのかんたんリンクのCSSを削除したところ、

バッチリ問題解決しました。

Amazon、楽天、yahooショッピング全てのボタンが反応してくれるようになりました。

ただ、CSSを削除したので、デフォルトの見た目に戻ってしまいました。

スマホ版のかんたんリンクのデフォルトの見た目はあまりに大きく、、、さらにボタン色が同一でオシャレ感が足りません。。。

機能に致命的な問題があるよりも、見た目が多少不格好である方がマシではあるのですが、

やはり見た目にも気を配りたいので、まともに動くおしゃれCSSを探しました。

かんたんリンクのCSSを差し替え

結果からいくと、EARN LIFEさんのCSSをそのままコピペさせていただきました。

当ブログの環境ではオシャレに問題なく動作してくれています。ありがとうございます。

◆以下コピペ用CSS◆

コピーして、外観→テーマエディター／スタイルシート (style.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: 28px!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: 130px !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;
}}

変更を保存したら、PC、スマホの両方で押せないリンクボタンがないか確認しましょう。

リンク