Шаблон блога на всю ширину экрана

Всем доброго времени суток. Наверняка многие видели или задумывались над тем, как смотрится блог на широкоформатных мониторах. Чаще всего это напоминает тоненькую полоску, которая тянется через весь экран. И совсем не радует глаз. Поговорим сегодня о том как это можно исправить, чтобы все читатели получали удовольствие от просмотра блога.

Подгоним шаблон блога на всю ширину экрана, растянем его, сделаем резиновым (так это называется), чтобы на мониторах с разным разрешением экрана он смотрелся более презентабельно.

Сразу обращу ваше внимание, что говорить будем о стандартных шаблонах Blogspot.
И попрошу оставить все свои страхи про шаблон. А просто сделайте резервное копирование или создайте блог для своих экспериментов по подобию рабочего. Совершенно небольшие изменения будем вносить непосредственно в шаблоне.

Вот так обычно мы видим наше творение.

ширина блога

Чтобы это всё немного растянуть необходимо зайти во вкладку шаблон-изменить HTML и с помощью горячих клавиш CTRL+F (подробнее здесь) находим вот такую строку.

.content-outer, .content-fauxcolumn-outer, .region-inner {

Ниже мы видим свойства стилей, где не указаны никакие значения.

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

Сейчас только добавим в процентном отношении значения ширины 100% для каждого из них. Изменяем просто $(content.width);  чтобы это выглядело вот так.

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: 100%;
        max-width: 100%;
        _width: 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)
}

И удалить в нём строку, которую я выделила синим цветом.

Лучше бы, конечно, всё это сделать когда только начинаем создавать блог. В некоторых случаях возможно, придётся подгонять ширину боковых колонок и центральной части, указав их нужную ширину в процентах. Это, как вам будет угодно. В стандартных шаблонах Блоггер это строки такого вида.

 .main-inner .column-center-outer{-центральная колонка.
 .main-inner .column-left-outer {-левая колонка.
 .main-inner .column-right-outer {-правая колонка.
     
Вот, пожалуй, и всё по этой теме. Буду рада, если информация окажется для вас полезной. Спасибо, что заглядываете в мои шпаргалки. До новых встреч.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


31 комментарий:

  1. Недавно один знакомый "крутой" вебмастер на мой вопрос почему его сайты такие узенькие и размещается точнёхонько в середине монитора, а по бокам сантиметров по 10 синего фона, "авторитетно" сказал мне, что только такие сайты считаются самыми лучшими :) А ты тут людей учишь шаблоны растягивать :)

    ОтветитьУдалить
    Ответы
    1. Олли, привет. Мне кажется тут дело вкуса. Тут уж кто что предпочитает.

      Удалить
  2. Если обратить внимание, то многие крутые сайты именно такие, например youtube. У меня именно такой вытянутый монитор и многие блогеровские сайты выглядят у меня не очень красиво, т.к. стандартного фона не хватает и по бокам дополнительные полоски, поэтому я советую всем выбирать бесшовные фоны. Не знаю на сколько это решение подходит для блогов. Я боюсь, что если расширю себе поле для творчества, то потом на квадратных мониторах у читателях может не хватить места, будет выглядеть не корректно. А еще люблю менять фоны. Только чего-то у меня сегодня функция настроить шаблон во всех блогах зависает.

    ОтветитьУдалить
    Ответы
    1. Олеся, бесшовные фоны и резиновый шаблон это разные вещи.

      Удалить
    2. Я понимаю, предлагаю как альтернативу.

      Удалить
  3. Вика, у меня действительно широкий монитор, что мне сделать, чтобы сообщения смотрелись хорошо на любых мониторах? Как в этом сообщении или еще как?
    И как установить форму обратной связи?
    Честно - ничего в этом не понимаю, все методом научного тыка...

    ОтветитьУдалить
    Ответы
    1. Мария я Вам отписалась у вас в блоге. Хотя бы пока так сделайте. А форма связи родная от блоггер так. Админпанель-вкладка дизайн-добавить гаджет. Слева-другие гаджеты и выбираем форма связи.

      Удалить
    2. Вика, спасибо большое!

      Удалить
    3. не за что. Удачи Вам.

      Удалить
  4. Как я понимаю, что описанное Вами не подстраивает страничку под монитор, т.е. у кого то блог влезет в монитор целиком, а у кого то, только часть странички.

    ОтветитьУдалить
  5. Нет, Иван. На то он и резиновый. На всех мониторах влезет.

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

      Удалить
    2. Нет, Иван. У меня сторонний шаблон и пока ни как руки не дойдут полностью разобраться. Тут ведь дело не о том входит ли страница. А о том чтобы убрать эти пустые полосы по бокам блога.

      Удалить
    3. Ну а если я хочу что бы отступы у меня были и вся страничка в ширину влезала, то какие мне цифры надо ставить в вашем коде?

      Удалить
  6. Не надо ничего вставлять. И так вся страничка влезет.

    ОтветитьУдалить
    Ответы
    1. Так отступов то не будет.

      Удалить
    2. Иван, я что-то не пойму про какие отступы ты говоришь. В шаблонах по бокам 2 полоски фона. Мы подобным образом увеличиваем поле для контента.
      вместо постоянных пикселей, мы используем относительные - проценты. В этом случае браузер сам рассчитывает ширину окна, принимая ее равной 100%, 100% на большом или 100% на маленьком.

      Удалить
    3. Виктория, я говорю про отступы, которые убираются этим кодом. Вы выше мне сказали, что благодаря этому коду, страничка блога влезет полностью в любой монитор.

      Удалить
    4. Теперь понятно. В этом случае нужно использовать только первый код. где указано процентное отношение. И отступы есть и страница подстроится под любой экран.

      Удалить
    5. А ширину боковых отступов ни как не отрегулировать? Чтоб было так же как на самом первом скриншоте.

      Удалить
  7. Тут можно уменьшить проценты в коде.

    ОтветитьУдалить
  8. Здравствуйте Виктория. Я на вашем блоге недавно, но при помощи некоторых фишек уже преобразил большую часть своих лендингов в лучшую сторону. Спасибо вам за это! Я в основном специализируюсь на рекламных материалах и лендинг страничках, и вот ранее читал других авторов и не находил именно тех вещей которые реально пригодились именно мне.) Притом посмотрев ваш блог выражаю огромное уважение за проделанную работу, информации очень много и самое главное полезной. Успехов Вам!

    ОтветитьУдалить
  9. Jeddak, Спасибо вам за комментарий и очень приятно слышать, что могу чем-то помочь. Удачи и Вам во всём. Заглядывайте.

    ОтветитьУдалить
  10. Вика, добрый день! Спасибо и за наводку, и за то, что благодаря Вашему блогу, все исправила.

    ОтветитьУдалить
    Ответы
    1. Валерия, доброго вечера. Это правда, немного другое. Я вам на почту написала. У Вас нужно уменьшить или ширину центральной колонки, которая у Вас 800px; или ширину боковых колонок - они у Вас по width: 280px;. Вкладка тема- настроить и там ползунком в настройках ширины отрегулировать. У Вас общая ширина body {
      min-width: 1490px; - это многовато. Отсюда и выходит бок за пределы экрана.

      Удалить
    2. Ох, Вика. На почту ничего не пришло, может, я опять где-то с настройками намудрила))). Поможите)))). Какую общую ширину надо ставить? Я вообще дизайн переделала в итоге, так как картинка на заголовке шапки либо не доходила до края, либо вылезала. Решила всё белым фоном под белой картинкой))). Но идея с резиновым блогом мне понравилась, если я ее правильно поняла).

      Удалить
  11. Два часа ночи... Почту нашла))). Поиграла с шириной до 1200 пикселей, но воз почему-то, судя по сервису проверки, и ныне там(.

    ОтветитьУдалить
    Ответы
    1. Лера, я сейчас посмотрела ваш блог нормально вижу. А то что на сервисе проверяете это нужно настроить мобильную версию. Вкладка Тема - мобильная - шестерёнка - дополнительно. Я не писала об этом но вот статью нашла, хоть и не свежая но актуальная http://blogohelp.blogspot.com/2011/11/blogger.html

      Удалить
  12. Про картинку не совсем поняла но можно попробовать вот так http://www.shpargalochki.ru/2016/11/how-to-center-blogger-header-image.html

    ОтветитьУдалить
    Ответы
    1. Вика, огромное Спасибо!!! Периодически "живу" у Вас в блоге.

      Удалить
  13. Лера, обращайтесь если что. стараюсь отвечать всем. Добра, удачи и успехов в блоговедении.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск