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

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

В этой статье был рассмотрен вариант, как выровнять заголовок в шапке блога по центру. Но когда хочется вставить свою фоновую картинку, то вся красота нарушается. И давайте смотреть, как это можно исправить. Использую стили 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