【かんたんリンク】控えめなデザインにカスタマイズ：もしもアフィリエイト
かんたんリンクとは
もしもアフィリエイトのかんたんリンクは、Rinkerやカエレバのように手軽に複数のショッピングサイトへのリンクを作成してくれるます。
かんたんリンクとは
シンプルなカード型のアフィリエイトリンク（レスポンシブ対応）を簡単に作成できる機能です。URL欄に楽天市場かAmazon.co.jpの商品ページURL、もしくは、検索キーワードを入力してください。
https://af.moshimo.com/af/shop/service/easy-link-card
1つの商品ページのURLを入力すればOKなので非常に便利なのですが、デフォルトだと少し仰々しいというか、デカデカとしたデザインがちょっと苦手でした。
こんな感じで縦にも長い
それを今回、シンプルで控えめなデザインにカスタマイズしました。
リンク
変えたところ
- 商品名 ：文字サイズを小さめに。太字化。
- ボタンサイズ ：小型化。余白も縮小。
- ボタン下 ：広い余白を削除。
- ボタン ：オレンジからクリーム色に。立体感を追加。
- マウスオーバー時：ボタンが押されるモーションを追加。
- 画像サイズ ：小さくした。
コード
外観カスタマイズ → 追加CSSに以下のコードを追加します。
/* もしもアフィリエイト かんたんリンク カスタマイズ */
/* --- 商品タイトル --- */
p.easyLink-info-name a {
font-size: 16px !important;
font-weight:bold;
}
/* --- ボタンサイズ --- */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
padding:1px !important;
}
@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: 0 !important;
}
/* --- ボタン色 --- */
a.easyLink-info-btn-amazon, a.easyLink-info-btn-rakuten,a.easyLink-info-btn-yahoo {
color:#333333 !important;
background:#FFFDE7 !important;
border: 1.2px solid #808080 !important;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
}
/* --- マウスオーバー時エフェクト --- */
a:hover.easyLink-info-btn-amazon, a:hover.easyLink-info-btn-rakuten, a:hover.easyLink-info-btn-yahoo{
transform: translateY(0.1em)}
/* --- 画像サイズ --- */
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: 125px !important;
max-height: 125px !important;
}
参考にさせて頂いたブログ様
もしもアフィリエイトのかんたんリンクをカスタマイズ！ボタン色やテキスト変更など