Изменяем шрифт заголовка статей

Всем привет!

Сегодня мы будем изменять шрифт заголовка статей.

До внесения изменений, описанных ниже, название статей в моем блоге выглядело вот так

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

Итак, для начала, посмотрим код элемента заголовка.

В исходном коде мы видим, что заголовок статьи идёт с классом class="title". Классы обычно описываются в каскадной таблице стилей – по умолчанию в WordPress это файл style.css. Подробно на этом не буду сейчас останавливаться. Давайте вы просто посмотрите как изменения в style.css скажутся на внешнем виде заголовка, а со временем либо разберемся подробней с таблицами стилей, либо вопрос отпадет, уже как понятный.

Файл style.css можно изменить либо с помощью любого текстового редактора, либо через админку WordPress. Поскольку изменения будут небольшими, то сейчас давайте отредактируем его через админку. Перейдите в админке в меню

“Внешний вид” – “Редактор”.

Справа внизу кликните по “Таблица стилей (style.css)”.

По центру откроется содержимое файла style.css. В этом файле нам нужно найти строку ".title". Описание классов в таблице стилей начинается с точки ".". Поэтому мы ищем не "title", а ".title". Нажмите Ctrl+F и введите искомую строку. Таким образом, мы нашли код, описывающий класс title, который используется при выводе заголовка статьи.

Зеленым я подчеркнул фрагмент, который отвечает за преобразование всех символов заголовка в верхний регистр. Удаляю этот фрагмент. Также я изменю размер шрифта – он задается свойством font-size. Устанавлю 24px. И внесу изменения в семейство шрифтов font-family: Arial, Helvetica, sans-serif; После всех изменений нужно кликнуть по кнопке “Обновить файл” внизу страницы.

Вот как теперь выглядит мой заголовок после изменений.

Хотя дизайнер с меня никакой, но вариант после редактирования мне нравится больше. Можно еще попробовать какие-то варианты, но главное – мы теперь знаем как это делать.

Заранее трудно предугадать как изменится внешний вид сайта после редактирования CSS. Поможет в этом определиться тот же инструмент просмотра кода элемента. Когда вы просматриваете исходный код элемента, то справа внизу можно увидеть окно со значениями свойств из таблицы стилей. У меня в Google Chrome это окно выглядит вот так.

Вот в этом окне можно изменить значение любого свойства, или отключить это свойство вообще (убрав галочку слева). И все последствия этих изменений вы сразу увидите на странице в режиме реального времени. Подберите таким образом значения, который вас устроят и только после этого внесите изменения в style.css так, как это было описано выше.

Таким образом, мы изменили внешний вид заголовка статей: убрали преобразование в верхний регистр, изменили размер шрифта и семейство шрифтов.

Данный алгоритм можно применять и для других изменений на сайте, касающихся таблицы стилей style.css.

Коротко повторю порядок действий:

1. Смотрим исходный код элемента, внешний вид которого хотим изменить.

2. В окне просмотра стилей CSS подбираем значения свойств.

3. Вносим изменения в соответствующий раздел файла style.css.

Если возникли какие-либо вопросы – обязательно напишите их в комментариях к статье.

Желаю успехов! До связи!