[Простая ссылка] Настройте сдержанный дизайн: если вы являетесь партнером
Что такое простая ссылка?
Affiliate Easy Links позволяет легко создавать ссылки на несколько торговых сайтов, таких как Rinker и Kaeleva.
Что такое простая ссылка?
Это функция, которая позволяет легко создать простую партнерскую ссылку карточного типа (адаптивную). Введите URL-адрес страницы продукта Rakuten Ichiba или Amazon.co.jp или ключевое слово для поиска в поле URL-адреса.
https://af.moshimo.com/af/shop/service/easy-link-card
Это очень удобно, потому что можно вводить URL-адрес одной страницы продукта, но по умолчанию это немного подавляет, или я был немного слаб в большом дизайне.
Это длинно по вертикали, вот так
На этот раз я сделал его простым и ненавязчивым.
Где я изменился
- Название продукта: уменьшите размер шрифта.Смелый.
- Размер кнопки: Миниатюризация.Маржа также снижается.
- Под кнопкой: убраны широкие поля.
- Кнопка: от оранжевого до кремового.Добавлен трехмерный эффект.
- При наведении указателя мыши: добавлено движение для нажатия кнопки.
- Размер изображения: Уменьшено.
コ ー ド
Настройка внешнего вида → Добавьте следующий код в CSS.
/ * При простой настройке ссылки для аффилированного лица * / / * --- Название продукта --- * / p.easyLink-info-name a {font-size: 16px! Важно; font-weight: bold;} / * --- Размер кнопки --- * / div.easyLink-box div.easyLink-info p.easyLink-info-btn a {padding: 1px! Important;} экран @media и (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 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;}
Блог, который я использовал в качестве справочника
Настройте простые ссылки вашего партнера!Цвет кнопки, изменение текста и т. Д.