Дизайн текста и заголовков блога WordPress
Вы уже умеете менять фон на блоге WordPress, научились ставить свои картинки, менять шапку блога. И в завершении темы дизайна блога WordPress поговорим о том, как изменить цвета заголовков и текста блога, изменить размер, шрифт и выравнивание текста.
За дизайн текста на блоге отвечают стили блога WordPress, которые, в большинстве своем, расположены в файле style.css.
Давайте, к примеру, посмотрим на дизайн текста в статье. Нажимаем на текст правой клавишей мыши, и выбираете в появившемся меню строчку Просмотр кода элемента.
Внизу, в панели, которая после этого появится, слева Вы увидите код, и в нем выделенную строчку, соответствующую коду текста, а справа Вы увидите стили этой строчки. Причем эти стили не обязательно будут располагаться все в одном месте.
В нашем случае, Вы увидите, когда посмотрите все стили текста в статье, что цвет текста расположен в одном месте, размер в другом, шрифт в третьем.
Цвет текста на блоге
Находится в элементе body. Этот элемент касается всего блога. Черный цвет на блоге — по умолчанию.
body{
color: #000000;
}
Шрифт и размер текста на блоге
Находится под идентификатором art-main. Этот идентификатор присваивает шрифт и размер не только тексту в статьях, но и надписям в сайдбаре, в подвале.
#art-main, table{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}
Выравнивание текста на блоге
А вот выравнивание текста находится под классом art-layout-cell. В данном случае выравнивание производится по левому краю left. Хотите, чтобы текст выглядел красиво и ровно с обоих сторон? поставьте вместо left слово justify.
.art-layout-cell, .art-content-layout-row{
text-align: left;
}
Маленький секрет: хотите сразу посмотреть, как это будет выглядеть? Прямо в панели Просмотр кода элемента замените left на justify. Вы увидите, как выравнивание текста на блоге изменится, но это будет видно только в Вашем браузере и только в настоящий момент. Если Вы закроете Просмотр кода элемента и обновите страничку, все изменения будут аннулированы.
Работа в административной панели
Все изменения нужно производить, конечно, в административной панели блога. Заходите в административную панель, во Внешний вид, в Редактор, и выбираете Список стилей.
Дальше копируете то, что Вам нужно, из Просмотра кода элемента, и опять заходите в Редактор. В Редакторе Вы находите то, что скопировали, с помощью поиска, и меняете все, что Вам нужно.
Например, нам нужно изменить выравнивание текста в статьях. Копируем название стиля art-layout-cell из Просмотра кода элемента, идем в административную панель, в Редактор и включаем поиск с помощью клавиш Ctlr+F. После этого в окошка поиска вставляем скопированный фрагмент art-layout-cell, и ищем этот код в Списке стилей. Находим, и меняем left на justify. Сохраняем 
изменения и смотрим, что получилось.
Все делается легко и просто, и даже не нужно хорошо разбираться в коде. Главное — понять принцип и суть самого процесса, и применять его к любому элементу на блоге WordPress.
Точно так же мы меняем дизайн текста: в заголовках, в сайдбаре, словом, там, где посчитаем нужным это сделать.
Видео о том, как менять дизайн текста и заголовков на блоге WordPress
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Вам понравилась статья? Поделитесь, буду весьма признателен:
Также приглашаю добавиться в друзья в социальных сетях:
Следующая статья >>
Отличный урок! Спасибо!
За эту подробную инструкцию спасибо.
Нужно бы и мне шрифт на блоге поменять.
И в комментариях тоже.
Интересного много у вас и полезного , надо бы всё пересмотреть .
Познавательно, но я обычно пользуюсь встроиным редактором в систему, проблем пока не было!
У Вас на сайте много интересного. Буду изучать.
Спасибо.
Ваши понятные уроки, Александр, помогают делать сайт неповторимым и непохожим на другие. Спасибо за Ваш труд.
Александр.
Отличный пост. Нашёл для себя полезную информацию. Все эти PHP и CSS, требуют изучения. Вы всё доходчиво изложили. Использую.
Очень интересная и познавательная статья, спасибо. Может пригодится
Очень подробное четкое объяснение, достойно лучшего учителя в школе, оказывается все возможно освоить.
Чтобы это все проделать с блогом ,надо потренироваться.Статья отличная спасибо.
дизайн текста на блоге очень много значит! очень полезная статья! спасибо!
Хороший урок по дизайну текста в блоге WordPress. Ведь тема бывает интересной,а вот шрифт то слишком маленький, то наоборот да и стиль шрифта не гармонирует с темой. С вашей помощью узнала как и где изменять размер шрифта, спасибо!
Александр, спасибо за статью. Еще раз убедится в Вашей отличной технической «подкованности». Уважаю технарей. А если технарь совмещает в себе еще и отличного рерайтера, писателя — цены ему нет.
Только недавно мне задавали подобные вопросы. В двух словах объяснить сложно, а теперь буду знать куда отправлять за решением.
Автор подскажите пожалуйста как можно поменять полосу навигации сайта и слайды местами? На моем шаблоне сначала вверху расположен слайд, а под ним полоса где главная и т п. Как сделать так, чтобы эта полоса была вверху, а слайд под ней?
Большое человеческое вам СПАСИБО!!!
Три часа парилась со сменой шрифта в заголовке, пока не нашла ваш сайт и видео-урок. Спасибо!
Очень полезная статья и только благодаря вам смогла поменять шрифт и цвет в шаблоне.Подскажите пожалуйста как вставить рекламу в тело статьи.
подскажите, а как сделать окантовку у текста? к примеру белый шрифт, черный кант, белый фонт. нужно для шапки. спасибо
А у меня проблема со сменой расположения заголовка в шапке. Вот я через просмотр кода элемента изменила значения.
у меня было:
#logo, #logo_text
position: absolute;
left: 580px;
top: 10px;
Стало:
position: absolute;
right: −60px;
top: 50px;
В браузере все встало так, как мне надо. Но при изменении файла screen.css и сохранении его с новыми данными с шапкой ничего не происходит. Как был заголовок «Психология рисунка» на своем первоначальном месте, так и остался.
Не могу понять, чего он еще хочет? :)) У меня стоит шаблон Страйкинг. Буду очень благодарна, если подскажете.
Нет, все верно. Я не знаю, что это был за «глюк», но мой приятель вчера со своего компьютера зашел на мой хостинг, сделал те же изменения, я обновила страницу — и все получилось :)) Мы так и не поняли, в чем тут была загадка...
Спасибо Вам за очень полезную информацию, без Ваших уроков было бы очень тяжело понять всю информацию...Главное что, все написано и рассказано простым человеческим языком без сложной терминологии
Как у Вас блог хорошо оптимизирован, Александр! Опять из поиска прямо к Вам попала. Тогда помогите, пожалуйста. По видео не разобралась. У меня заголовки в виджетах стоят H3, а мне нужно поменять хотя бы на H4 или просто пикселями сделать, как нужно. И куда мне отправляться?
Может я что-то не поняла, но у меня в style.css нет ни «art-main», ни «art-layout-cell». Возможно, это зависит от темы.
Александр, не нашла. Нужно еще разобраться, в каком именно файле у меня все это выводится. А заменить хочу по двум причинам: очень крупно и не вижу смысла в заголовках H3? если они не релевантны к контенту ни одной странице. Например, «мы в социальных сетях» или «свежие записи». Каким роботам это нужно?
Спасибо. попробую ваш метод...
Какие плагины посоветуете? Для оформления статей, текста
Особых плагинов для оформления текста нет. Лучше всего подправить слили CSS.
Хорошая статья, спасибо, разобрались
Хорошая инструкция, спасибо,воспользуюсь!!
Выберите рубрику
Успех и личностный рост
Компьютерная Азбука
Бизнес в Интернете
Продвижение сайтов
Инвестиции
Бизнес на земле
Интересно
Подписка на pro444.ru
Что у нас
часто ищут
Бесплатные сервисы
Последние комментарии
Самое комментируемое
Последние статьи