もしものかんたんリンクをカスタマイズ！スマホで短く表示させる方法

f:id:zizichan1103:20200601182037j:image

こんにちは。

旅好きアラサー女子の世界一周ブログを運営しているziziです。

今回は、もしもアフェリエイトのかんたんリンクのカスタマイズについてです。楽天やAmazonの商品を一度にリンクできる便利な機能ですが、少し不満があったので改善してみました。

もしものかんたんリンクが長すぎる問題
解決方法①商品名を編集して短くしよう！
解決方法②CSSでカスタマイズしよう！
かんたんリンクをカスタマイズする際の注意点
かんたんリンクのカスタマイズCSS参考サイト

もしものかんたんリンクが長すぎる問題

もしもアフィリエイトのかんたんリンクですが、スマホで見たときに長すぎるんです。

f:id:zizichan1103:20200601152148p:plain

こんな感じで表示されるのですが、スマホで見ると画面いっぱい縦長に表示されてしまう。。前からとっても気になってました。長いよ、長すぎるのよ、かんたんリンクさん！！

解決方法①商品名を編集して短くしよう！

とびきり簡単な解決方法がこちら。かんたんリンク作成画面で、商品名を編集できるんです。案外知らない方も多いのではないでしょうか。私、けっこう最近まで知りませんでした。。

では、やり方です。

まず、もしものかんたんリンク作成画面を開きます。

この本を掲載したい場合、何も編集せずにコードを貼り付けるとこんな感じ。赤枠で囲んだ商品名、長いですよね。これを短くしていきます。

f:id:zizichan1103:20200603103803p:plain

商品名の上にカーソルを持っていくと、黄緑色の鉛筆マークが出てきます。これをクリック。

f:id:zizichan1103:20200601152520p:plain

そうすると、商品名が編集できるようになります。

f:id:zizichan1103:20200601152601p:plain
一気に削って「アフェリエイトブログ」だけにしてみました。

f:id:zizichan1103:20200601152534p:plain

で、ここがミソなのですが、編集したあと必ず右上の「HTMLソース」を一度クリックしてください。クリックして下のコードをコピーします。クリックしないと、下に出てくるコードの商品名は変更前のままとなってしまいます。

f:id:zizichan1103:20200603110204p:plain

（左）ビフォー（右）アフター

商品名を短くしただけでも、見た目にスッキリしますよね。特に楽天サイトの商品名は、検索ワードに引っかかるように大量のキーワードが商品名に入っていることが多いので、余計な文字は消してスッキリさせたいところです。

解決方法②CSSでカスタマイズしよう！

続いてご紹介するのは、CSSでかんたんリンクをカスタマイズしてしまおう！という方法です。

こちらの記事を参考にさせていただきました。

goma.me

紹介されているコードをはてなブログのデザインCSSに貼り付けるだけで、このようなデザインに変更できます。

f:id:zizichan1103:20200601153516j:image

（左）ビフォー（右）アフター

ギュギュッと小さくまとめられていますよね！

リンクボタンのカラーもAmazon、楽天、yahoo!のテーマカラーになっているので、視覚的にもわかりやすくなりました。

コードは以下の通りです。

/* かんたんリンクカスタマイズ START */

/* 商品名タイトル文字 */

/* 商品名フォントサイズ */

div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-name {

font-size: 16px !important;

line-height: 17px !important;

font-weight:bold;

}

/* 商品MODEL名非表示 */

p.easyLink-info-model {

display: none !important;

}

/* ボタンの縦幅 */

div.easyLink-box div.easyLink-info p.easyLink-info-btn a{

padding:2px !important;

}

/* ボタンの間隔 704Px以上の画面*/

@media screen and (min-width: 704px) { div.easyLink-box div.easyLink-info p.easyLink-info-btn a{

margin-bottom:10px !important;

}}

/* --- ボタン調整 --- */

div.easyLink-box{padding:10px;}

div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {

margin-bottom: 10 !important;

}

/* リンクボタン調整 */

.easyLink-info-btn {

display: inline!important;

}

/* リンクBOX調整 */

.easyLink-box {

margin: 0 0 1.5em! important;

}

/* リンクボタンのフォント */

.easyLink-info-btn a{

margin: 5px 10px 5px 0!important;

padding: 0 12px!important;

line-height: 35px!important;

width: 44%!important;

box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;

font-size: 1em!important;

display: inline-block!important;

}

/* アマゾンリンクボタンの色 */

.easyLink-info-btn-amazon{

background:#ffb36b !important;

}

/* 楽天リンクボタンの色 */

.easyLink-info-btn-rakuten{

background:#ea7373 !important;

}

/* YAHOOリンクボタンの色 */

.easyLink-info-btn-yahoo{

background:#73c1ea !important;

}

/* ボタン内矢印アイコン */

.easyLink-info-btn a:before {

font-family: "Font Awesome 5 Free";

content: "\f0da";

padding-right: 3px;

}

/* 商品画像サイズ */

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: 130px !important;

max-height: 130px !important;

}

/* スマホの広告幅 */

@media screen and (max-width: 480px){

div.easyLink-box.easyLink-size-s {

max-width: 340px !important;

}}

/* スマホのボタン調整 */

@media screen and (max-width: 480px){

.easyLink-info-btn a{

margin: 5px 10px 5px 0!important;

padding: 0 12px!important;

line-height: 35px!important;

display: inline-block!important;

width: 44%!important;

box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;

font-size: 0.8em!important;

}}

div.easyLink-box {

border:double #CCC !important; /* ２重線 */

box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);

}

/* かんたんリンクカスタマイズ End */