もしも「かんたんリンク」を小さくカスタマイズ､使い方と検索表示されない時の対処法

2020年9月20日

こんにちは、いりまめ＠iri_mame_です

物販アフィリエイトを行う際に便利なブログパーツ

Rinkerやカエレバを使って商品リンクを作っている方も多いとは思いますが、それよりももしもアフィリエイトの「かんたんリンク」が使いやすいんです

今から物販アフィリエイトを始めるなら、もしものかんたんリンクがおすすめ

今回はもしもかんたんリンクの使い方とCSSで小さくカスタマイズする方法をご紹介したいと思います

本記事でわかることは次の3つ

・かんたんリンクのカスタマイズ方法
・かんたんリンクの使い方
・かんたんリンクが検索に表示されない時の対処

もしも「かんたんリンク」とは
かんたんリンクの使い方
商品が検索表示されない場合の対処法
まとめ

もしも「かんたんリンク」とは

かんたんリンクは、もしもアフィリエイトに無料会員登録すれば使えるリンク作成ツールで、Amazonや楽天、yahoo!といった大手ECサイトの商品を紹介することができます

登録がまだな方はこちらから2〜3分で登録できます

A8.net

もしもアフィリエイト

もしもアフィリエイト登録方法の記事

もしもアフィリエイトの【登録方法】メリットと評判､初心者向けおすすめASP

2020.4.1

こんにちは、いりまめ＠iri_mame_ですブログでアフィリエイトを始めるにあたり、まず登録しておきたいASPが今回ご紹介するもしもアフィリエイト物販アフィリエイトをするには欠かせないサイトでAmazonや楽天、yahooといった代表的なECサイトの商品を紹介できる人気のASPとな...

かんたんリンクは使いやすいくていいのですが、難点は大き過ぎること

実際のスマホ表示がこちら

このように画面いっぱいになってしまいます。ボタンの色も1色だけでなんかデザインが微妙、、

ここまで主張し過ぎると「買わせたい感丸出し？」にも感じますし、せっかく書いた文章の邪魔をしてしまうのではという気もしてきます

なので出来るだけ控えめに表示出来るカスタマイズCSSを一つだけご紹介します

端末によって画面のサイズが違うためデザインが崩れる場合がありますが、それもご理解の上ご利用下さい

ご紹介するリンクデザインはこちら

先程のデフォルトデザインよりはすっきりして見栄えが良いかと思います

触ったのは

・外枠を二重線に
・外枠を大きく
・画像サイズを小さく
・文字サイズを小さく

・ボタンのカラーを変更

・MODELの非表示

デザインを変更するための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;
}}

今回参考にさせて頂いたブログは「ごまみーさん」と「すもぐりさん」です。多少アレンジも加えています

画像を大きくしたい場合は　max-height:130px　の数字を変更して下さい

デザインの種類や見栄えのいい表示方法がまた見つかりましたら追記していきますね

ドメインパワーを0→12にする方法。無料で10分