Как изменить размер заголовков WordPress H1 H2..H6

Привет читателям! Хочу рассказать новичкам в области CSS как поменять размер заголовков в wordpress’е. Зачастую в выбранной вами теме размер текста в тегах h1, h2…h6 не совсем нас устраивает, лично я не понимаю зачем первый заголовок как правило огромного шрифта, который прямо режет глаз, а последний же может ничем не отличаться от обычного текста.

Размер заголовков h1 h2 h3 h4 h5 h6

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

Как поменять размер заголовка?

1. Возможно размеры для заголовков можно поменять прямо через админку вордпресс (этот вариант не для всех). Для этого заходим в "внешний вид"->"Редактор"-> выбираем в правом столбце "style.css"

поменять размер заголовка wordpress

Если вы нашли строчки типа

h1 {
font-size: 3em; (значения могут быть и в "**px")

…… }

То смело меняем их на нужные вам (если не разбираетесь то методом тыка, можете везде даже одинаковые прописать для всех h1-h6 – это дело вкуса)

В таблице стилей style.css нету стилей заголовков

2. Второй вариант, если первый не выдал вам стили тегов H1-H6, бывает что для их изменения нужно вылезти за пределы админки…

2.1 Идем на любую страничку блога, где есть ваши заголовки и смотрим "код элемента" заголовка. В моем случае все происходит в google chrome:

в каком css стили для тегов h1-h6

Чтобы найти нужные стили убедитесь, что вы не промахнулись мимо заголовка (внизу в коде он выделен серым)

Смотрим теперь направо, там идет описание стилей для "H1″ и указано название  css’ки и строчка где идет описание.

2.2 Если курсором навести на название css, то вам покажут путь до неё (если он не известен вам)

поиск нужного css темы вордпресса2.3 Теперь, используя фтп клиент total commander, file zilla или любой удобный вам находим этот файл и пишем свои желаемые размеры для заголовков.

h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif;font-weight:normal;color:#111;line-height:1;margin-bottom:1em; text-align:center; font-size:2em;}

Поздравляю, надеюсь у Вас все вышло.

Спасибо, критику и вопросы буду рад принять в комментах! ;)

vsepro100.net был атакован и восстановлен недавно!
У вас быстро открывается сайт vsepro100.net

Добавить статью в соц сеть

Комментарии к: Как изменить размер заголовков WordPress H1 H2..H6

  1. Очень нужная статья… спасибо :twisted:

  2. Спасибо за статью! :smile:

  3. Здравствуйте!Хотела сказать спасибо за статью. Применила. Размер шрифта поменялся. Правда сделала со второго раза, т.к. первый раз не учла еденицы измерения и не перевела px в em. Но потом все получилось. Результатом довольна!

    • Павел Гаврилин

      Дана, спасибо за ваш комментарий!
      Очень рад, что вам пригодился материал с блога!

  4. Наконец я нашел, то что искал. Спасибо.

  5. Подскажите пожалуйста, как сделать тень как у вас в заголовках?

  6. Спасибо! Два дня искала и только у Вас было написано четко и то что мне надо было исправить. :smile:

  7. Александр

    Спасибо,Паш, очень помог. Запарился с этими тайтлами, никак размер поменять не мог.

  8. То, что нужно. Спасибо за статью!

  9. Спасибо. И в самом деле, вроде вопрос не сложный, но получила простой, конкретный ответ только у Вас. И все получилось. Удачи!

  10. Екатерина

    Я не поняла по второму способу. Вот я все нашла, размер поменяла, наглядно вижу что текст изменился. А как сохранить то? Обновляю страницу и все возвращается обратно.((( И что делать? По первому способу что мне нужно не меняется. (((

  11. Екатерина

    Подскажите, как через FileZilla сделать все по второму способу…

  12. Константин

    FileZilla, на мой взгляд, не лучший FTP-менеджер. Тоже использую Total Commander, он позволяет править файлы по F4 прямо на сервере (по крайней мере,у моего хостера), что очень удобно.

  13. У меня размер шрифта заголовка не меняется….делаю все как вы тут описываете но не меняется….вот сделать тень я смог и все получилось…а размер шрифта не смотря на то что в css файле я меняю размер на сайте не меняется
    Помогите плиз

  14. Спасибо за статью! ;-)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Captcha Captcha Reload

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Подписаться, не оставляя комментарий