Несколько раз подряд ко мне обращались блогеры, с просьбой помочь разобраться с заголовками постов. Проблема заключалась в следующем: т.к., по умолчанию в WordPress заголовки постов выделены тегом h2 — то для правильной оптимизации, их необходимо было заменить на h1.

А при замене — выяснялось, что размер шрифта увеличивался, и заголовок НЕ влазил в одну строку, при этом, строки заголовка, как бы, налазили друг на друга. Т.е., между ними был маленький интервал, что, конечно же, смотрелось кривенько.

Лечится это весьма просто, тем не менее, я решил посвятить этому вопросу отдельную статью.

Итак, нам необходимо привести заголовок h1 к точно такому же виду, как до него выглядел h2.  Для этого, сначала определяем стили отображения заголовка h2, копируем их, и создаём вложенный класс с такими же стилями для h1.

Для всего процесса рекомендую использовать браузер Mozila FireFox, как наиболее подходящий, т.к. в нём имеются инструменты web-разработки.

Всего нам потребуется определить два свойства: это свойство font-size, определяющее величину шрифта заголовка, и свойство line-height, определяющее величину (высоту) интервала между строками.

Можно копаться в файле style.css темы оформления, что многие и делают, и ковырять её на свой страх и риск, рискуя ненароком что нибудь удалить или испортить. Но я хочу показать способ намного проще, быстрее и эффективнее.

Проще показать на конкретном примере, поэтому я заснял небольшое видео.

В результате, на выходе имеем: стилевое оформление для тега заголовка h1, вложенного в класс .posthead

.posthead h1 {font-size: 25px;line-height: 35px;}

Далее — есть два варианта.

  • первый — мы записываем это правило в файл style.css темы оформления, В САМЫЙ КОНЕЦ, т.к. в стилевом оформлении применяется то правило, которое было объявлено самым последним;
  • либо — второй — прописываем этот стиль прямо в инлайновом элементе — теге h1 , следующим образом:

    <h1 style=»font-size: 25px;line-height: 35px;»>…</h1>

Ну вот собственно и всё, пробуйте, делитесь результатами, у кого получилось, а у кого — нет, и что именно.

Кстати — новость по теме: 24 апреля, в среду, я буду проводить

Бесплатный вебинар по CSS и стилевому оформлению тем и элементов WordPress

Он будет предшествовать трёхнедельному онлайн-семинару по стилевому оформлению CSS и каскадным таблицам стилей.

Для того, что бы записаться и попасть на бесплатный вебинар по CSS — просто зарегистрируйтесь на блоге, и письмо с приглашением на вебинар придёт к вам на e-mail за несколько дней до вебинара, а так же — в день вебинара, за несколько часов. В нём будет содержаться ссылка для входа в комнату онлайн-конференции.

Зарегистрироваться