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

 

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

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

 

 

 

 

 

ブログ内で紹介しているおすすめのアプリです【漫画アプリ、ゲームアプリ、ライブ配信アプリ、オンクレ、マッチング、稼げるアプリなど】

 

 

 

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

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

 

 

 

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

 

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

 

 

 

 

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

 

 

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

 

このように画面いっぱいになってしまいます。ボタンの色も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分

 

 

 

 

 

かんたんリンクの使い方

ではここからは「かんたんリンク」の使い方を解説していきたいと思います

 

 

まずトップページのメニュー「サイトの運営」より「かんたんリンク」を選択、もしくはバナーをクリックして下さい

 

 

 

 

かんたんリンクの作成画面に進みます。検索欄に商品販売ページのURLを入力するか、キーワードを入れます

 

 

検索ボタンをクリックすると検索結果が表示されるので該当する商品の画像を選びます

 

 

 

 

選択するとプレビューが見れるのでPC表示/スマホ表示を確認

 

 

設定で調整できること

  • 表示させたい画像を選択
  • テキストを編集
  • 表示させたいボタンの選択

 

 

 

HTMLソースを1行にする(WordPress対応)にチェックを入れてソースコードをコピー

 

 

 

これをブログのテキストエディタに貼り付ければ商品リンクの完成です

 

 

商品が検索表示されない場合の対処法

かんたんリンクは使いやすいツールではありますが、検索しても商品がヒットしない場合やAmazonは表示されるのに楽天やyahoo!は商品ページが無いということが度々あります

 

 

商品が表示されない時の対処法

  • Amazonで直接検索したページURLを貼る
  • 楽天とyahoo!は検索テキストを変える

 

 

 

Amazonで直接検索したページURLを貼る

Amazonの商品ページURLをそのままかんたんリンクの検索欄に貼り付けて検索する方法です

 

 

かんたんリンクで商品を検索しても表示されない場合はAmazonからURLをコピーして貼り付けるとお目当ての商品がダイレクトで表示されるのでこの方法が単純で手間は無いと思います

 

 

 

楽天とyahoo!は検索テキストを変える

Amazonと楽天とyahoo!の3つともリンクを作成する時は、検索プレビューで表示させた時に商品が表示されるかチェックしましょう

 

 

Amazonは表示されているけれど楽天とyahoo!が表示されていないことがあるため、そのままブログに貼り付けるとボタンをクリックしても商品ページが無いことがあります

 

 

 

対処法は商品名のテキストをわかりやすい文字に変えること。長々と書いてあると検索されないのですっきりわかりやすく削除しましょう

 

 

テキストをタップすると鉛筆マークが出るので編集して下さい 

 

例えば、沈黙のWebライティング —Webマーケッター ボーンの激闘—〈SEOのためのライティング教本〉と表示されているのを沈黙のWebライティングだけ残しバッサリ削除

 

 

 

そして検索してみると、楽天とyahoo!にもばっちり表示されました

 

 

もしもアフィリエイトのかんたんリンクはとても使いやすいツールとなっているので登録がまだな方は是非

 

 

もしもアフィリエイト

 

 

まとめ

以上、かんたんリンクの使い方をご紹介しました

 

今回ご紹介したカスタマイズしたかんたんリンクはもう少し改良の余地があると思うので、またいつか追記したいと思います

 

 

 

 

 

 

※このかんたんリンクCSSコードをブログで紹介される方は外部リンクを入れていただけると嬉しいです

 

 

 

10記事ほどで合格できる初心者向けアプリ系のおすすめASP

 

 

 

 

おすすめの記事