もしも「かんたんリンク」のスマホ表示を小さくするカスタマイズ

カエレバが実質使えなくなってから、たぶんみんなは「Rinker」に以降したんじゃないかと思います。

あとCocoonとかだとテーマの機能で商品リンク作れたり。

Cocoonの「Amazon商品リンクタグ作成ショートコード」機能の使い方を詳しく解説しています。

ただね。どっちもAmazonアソシエイトのトラッキングIDの入力が必要ですが、僕アカが閉鎖されちゃってて使えないんですよw

原因は初期の頃から全部もしも経由で紹介してて、アソシエイトの売上が1年間なかったため。

で、どうしようかなと思ってたときに、もしもの「かんたんリンク」がリニューアルされたので使ってたんですが、まぁスマホ表示がデカい。

画面の9割も占領しちゃうのはちょっと…

ってことでスマホ表示を小さくする。ついでにボタンリンクの色も変えるカスタマイズです。

例によって自分で1からは無理なので、参考サイト様のお力を借りまくってます。(それでもすげぇ時間かかった)

このブログで適用してるCSS

⬆︎実際のかんたんリンク

正直言うとスマホ表示はもう少し画像の横幅とか何とかしたいんですが、これでも丸1日かけてようやく辿り着いたので…

これと同じでいいって方は以下のCSSをコピペどぞ。

商品タイトルの文字色はこのブログのリンク色に合わせてるので、ご自分のリンク色に変更した方がしっくりくると思います

参考にさせてもらった記事とカスタマイズの奮闘記

こちらの記事のCSSを適用させてもらったところ…

PC表示はめちゃくちゃいい感じ!あとは色だけ変えればいいかなーっと思ってたんですが…

なんかスマホだと画像が左に寄ってる!

なので画像サイズのmax-widthの部分を、130pxから300pxに変更してみたところ…

いい感じに真ん中に!

これで完璧だと思ったんですが、max-widthを広げると写真下の商品タイトルをクリックしても反応しなくなります

リンクによってはAmazonボタンも反応しない。

なのでサイズを戻してmargin: autoでセンター寄せしてるものを完成版として載せてるんですが、きっと分かる人なら簡単に解決できる気がするのでぜひ教えてください。

お願いします…

こんにちは! カスタマイズができて満足なネイネイ(@NEYNEYx2)です。 2019年3月26日にリニューアルされた、もしもアフィリエイトの「かんたんリンク」のデザインを変更してみましたので、その内

ボタンの色の変更は⬆︎の記事を参考にさせてもらいました。

まとめ

直接紹介した商品が売れなくても、Cookieが残ることでクリックさえしてもらえれば報酬の可能性がある、Amazonアソシエイトと楽天アフ...

こちらの記事で解説してる通り、物販系はもしも経由で統一すると振込みまでの金額もハードルが低いので、まだ収益があまりない方には特におすすめ。

かんたんリンクも大きすぎる問題が解決すれば悪いツールではないので、今回の記事も参考に自分なりにカスタマイズしてみてください。

それではまた!!

たもトピ・大
たもトピ・大

シェアしていただけると励みになります

この記事をお届けした
『たもトピ』の最新情報を、
いいねしてチェック!