Оптимизируем подзаголовки наших статей на сайте h3-h4-h6…

Продолжим настраивать наш сайт… Выправим шрифт подзаголовков наших статей, а именно теги h3-h4-h6.

Но !! …что следует помнить: вы вероятно обращали внимание, что, каждый из последующих подзаголовков теряет величину шрифта, т.е уменьшается. А ещё, в зависимости от темы, если та серенькая, эти подзаголовки могут теряться из виду на фоне обычного текста. Нет, конечно, поисковые роботы на них обратят внимание, ибо они завёрнуты в нужные теги h2 h4 … но вот для гостей вашего сайта, это неудобно.

Нужно настроить…

как выровнять и поменять цвет подзаголовков блога h3 – h4

Обычно, корысти ради, админы используются в теле статьи только h2 как бы настоятельно указывая важность подтемы. Правильно это или нет – не знаю! И никто не знает…

Я рекомендую всё-таки как-то использовать и второстепенные…

Но, как вы заметили, чем больше величина цифры – тем меньше размер шрифта. На мой взгляд, неудобно.

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

Вся сложность будет заключаться в том, что величины h3 - h6 обычно задаются в дефолтном css-документе. Это говорит о том, что нужные нам селекторы css находятся в другой папке (не в корне темы) – не в style.css

…их нужно будет найти.

А помогут нам в этом

инструменты вебразработчика браузера

Я пользуюсь браузером Mozilla Firefox

Значит, предположим, у вас уже есть статья в которой все нужные для правки теги прописаны… если нет, то в обычной “черновой” или “личной” записи обозначьте какие-то предложения в h3-h6 – так будет удобнее редактировать.

Ну – всё просто: наводите (последовательно) на нужный вам подзаголовок курсор и щёлкаете правой кнопкой “мыши”, а во всплывшем окошке кликаете опцию “исследовать элемент” – откроется инструментарий web-разработчиков…

Теперь внимание! (на фотке) зелёная стрелка: так выглядит код подзаголовка в основном коде страницы (прошу простить за качество скрина))

Коричневые стрелки – показывают имя папки, в которой расположены регулировки свойств css – помните, эту папку вам нужно найти в иных ПАПКАХ вашей темы. Примерный путь может быть таким:

ваша_тема/libs/css/defaults.css

а вообще, наведите курсор на имя defaults в правом окошке (большая коричневая стрелка) и всплывёт подсказка нужного пути… Вам только останется по нему пройти…

…чуть правее нумерация строк – расположение селектора в документе (файле).

Ну и чуть поменьше стрелочка, это сами значения свойств. Как видите в нашем примере, это селектор h3 .

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

h3 { 
font-weight: bold; /*насыщенность шрифта*/
color: #544F3F;/*ЦВЕТ*/
font-size: 17px;/*размер*/
font-style: italic;/*наклон*/
}

Вот и всё! Вам останется только поменять в приведённом мною коде величины на свои. Или по этому примерчику настроить свои с-ва CSS вашей темы.

Соответственно, размер шрифта подзаголовков статей делайте на своё усмотрение и в последующих h4, h5 и h6 – опытным путём.

А можно даже оставить один и тот же размер у всех – не важно! Напоминаю, поисковики всё равно обратят на них внимание в соответствии с присвоенным тегом: и пользователям они будут удобны для восприятия.

Также читайте как оформить внешние ссылки визуальными иконками CSS

…и, конечно же, подписывайтесь…

Online консультация по настройкам и созданию сайтов на WordPress