14 апреля 6:11
Рубрика: Блоговедение 2 комментария

Как изменить размер, цвет шрифта на сайте

Здравствуйте, уважаемые читатели блога er-krasnogorsk.ru. Нередко возникает необходимость, а временами даже довольно часто, внести изменения в те или иные элементы шаблона WordPress, Joomla или любого другого CMS. Но многие не знают с какого боку подойти к этому вопросу, поэтому сегодня решил показать вам как легко и играючи можно изменить размер, цвет и стиль шрифта на сайте.

 

Содержание

Как изменить размер шрифта текста
Как изменить размер шрифта заголовка
Как изменить цвет шрифта на сайте

Как изменить размер шрифта текста

Наверняка вы замечали, что на многих сайтах размер шрифта очень мелкий, из-за чего приходится напрягать зрение, увеличивать буквы с помощью мыши ( Ctrl + крутим колесико мышки ) и вообще чувствовать себя некомфортно. Хочется поскорее покинуть такой сайт.

Тем более что есть еще один немаловажный момент: в последнее время все больше людей выходят в интернет с мобильных устройств, а там, поскольку экран маленький, графические отображения играют большую роль.

Между тем, решить вопрос, как говорится, раз чихнуть. Для этого откройте любую свою статью, выделите кусочек текста, щелкните по нему правой кнопкой мыши и выберите пункт «Исследовать элемент».

После этого в нижней части экрана появится окошко кода, где с правой стороны увидите вот такую картину.

В строке font-size:15px; нужно поменять цифру в большую сторону. Щелкните по ссылке «Style.css:739», окроется файл «Style.css», прокрутите вниз и найдите строку 739, где и поменяйте цифру на нужную вам. Для тех, кто панически боится кодов, скриптов, любых изменений на блоге: на этом этапе вам нечего опасаться, вы просто смотрите, что произойдет, если сделаете так-то и так-то. После того как перезагрузитесь, все изменения исчезнут и страница примет прежний вид.

А чтобы они вступили в силу нужно редактировать сам файл. Для этого пройдите по адресу «Внешний вид» — «Редактор», откройте файл «Style.css», нажмите Ctrl+f и в появившееся окошко введите такую строку кода — #main_content_post p. Внесите изменения и обновите файл. Должен предупредить, что чрезмерно большие буквы тоже плохо влияют на восприятие, все хорошо в меру.

Как изменить размер шрифта заголовка

Поступаем аналогичным образом — щелкаем непосредственно по названию сайта правой кнопкой мыши — «Исследовать элемент»

— в правой колонке, прокручивая вниз, находим строку font-size. Переходим по ссылке в таблицу стилей, находим нужную строку и занимаемся творчеством. Но тут есть один нюанс: при увеличении шрифта заголовка, одновременно с ним увеличиваются на главной странице и другие элементы — автор, рубрики, комментарии. Они как-то связаны между собой и смотрится это, честно говоря, несколько непрезентабельно.

Решение находится в header.php, потому что заголовок относится именно к этому файлу. В строку вывода названия сайта добавим такую команду — style="font-size:22px; внутри тега span, цифру, естественно, указывайте свою.

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

Как изменить цвет шрифта на сайте

Порядок действий тот же, что и на примерах выше, единственно, будем искать слово «color».

Коды цветов можете подобрать по этому адресу: http://www.stm.dp.ua/web-design/color-html.php
Если из предложенных вариантов вам ничего не подошло, но где-то вы видели приятный для глаза цвет, узнать его html-код поможет замечательная программка Pixie, советую.

И в заключение несколько слов о стиле шрифта, отвечает за это строка «font-family».

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

С уважением Баяс Батуев

Хочешь получать статьи этого блога на почту?
2 комментария
  • Андрей

    Хорошая инструкция. Помню, когда у меня был этот шаблон, тоже менял цвет шрифта с серого на стандартный черный.

    2015-04-14
  • Баяс Батуев

    Привет, Андрей, у тебя отличный дизайн блога, действительно очень красивый получился, а разве шаблон у тебя не старый?

    2015-04-14

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