【간단 링크】 겸손한 디자인으로 커스터마이즈 : 만약 제휴
간단 링크란?
만약 제휴의 간단 링크는, 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; }
참고로 한 블로그
만약 제휴의 간단 링크를 커스터마이즈!버튼 색이나 텍스트 변경 등