Как выровнять по центру изображение в шапке блога

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

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

Вариант, кода вставили картинку с описанием и название блога в разделе дизайн.

Заходим во вкладку шаблон изменить HTML. Находим строку ]]></b:skin> и над ней устанавливаем следующий код.

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

Результат. Картинка, заголовок и описание получились строго по центру.
выровнять изображение в шапке

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

#header-inner {
 background-size: cover;
 width: 100% !important;
 text-align: center;
 }
 #header-inner img {
 width: 100%;
 height: 100%;
 }


Чтобы описание блога было слева, то пишем это-

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}


Справа-
#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}

При изменениях нажимайте кнопку просмотр, чтобы видеть результат. И если всё нравится - сохранить.

Используя стили можно сделать картинку слева или справа на фоне.


#header-inner h1 {
  overflow: hidden;
  line-height: 150px; /* блок с текстом по вертикали */
  text-align: center; /* текст по центру по горизонтали */
  position: relative;
}
#header-inner h1:before {
  content: url(адрес картинки);
}


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

Подведите курсор на шапку блога и щёлкните правой кнопкой мыши. Выберете опцию ПРОСМОТРЕТЬ КОД. Откроется окно, где в левой части можно увидеть этот размер.


Некоторые начинающие блогеры, когда загружают готовую картинку в разделе дизайн - гаджет HEDER, делают ошибку. Не прописывают название и описание блога. Потому что они не красиво накладываются на изображение. Это не очень хорошо для оптимизации, так как получается, что не название title не описание блога description поисковик не видит. В этом случае оптимальным вариантом будет опять использовать CSS.
Задать прозрачность тексту и указать размер 0.

.Header h1 {
 font: normal normal 0 sans-serif;
 color: transparent;
}


Если вы уже более или менее разбираетесь в стилях в шаблоне блога , то всё что необходимо можно устанавливать именно там. Стили CSS шапки обычно под этой строкой в шаблоне.

/* Header
----------------------------------------------- */

Коль пошла такая тема, позволю себе немного разобрать, что к чему, чтобы понятнее было.

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

- .header-outer - общий, внешний контейнер;
- .header-inner - внутренний контейнер;
- .titlewrapper - блок названия;
- .Header h1 - название блога;
- .descriptionwrapper - контейнер блока описания;
- .Header .description - блок описания;

Обычно в них и добавляются стили CSS.

Используя свойства CSS вы можете кардинально менять внешний вид всего блога.

А у меня сегодня всё. Спасибо всем. Увидимся.
👇
здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


9 комментариев:

  1. Виктория, замечательный пост! Интересно! У меня описания блогов не по центру, но пусть так останется. Больше не буду в шапках ничего переделывать.

    ОтветитьУдалить
    Ответы
    1. Спасибо, Ирина. В последнее время уже неоднократно задавали этот вопрос. решила вот в отдельном сообщении всё это изложить.

      Удалить
  2. Спасибо, Вика. Внесла поправку, благодаря твоей полезной подсказке.

    ОтветитьУдалить
  3. Девчата, спасибо вам за комментарии. Приятно слышать, что пригодилась информация.

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

    ОтветитьУдалить
    Ответы
    1. Наташа, все наверное с этой проблемой сталкивались. Да ещё когда по началу и с фоторедакорами не дружишь. Хотелось бы верить что информация пригодится.

      Удалить
  5. Спасибо большое!очень помогли!

    ОтветитьУдалить
    Ответы
    1. Ольга, так приятно слышать, когда читателям статья оказывается полезной.

      Удалить

Пользовательский поиск
Foto Saya
My Photo