Растягиваем интерфейс блога на всю ширину окна

Полагаю, многие заметили, что на широкоформатных мониторах при достаточно большом разрешении экрана, лента блога шириной в 700-800 пикселей смотрится неказисто - как тоненький ручеек посреди бескрайней равнины... Да, разработчики платформы Blogger (Blogspot) предоставили нам возможность растянуть интерфейс нашего блога аж до 1500 пикселей, но проблема в том, что это жестко заданный параметр, при увеличении которого блог будет смотреться плохо уже на мониторах с низким разрешением.

Как быть? Как растянуть наш блог на всю ширину окна браузера, но при этом угодить всей читательской аудитории, имеющей различные технические возможности? Об этом мы и поговорим в этой статье.

Метод, о котором я хочу вам рассказать в простонародье зовется резиновым. Суть его в том, что вместо постоянных величин - в нашем случае пикселей, мы будем использовать относительные - проценты. Благодаря этому, браузер сам оценивает ширину окна, принимая ее равной 100%, а потом обсчитывает размер остальных элементов, заданных в процентах, уже относительно этой ширины. Меняем ширину окна - браузер мгновенно снова все пересчитывает и размеры вновь подгоняются под изменившиеся условия.

Прежде всего откройте Дизайнер шаблонов Blogger (Дизайн->Дизайнер шаблонов) и в блоке "Регулировка ширины" задайте оптимальные параметры. Четко определитесь с шириной боковых панелей, поскольку для них мы оставим статичные, жестко заданные размеры. И определитесь с общей шириной блога - этот параметр нам потребуется, чтобы установить минимальные границы нашего дизайна, меньше которых блог, при уменьшении размера окна, схлопываться не будет. Последнее нужно для того, чтобы при критическом уменьшении размера окна наш дизайн не перекосило.

Итак, теперь откройте редактор шаблона (Дизайн->Изменить HTML) и найдите следующий код:

.content-outer, .content-fauxcolumn-outer, .region-inner {
  min-width: $(content.width);
  max-width: $(content.width);
  _width: $(content.width);
}

Подсвеченную третью строку мы немного видоизменим. Вместо значения $(content.width) мы пропишем 100%. Если вы хотите, чтоб интерфейс вашего блога был растянут на меньшее значение, то просто замените цифру 100 на ту, что вам больше нравится.

Мы почти достигли поставленной задачи - растянуть интерфейс нашего ресурса на всю ширину окна. Остались небольшие полосы справа и слева от ленты блога. Но тут способы избавиться от них разнятся - все зависит от типа шаблона, который вы используете в качестве основы. Ниже представлен способ, действенный для шаблонов, основой которым служит тема "Простая" из Дизайнера шаблонов Blogger.

Ищем следующий код и удаляем из него подсвеченную строку:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Вуаля! Наш блог растянут на всю ширину окна и сам подстраиваемся под его размер :-)