Два способа как увеличить иконки блока «Поделиться» от Яндекс

 19 ноября 2017      
 HTML & CSS      
 комментария 2      
 1083

По-умолчанию размер кнопок блока социальных сетей «Поделиться» от Яндекс не превышает 24 пикселей. Напомню, что блок «Поделиться» помогает посетителям вашего сайта быстро публиковать ссылки на интересные им страницы в социальных сетях и блогах, и о нем я писал ранее. А в этой статье я расскажу как с помощью CSS изменить размер этих иконок.

Код вызова блока социальных кнопок Яндекс «Поделиться» выглядит следующим образом.


Два способа как увеличить иконки блока "Поделиться" от Яндекс

Код вызова блока Поделиться

Обратите внимание на имя класса стилей, который используется для оформления — ya-share2. Именно его мы и будем использовать для изменения размера иконок.

Как изменить размер кнопок Яндекс блока «Поделиться»

На своем сайте я использую следующий CSS код:

/* Социалка от Яндекса */

/* 1 */
.ya-share2__container_size_m .ya-share2__icon {
    height: 32px !important; /* 24px */
    width:  32px !important; /* 24px */
    background-size: 32px 32px !important; /* Увеличиваем кнопки, по-умолчанию: 24px 24px */
}

/* 2 */
.ya-share2__container_size_m .ya-share2__counter {
    font-size: 14px !important; /* Увеличиваем шрифт счетчиков, по-умолчанию: 12px */
    padding: 8px 10px 0 10px !important; /* 5px 8px 0 8px */
}

/* 3 */
.ya-share2__container_size_m .ya-share2__icon_more:before {
    line-height: 22px !important; /* 13px */
}
.ya-share2__container_size_m .ya-share2__popup_direction_bottom {
    top: 36px !important; /* 28px */
}

Как изменить все свойства блока Поделиться

Если хотите изменить блок социальных иконок от Яндекса до неузнаваемости, то посмотрите его HTML код, чтобы определиться с необходимыми стилями. Для этого щелкните на нем правой кнопкой мыши и выберите пункт «Исследовать элемент» в меню:


Исследовать элемент

Браузерный инструмент Исследовать элемент

После этого зная элементы верстки и их стили можно полностью оптимизировать отображение блока «Поделиться» в соответствии с дизайном вашего сайта.

CSS свойство TRANSFORM — альтернативный способ изменения размера иконок блока «Поделиться»

Если нужно просто увеличить размер иконок, то можно воспользоваться CSS3 свойством TRANSFORM. Чтобы кнопки стали в полтора раза больше, то есть вместо 24 пикселей увеличились до 32-х, используйте следующий CSS код:

.ya-share2__list {
  transform: translate(25%, 25%) scale(1.5);
}

Здесь,
scale задет масштаб, а
translate — сдвигает элемент на указанные значения по горизонтали и вертикали

Рекомендую прочесть:  Финансово-технический эксперимент по сбору денег Я.Соберу от сервиса Яндекс.Деньги

Благодарности

При написании статьи были использованы следующие источники:

  1. https://ru.stackoverflow.com/questions/539603/Размер-кнопок-в-блоке-Яндекс-Поделиться
  2. https://timbv.wordpress.com/2016/04/14/настройка-внешнего-вида-блока-подели/
  3. https://dolinacoda.ru/kak-uvelichit-knopki-podelitsya-ot-yandeksa/
Поделись этой страницей с друзьями!

Прочтите это обязательно

Как защитить адрес электронной почты от спам-ботов на Wordpress используя шорткод

Базы данных электронных рассылок пополняются в том числе и благодаря работе спам-ботов. Ранее я уже писал к ...

WordPress email shortcode wordpress спам Далее

MobiMover 3.0: бесплатный менеджер данных № 1 по переносу контактов, фото, видео и музыки для iPhone X, 8 и 8 плюс

Компания EaseUS объявила о выпуске новой версии MobiMover 3.0. Это третья версия ...

На правах рекламы iphone MobiMover Далее

Обсуждение: 2 комментария

  1. Сергеевич:

    Спасибо. Второй способ проще.

    Ответить
  2. Donat:

    Спасибо!
    Довольно много времени потратил на то, чтобы понять, что код для работы обрезается где-то в joomla

    Под статьями кнопки разместил плагином BSC Article Footer

    /* увеличиваю кнопки share */
    .ya-share2, .ya-share2 * {
    line-height: normal;
    transform: translate(3.5%, 10%) scale(1.07); }

    /* контролирую отступы между кнопками share */
    .ya-share2__list_direction_horizontal > .ya-share2__item {
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
    margin-bottom: 0;
    padding-right: 10px;
    }

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2018 © Технический блог
SQL - 91 | 0,113 сек. | 8.62 МБ
доступность сайта