blogger.freewebmaster.info/web/Cross-Column2

22 января 2013

Как изменить рамку и фон изображения в Blogger?

Странно, но изначально Blogger настроен так, что при загрузке изображения, создает вокруг него довольно широкую рамку. Причем, изменить параметры рамки встроенными инструментами, сервис не позволяет. Некоторые блогеры советуют добавить свой стиль CSS для отдельных изображений. Это можно сделать на вкладке "шаблон", кнопка "Изменить HTML". Я же не вижу необходимости оставлять вообще рамки, поэтому просто убрал ее в существующем стиле.

Допускаю, что в разных шаблонах может быть разный код, ответственный за редактирование рамки и фона загруженного изображения, поэтому буду сразу указывать название шаблона. Часть кода шаблона, содержащая ".post-body img," указывает на то, что именно здесь задаётся CSS-стиль рамки и фона изображения. Такой код можно найти с помощью панели управления Blogger, на вкладке "шаблон", кнопка "Изменить HTML". В шаблоне "Водяной знак" (watermark), включая все его стили, код содержится в условном разделе /* Widgets*/.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
    padding: 5px;
    background: #fff;
   -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); }
.post-body img, .post-body .tr-caption-container {
    padding: 8px; }

Редактирование рамки изображения
Если фон картинки настраивается в один тон с внешним фоном, то визуально изменение размера рамки мы не увидим, поэтому попробуйте сначала определиться именно с ней. Ширина рамки устанавливается строчками padding: 5px; и padding: 8px;. Установив значение 0px вместо 8px, рамка сведется к нулю. Эффект тени рамки изображения можно отредактировать в строке "box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);". Три параметра в пикселях отвечают за величину боковой, нижней тени и за её размытость. Rgba меняет цвет.

Изменение фона изображения
Изображение может содержать прозрачный фон, например, если это логотип в виде текста на таком фоне. В этом случае, после загрузки, текст окажется на белом фоне, что может резко контрастировать и не красиво смотреться на основном фоне сайта. Строчка "background: #fff;" задаёт фон прозрачного слоя картинки, которую, в случае логотипа в виде текста на прозрачном фоне, лучше закомментировать. Тогда фон изображения сольётся с общим фонов и будет неплохо смотреться.

В шаблоне "Простой" ("Simple"), включая все его стили, код содержится в условном разделе /*Posts*/.
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
     padding: $(image.border.small.size);
     background: $(image.background.color);
     border: 1px solid $(image.border.color);
     -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
     -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
     box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Для слияния фона изображения с общим фоном, закомментируйте строку
<--! background: $(image.background.color); -->

Эффект тени рамки изображения можно убрать, закомментировав строку
<--! box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -->

P.S. Если для логотипа в виде текста на прозрачном фоне, в случае слияния с общим фоном эффект тени рамки выглядит не лучшим образом, то для иных изображений, наоборот, тень бы украсила внешний вид. Однако изменения в шаблоне применяются ко всем картинкам. Для отдельных изображений можно добавить свой стиль CSS, на вкладке "шаблон", кнопка "Изменить HTML".


Комментариев нет:

Отправить комментарий