物販アフィリエイトを行う際に便利なのが「もしもアフィリエイト」のかんたんリンク
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 の数字を変更して下さい
もしもアフィリエイト以外にも案件数の豊富なASPをお探しの方は是非ご覧下さい
アフィリエイトをするなら必ず登録しておきたいASPです
かんたんリンクの使い方
ではここからは「かんたんリンク」の使い方を解説していきたいと思います
まずトップページのメニュー「サイトの運営」より「かんたんリンク」を選択、もしくはバナーをクリックして下さい
かんたんリンクの作成画面に進みます。検索欄に商品販売ページの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!にもばっちり表示されました
もしもアフィリエイトのかんたんリンクはとても使いやすいツールとなっているので登録がまだな方は是非
アフィリエイトをするなら必ず登録しておきたいASPです
まとめ
以上、かんたんリンクの使い方をご紹介しました
今回ご紹介したカスタマイズしたかんたんリンクはもう少し改良の余地があると思うので、またいつか追記したいと思います
※このかんたんリンクCSSコードをブログで紹介される方は外部リンクを入れていただけると嬉しいです
10記事ほどで合格できる初心者向けアプリ系のおすすめASP
