もしもアフィリエイトでかんたんリンクを使う！小さく、カスタマイズする方法も紹介いたします！

1. はじめに
2. もしもアフィリエイトのかんたんリンクの使い方！
- 2.1. かんたんリンクの使い方
3. もしもアフィリエイトのかんたんリンクを小さく表示する方法
- 3.1. 1.　かんたんリンクの商品名を編集してなんとか小さくする方法
- 3.2. 2. もしもアフィリエイトかんたんリンクを小さくカスタマイズ！
4. もしもアフィリエイトのかんたんリンクのCSSを自由にカスタマイズする方法
5. 最後に

はじめに

こんにちは！

ブログの記事の中で、楽天市場やAmazonのアフィリエイトのリンク先を貼り、

商品紹介をしたい時がしばしばあるかと思います。

私も他のブログなどを読んでいて、下記のように商品をかっこよく紹介したい！

リンク

実はこの商品紹介リンクは非常に簡単につくることができます！

その方法はもしもアフィリエイトのかんたんリンク

を利用していただくだけです！今回はもしもアフィリエイトのかんたんリンクを使った、アフィエイトタグを簡単に作る方法から、

完成したリンクを小さく表示させる方法、自由にCSSをを編集してかんたんリンクをカスタマイズする方法を紹介いたします！

この記事で紹介する内容

1.　もしもアフィリエイトのかんたんリンクの使い方

2.　かんたんリンクを小さく表示する方法

3.　かんたんリンクのCSSを編集してカスタマイズする方法

もしもアフィリエイトのメリット、登録方法に関しては下記記事で紹介しております！

もしもアフィリエイトのメリット、完全無料登録方法を紹介！

もしもアフィリエイトのかんたんリンクの使い方！

まず最初にアフィリエイトのかんたんリンクの使い方を紹介いたします！

まだ登録されていない方はまずは登録をしましょう。

もしもアフィリエイトに登録！

注意

かんたんリンク機能は、もしもアフィリエイトへの登録と楽天もしくはAmazonとの提携が完了していないと使えません。提携方法は下記で紹介しております。

楽天やAmazonの提携方法

かんたんリンクの使い方

1.もしもアフィリエイトのTOPページから”かんたんリンク”をクリック

2. 商品URLを確定する【2つ方法があります！】

つぎにどの商品を紹介するのかを設定いたします。

商品を決める方法は2つあります！①の方法で出したい商品がうまく表示されない場合は②の方法を試してみましょう！

①商品キーワードから探す

探したい商品のキーワードをクリックしましょう。

つぎに検索窓の下に商品一覧がでてきますので、”商品画像”をクリックしましょう。

次にスクロールしていただき、”HTMLソースを1行にする（WordPress対応）”に必ずチェックマークをつけましょう。

次にHTMLをクリックしていただくと、自動で全選択になりますのでコピーしていただき、貼りたいブログに直接貼り付けをしていただくことで

かんたんリンクの完成です！

②直接商品URLを記入する方法

こちらはすでに紹介したい商品が決まっている場合に使う方法になります。もし①で紹介したい商品が見つからない場合はこちらの方法を利用しましょう！

まずは、楽天もしくはAmazonで商品検索していただきリンク先URLをコピーしましょう。

実際の画面を確認する。

つぎにもしもアフィリエイトの簡単リンクのキーワードを入力する欄に直接商品URLをコピー＆ペーストをしましょう。

そして先程と同じように、HTMLを一行にするにチェックマークをつけていただきソースコードをコピー＆ワードプレスのブログに貼り付けすることで完成です！

もしもアフィリエイトのかんたんリンクを小さく表示する方法

次にかんたんリンクを使っていると、スマホでリンクをみるとかんたんリンクがでかい・・・！という悩みが生まれきます。

かんたんリンクの表示を小さくカスタマイズする方法を紹介いたします！

1.　かんたんリンクの商品名を編集してなんとか小さくする方法

上記の画像をみていただくと、商品名が長いので画像が縦長に大きくなっています。つまり商品名を短くすることで少しは幅を小さくすることができます。

かんたんリンクの商品名のテキストを編集する方法は、プレビューで表示されている商品名にマウスオーバーをしていただくと、ペンマークが表示されますので、そちらをクリックしてテキストを編集することができます。

実際に、商品名を短くすると下記の様になります。（スマホ表示）

小さくなりましたね！次にもう一つの方法を紹介いたします。

2. もしもアフィリエイトかんたんリンクを小さくカスタマイズ！

つぎにCSSを直接編集して、小さくする方法になります。

CSSを編集？！むずかしそう・・・と思われる方もいるかと思いますが、非常に簡単です！すばらしいカスタマイズされているCSSをすでに公開している方がいますので、そちらをブログのCSSに追加するだけで完成です！

CSSをブログに追加する方法、編集する方法はこちら

下記CSSをコピーしてWordpressのテーマCSSに追加をしましょう。

Earn LIFEさんの素晴らしい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: 13px !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:#00FFFF!important; } .easyLink-info-btn-rakuten{ 
		background:#FF00FF!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;
}}

/* もしもアフィリエイトかんたんリンクデザイン調整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: 13px !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:#00FFFF!important; } .easyLink-info-btn-rakuten{

background:#FF00FF!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;

}}

実際に追加していただくと,下記のようなデザインになります！だいぶスッキリしましたね！

リンク

もしもアフィリエイトのかんたんリンクのCSSを自由にカスタマイズする方法

次に、自分仕様にCSSをカスタマイズしたいという方向けの記事になります！

ここで紹介する変更できる要素は、”画像サイズ”、”ボタンの色”、”テキストサイズ”、”枠線のデザイン”になります！

上記該当箇所のCSSをカスタマイズすることでかんたんリンクのデザイン、サイズ、枠線などを編集することができます！ちなみに上記はプラグラミングでよく使うATOMというエディターを使っております！

プログラミングのエディターに興味がある方は下記記事をご参考ください！

プログラミングエディーター無料のATOMを紹介！

最後に

いかがでしたでしょうか？今回はワードプレスでアフィリエイトをタグを作成する便利なもしもアフィリエイトのかんたんリンクの使い方、小さくカスタマイズする方法、CSSを編集する方法を紹介させていただきました。

他にも、もしもアフィリエイト×サーチコンソールの連携など別記事でも紹介しております！

もしもアフィリエイトでかんたんリンクを使う！小さく、カスタマイズする方法も紹介いたします！

目次 1. はじめに2. もしもアフィリエイトのかんたんリンクの使い方！2.1. かんたんリンクの使 […]

またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください！

TechAcademy(テックアカデミー）のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします！

目次 1. はじめに 2. TechAcademyとは？ 2.1. 運営会社 2.2. TechAc […]

ドコモアフィリエイトというASPはご存知ですか？
2020年からドコモが公式で始めたアフィリエイトサービスになります！
まだ認知度は低いですが、他には提供していないドコモのアフィリエイトが多数掲載されているのでおすすめです！

新サービスドコモアフィリエイトの記事はこちら！

おまめの余談

モバイルバッテリーでパソコンが充電できるのご存知でしょうか？
USB PD（45W）ポートがあるAnkerの下記
モバイルバッテリーですとパソコンの充電も可能の
超超超高性能になります！
さらにPC充電用のコードもついているため
こちらを購入するだけまる1日外でパソコン、スマホ生活ができてしまいます！

Anker PowerCore+ 26800 PD 45W (26800mAh 2ポート超大容量モバイルバッテリー)【PSE認証済 / Power Delivery対応 / USB-C入出力ポート / USB-C急速充電器付属】iPhone / iPad / Android 他各種対応

created by Rinker

人生が変わるかも？本気でプログラミング教室に関して解説しております。

ご存知ですか？Amazonベーシックを・・・

知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！

Let`s Share Happy! B!

おまめ

プログラミング専攻後営業職へ
楽天での年間購入金額80万以上笑
2020年5月から本格的にブログの運営をスタート
2020年11月に月間1.2万PV突破
2020年12月に月間1.8万PV突破
2021年3月に月間3.0万PV突破
【投資関係】【初心者ブログ運営】【PCスキル】【ライフスタイル】をメインで公開していきます！
2020年5月から本格的に始めたので、ブログを今から立ち上げたい、最近立ち上げた方でもわかりやすく記事を作成していけるよう努めます！
Twitter発信中！一緒に頑張りたい方ぜひフォローしてくれると嬉しいです^^