こんにちは。
旅好きアラサー女子の世界一周ブログを運営しているziziです。
今回は、もしもアフェリエイトのかんたんリンクのカスタマイズについてです。楽天やAmazonの商品を一度にリンクできる便利な機能ですが、少し不満があったので改善してみました。
- もしものかんたんリンクが長すぎる問題
- 解決方法①商品名を編集して短くしよう!
- 解決方法②CSSでカスタマイズしよう!
- かんたんリンクをカスタマイズする際の注意点
- かんたんリンクのカスタマイズCSS参考サイト
もしものかんたんリンクが長すぎる問題
もしもアフィリエイトのかんたんリンクですが、スマホで見たときに長すぎるんです。
こんな感じで表示されるのですが、スマホで見ると画面いっぱい縦長に表示されてしまう。。前からとっても気になってました。長いよ、長すぎるのよ、かんたんリンクさん!!
解決方法①商品名を編集して短くしよう!
とびきり簡単な解決方法がこちら。かんたんリンク作成画面で、商品名を編集できるんです。案外知らない方も多いのではないでしょうか。私、けっこう最近まで知りませんでした。。
では、やり方です。
まず、もしものかんたんリンク作成画面を開きます。
この本を掲載したい場合、何も編集せずにコードを貼り付けるとこんな感じ。赤枠で囲んだ商品名、長いですよね。これを短くしていきます。
商品名の上にカーソルを持っていくと、黄緑色の鉛筆マークが出てきます。これをクリック。
そうすると、商品名が編集できるようになります。
一気に削って「アフェリエイトブログ」だけにしてみました。
で、ここがミソなのですが、編集したあと必ず右上の「HTMLソース」を一度クリックしてください。クリックして下のコードをコピーします。クリックしないと、下に出てくるコードの商品名は変更前のままとなってしまいます。
(左)ビフォー(右)アフター


商品名を短くしただけでも、見た目にスッキリしますよね。特に楽天サイトの商品名は、検索ワードに引っかかるように大量のキーワードが商品名に入っていることが多いので、余計な文字は消してスッキリさせたいところです。
解決方法②CSSでカスタマイズしよう!
続いてご紹介するのは、CSSでかんたんリンクをカスタマイズしてしまおう!という方法です。
こちらの記事を参考にさせていただきました。
紹介されているコードをはてなブログのデザインCSSに貼り付けるだけで、このようなデザインに変更できます。
(左)ビフォー(右)アフター


ギュギュッと小さくまとめられていますよね!
リンクボタンのカラーも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-imgp.easyLink-img-box,div.easyLink-box div.easyLink-imgp.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; /* 2重線 */box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);}/* かんたんリンク カスタマイズ End */
コードの貼り付け場所は以下の通り。
はてなブログの管理画面
↓
デザイン
↓
カスタマイズ
↓
デザインCSS
かんたんリンクをカスタマイズする際の注意点
使用しているサイトテーマによっては、うなく表示されずデザインが崩れる可能性があります。変更する前にバックアップを取ってから作業することをオススメします。
設定が終わったら、web上の自分のサイトでAmazon、楽天、yahoo!それぞれのページにきちんとリンクされているかどうか確認しましょう!
私は、Amazonと楽天が「リンク先ページなし」になっていることに最近気づくという大失態をやらかしてました。。売り逃がしがあったかと思うと辛いです。こんなことにならないようにカスタマイズした際は、必ずリンク先を確認するようにしてください!
リンク先ページなしになったらどうすればいいの?
カスタマイズする前はきちんとリンク先に飛んでいたのに、カスタマイズ後にエラーになるということは、お使いのサイトテーマとCSSの相性が悪いと考えられます。
したがって、他のカスタマイズCSSを探すことをおすすめします。以下にご紹介します!
かんたんリンクのカスタマイズCSS参考サイト
かんたんリンクのカスタマイズCSSを公開してくれているサイトはたくさんあります。以下にリンクしておきますので、気に入ったデザインを使うと良いかと思います!
以上、もしものかんたんリンクをスマホでもスッキリ表示させる方法についてでした。
お役に立てれば幸いです!
👇初心者ブロガーにオススメの本
それではまた次回よろしくどうぞ(^^)
*****************************************************
ランキングに参加しています。
応援ぽち、よろしくお願いします!
↓ ↓ ↓
◎この記事を書いた管理人