[Easy link] Customize to a discreet design: If Affiliate
What is a simple link?
Affiliate Easy Links makes it easy to create links to multiple shopping sites like Rinker and Kaeleva.
What is a simple link?
It is a function that allows you to easily create a simple card-type affiliate link (responsive). Please enter the product page URL of Rakuten Ichiba or Amazon.co.jp or the search keyword in the URL field.
https://af.moshimo.com/af/shop/service/easy-link-card
It's very convenient because you can enter the URL of one product page, but it's a little overwhelming by default, or I'm not good at big design.
It's long vertically like this
This time, I customized it to a simple and unobtrusive design.
links
Where I changed
- Product name: Reduce the font size.Bold.
- Button size: Miniaturization.Margins are also reduced.
- Below the button: Removed wide margins.
- Button: From orange to cream.Added a three-dimensional effect.
- When mouse over: Added motion to press the button.
- Image size: Reduced.
Codes
Appearance customization → Add the following code to the CSS.
/ * If Affiliate Easy Link Customization * / / * --- Product Title --- * / p.easyLink-info-name a {font-size: 16px! Important; font-weight: bold;} / * --- Button size --- * / 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;}} / * --- Remove the blank under the button --- * / div.easyLink-box {padding: 10px;} div.easyLink-box div.easyLink-info p.easyLink-info-btn a: last-child {margin-bottom: 0! important;} / * --- Button color --- * / 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);} / * --- Mouse over effect --- * / a: hover.easyLink-info- btn-amazon, a: hover.easyLink-info-btn-rakuten, a: hover.easyLink-info-btn-yahoo {transform: translateY (0.1em)} / * --- Image size --- * / div. easyLink-box di v.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;}
The blog that I used as a reference
Customize your affiliate's easy links!Button color, text change, etc.