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

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

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

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

Дизайнер шаблонов Blogger

Прежде всего откройте Дизайнер шаблонов 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)
}

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

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

  1. Ответы
    1. Можно чуть больше конкретики? Что именно не сработало?
      На ресурсе, что у Вас в профиле значится, я вижу следующее:

      [q].content-outer, .content-fauxcolumn-outer, .region-inner {
      max-width: 1000px;
      min-width: 1000px;
      }[/q]

      То есть Вы изменений, что описаны в статье, не произвели.

      Удалить
  2. Давно об этом мечтала!
    Сделала!
    Правда, не знаю как проверить, но мне кажется, что работает...[img]http://r11.imgfast.net/users/1111/19/40/96/smiles/1853893524.gif[/img]
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. В первых двух блогах, что у Вас в профиле, эта или ей подобная методика явно реализована. В третьем - нет ;-)

      Удалить
    2. У меня вопрос.

      На этом блоге реализована, описанная в Посте технология или нет ?

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

      А чтобы оценить возможность использования Ваших кодов, хочу знать
      ответ : использована ли эта технология на Вашем Блоге ?

      Это не претензия. Это вопрос. Спасибо за Ваш комментарий

      Удалить
    3. Юрий, у меня эта технология не реализована. Я при формировании интерфейса данного блога руководствовался тем, что у 90% пользователей разрешение экрана 1024х768 (1024х600) или выше, и они открывают браузер на весь экран. Отсюда и размеры рабочей области блога. За счет клякс по бокам, интерфейс немного шире 1024 пикселей и при подобном разрешении может появиться прокрутка, но рабочая область блога полностью укладывается в эти размеры, и в худшем случае страницу просто нужно немного отцентрировать, чтобы весь текст был перед глазами.

      У Вас, видимо, тот грустный случай, когда разрешение экрана меньше... Тут уж, извините, но подстроиться под всех невозможно - приходится выбирать большинство. Наверняка ведь есть и такие, кто до сих пор сидит за первым пентиумом с Windows 98 и IE4. Что же, мне и под них подстраиваться? Увы, всем никогда не угодишь!

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

      Смущает само наличие прокрутки (разве что, заценить Кляксу). Не плохо, кстати

      Вернемся к баранам.
      1. Вы фиксировали жестко ширину : основная часть + боковая панель = 1024, а на края еще 476 ?
      2. По каким причинам отказались от "резины" ?
      3. Если реализовывать механизм из Поста, конкретней 100 % меняем на что ? (нужен ответ точный)

      Спасибо

      Удалить
    5. 1. Зачем Вам параметры интерфейса моего блога, мне непонятно.
      2. Потому что мне нравится так, как у меня оно есть сейчас.
      3. Статью ВНИМАТЕЛЬНО прочтите! В исходном шаблоне нет никаких "100%", чтобы их на что-то менять.

      Знаете, уважаемый, мне не нравится тон нашей беседы. Вы мне как будто допрос устраиваете. Будьте любезны, формулируйте свои мысли чуть менее резко и напористо. Вам здесь никто и ничем не обязан.

      Удалить
  3. Я как раз в двух блогах это применила! Значит работает! Ура! [img]http://r11.imgfast.net/users/1111/19/40/96/smiles/2154879677.gif[/img]

    ОтветитьУдалить
  4. Это не допрос
    меня заинтересовал Ваш опыт.
    я хочу разобраться в том, чего не понимаю.

    Написано в посте:
    "Вместо значения $(content.width) мы пропишем 100%".
    Прошу разъяснить Вашу фразу из поста

    Но если Вы не хотите, то я неволить не буду.
    Имеется масса других блогов

    ОтветитьУдалить
    Ответы
    1. Что именно Вам непонятно в этой фразе? Что может быть проще и понятнее указания "заменить А на Б"?

      Удалить
    2. так и поставить 100 % ?

      Удалить
    3. Да, так и поставить. Только без пробела.

      Еще вопросы уровня "как сложить 2 и 2"?

      Удалить
  5. Все получилось, огромное спасибо )))

    ОтветитьУдалить
  6. Я всё сделала - поменяла на 100%. Но перед этим изменилп пиксели. И как-то даже необычно стало что ли! Слишком широко. Надо бы привыкнуть! :thanks:

    ОтветитьУдалить
  7. Спасибо, все работает. Если нужны примеры, см. ссылку в моем профиле.

    ОтветитьУдалить
  8. Купила новый комп с большим экраном, и там мой блог не очень смотрится в "резиновом" варианте. Вернула все назад, но появилась внизу прокрутка :wall: Что я только не делала - не уходит! Тимофей, помогите!!! :sos:

    ОтветитьУдалить
    Ответы
    1. Алия, я уже подзабыл адрес Вашего блога. А профиль Blogger у вас блокирован для просмотра. Мне в сущности не откуда взять адрес...

      Удалить
  9. Вот http://kulinariya123.blogspot.com/ Может быть вы поймете в чем может быть дело... И смайлики тоже попали. Проверила в шаблоне - все на месте... Катастрофа!

    ОтветитьУдалить
    Ответы
    1. Никакой прокрутки внизу я не наблюдаю. А вот со смайликами и цитатами помочь, я надеюсь, смогу!

      У Вас три ссылки на мои скрипты, которые надо попросту удалить! Они нерабочие и тормозят загрузку блога. К тому же у них имеются рабочие аналоги.

      <script src='http://sunctorus.narod.ru/blog/smiles/smiles.js' type='text/javascript'></script>
      <script src='http://sunctorus.narod.ru/blog/widget_quote.js' type='text/javascript'></script>
      <script src='http://sunctorus.narod.ru/blog/widget_quote.js' type='text/javascript'></script>


      А вот ссылочку на скрипт:

      <script src='http://aboutblogger.googlecode.com/files/widget_smiles.js' type='text/javascript'></script>

      ...надо заменить на такую:

      <script src='http://aboutblogger.googlecode.com/files/widget_smiles_ln.js' type='text/javascript'></script>

      Также, советую немного доработать скрипт публикации картинок в комментариях. У Вас при текущем интерфейсе нужно вводить ограничения на размер картинок. Почитайте мою соответствующую статью. А то картинки выползают за границы интерфейса, как, к примеру, здесь. Кстати, вполне возможно, если Вы видите прокрутку не везде, а на какой-то конкретной странице, то, возможно, она вызвана как раз таки неформатной картинкой!

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

      <script src='http://rethna30.googlepages.com/smiley.js' type='text/javascript'></script><noscript><a href='http://introblogger.blogspot.com' target='_blank'><span style='font-size: x-small;'>Add Smilies</span></a></noscript>

      Удалить
    2. По поводу избыточной горизонтальной прокрутки... Поищите этот код:

      html body .content-outer {
      max-width: 75%;
      min-width: 0;
      width: 100%;
      }


      И попробуйте убрать там параметр max-width: 75%;.

      Удалить
  10. Тимофей, у меня нет слов!!!
    Вообще не понимаю, как такое возможно!!!
    Блок выровнялся, смайлики появились! Три ссылки удалила, скрипт заменила, старый скрип смайликов тоже удалила... Просто чудеса!!! Вы просто мастер!
    Спасибо вам огромное!!!
    П.С. Пойду копаться в скрипте публикации картинок в комментариях

    ОтветитьУдалить
  11. По поводу скрипта публикации картинок в комментариях...
    Поставила как у вас - 100% и все получилось!!!
    Еще раз спасибо! Чтобы бы мы без вас делали!

    ОтветитьУдалить
  12. Тимофей, вы так мне помогли, что мне уже не удобно вас просить снова... Только если вам не трудно и есть время, не моли бы вы мне подсказать, почему во втором моем блоге картинка все равно вылазит за поля. Ставила даже 80% - ничего не меняется. Вот здесь http://asbo-egipet.blogspot.com/2012/10/blog-post_3016.html

    Может быть поставить в пикселях?
    П.С. Кстати, в этом блоге перестала работать стрелочка к быстрой отправке комментариев :~(

    ОтветитьУдалить
    Ответы
    1. #comment-img {
      max-height: 500px;
      max-width: 550px;
      }


      550px замените на что-то поменьше.

      #comment-img {
      max-height: 400px;
      }


      А это, по ходу, лишний код. Его, думаю, можно безболезненно удалить.

      Удалить
    2. А кода стрелочки перехода к форме отправки комментариев я у Вас, в том блоге, если честно, вообще не наблюдаю.

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

      Удалить
  13. Я правильно понимаю, что если в коде прописана ширина, например, виджета (тот, что html/css) и пр., то надо менять все значения на проценты?

    ОтветитьУдалить
    Ответы
    1. Общего правила нет. Тут надо смотреть в каждом конкретном случае.

      Удалить
  14. Тимофей, добрый день. Во первых спасибо Вам за столь информативный блог. Все очень по делу - нашла у Вас много полезной информации. Жаль что нет продолжения Вашего блога. Второй момент такой: возник вопрос. Я начинающий блоггер создаю свою площадку на блогспоте. Мне понравилась идея резиновой страницы. Применила ее у себя. Но возникла проблемка - сделала изображение для шапки загрузила, но она разместилась не по центру, а в левой части страницы. Вопрос: какой код и куда нужно ввести чтобы изображение шапки всегда на любых размерах мониторов вставало четко по центру при использовании фишки резинового сайта? Спс.

    ОтветитьУдалить
    Ответы
    1. Ань, ссылочку на Ваш блог дайте - я посмотрю.
      Универсального способа нет. Нужно смотреть индивидуально.

      Удалить
  15. 3дравствуйте Тимофей, спс за отзывчивость - вопрос с центрированием шапки решен(по крайней мере на моем мониторе все ровненько) Отыскала такой код, он помог: .header {
    background: url("адрес картинки") no-repeat scroll 50% 0 transparent;
    height: 241px;
    position: relative;
    }
    Вот ссылка на мой блог http://berezhnayastudio.blogspot.ru. Буду рада Вашим комментариям или советам. Спс

    ОтветитьУдалить
    Ответы
    1. Просто с бухты-барахты что-то советовать я не буду. Будут вопросы - задавайте ;-)

      Удалить

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях