Главная » Бизнес в Интернете

Дизайн текста и заголовков блога WordPress

дизайн текста блога 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. Вы увидите, как выравнивание текста на блоге изменится, но это будет видно только в Вашем браузере и только в настоящий момент. Если Вы закроете Просмотр кода элемента и обновите страничку, все изменения будут аннулированы.


Работа в административной панели

дизайн текста WordPress

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

Дальше копируете то, что Вам нужно, из Просмотра кода элемента, и опять заходите в Редактор. В Редакторе Вы находите то, что скопировали, с помощью поиска, и меняете все, что Вам нужно.

Например, нам нужно изменить выравнивание текста в статьях. Копируем название стиля art-layout-cell из Просмотра кода элемента, идем в административную панель, в Редактор и включаем поиск с помощью клавиш Ctlr+F. После этого в окошка поиска вставляем скопированный фрагмент art-layout-cell, и ищем этот код в Списке стилей. Находим, и меняем left на justify. Сохраняем стиль и дизайн текстаизменения и смотрим, что получилось.

дизайн текстаВсе делается легко и просто, и даже не нужно хорошо разбираться в коде. Главное — понять принцип и суть самого процесса, и применять его к любому элементу на блоге WordPress.

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

Видео о том, как менять дизайн текста и заголовков на блоге WordPress


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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

33 комментария »

  • Татьяна пишет:

    Отличный урок! Спасибо!

  • mrs. interesno пишет:

    За эту подробную инструкцию спасибо.

    Нужно бы и мне шрифт на блоге поменять.

    И в комментариях тоже.

  • Ирина пишет:

    Интересного много у вас и полезного , надо бы всё пересмотреть .

  • Андрей пишет:

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

  • Сергей Эфрос пишет:

    У Вас на сайте много интересного. Буду изучать.

    Спасибо.

  • Анна пишет:

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

  • Сергей пишет:

    Александр.

    Отличный пост. Нашёл для себя полезную информацию. Все эти PHP и CSS, требуют изучения. Вы всё доходчиво изложили. Использую.

  • Ольга пишет:

    Очень интересная и познавательная статья, спасибо. Может пригодится

  • Natalj пишет:

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

  • Вячеслав пишет:

    Чтобы это все проделать с блогом ,надо потренироваться.Статья отличная спасибо.

  • Константин пишет:

    дизайн текста на блоге очень много значит! очень полезная статья! спасибо!

  • Виктория пишет:

    Хороший урок по дизайну текста в блоге WordPress. Ведь тема бывает интересной,а вот шрифт то слишком маленький, то наоборот да и стиль шрифта не гармонирует с темой. С вашей помощью узнала как и где изменять размер шрифта, спасибо!

  • Vasili70 пишет:

    Александр, спасибо за статью. Еще раз убедится в Вашей отличной технической «подкованности». Уважаю технарей. А если технарь совмещает в себе еще и отличного рерайтера, писателя — цены ему нет.

  • Олег пишет:

    Только недавно мне задавали подобные вопросы. В двух словах объяснить сложно, а теперь буду знать куда отправлять за решением.

  • Юрий пишет:

    Автор подскажите пожалуйста как можно поменять полосу навигации сайта и слайды местами? На моем шаблоне сначала вверху расположен слайд, а под ним полоса где главная и т п. Как сделать так, чтобы эта полоса была вверху, а слайд под ней?

  • Александр Ризун (автор) пишет:

    Чаще всего это можно сделать только через код файла header.php Заходите в консоли, во внешний вид — редактор — заголовок, и переставляете блоки с кодом местами. Только сохраняйте в блокноте старые версии, вдруг что-то пойдет не так.

  • Антон пишет:

    Большое человеческое вам СПАСИБО!!!

  • Em6rald пишет:

    Три часа парилась со сменой шрифта в заголовке, пока не нашла ваш сайт и видео-урок. Спасибо!

  • Ксения пишет:

    Очень полезная статья и только благодаря вам смогла поменять шрифт и цвет в шаблоне.Подскажите пожалуйста как вставить рекламу в тело статьи.

  • Александр Ризун (автор) пишет:

    Ксения, я так понимаю, вопрос касается Google Adsense. Поставьте плагин Whydowork Adsense. Он, кстати, позволяет встраивать в статью не только рекламу от Google, но и любую другую, по Вашему желанию.

  • mfs83 пишет:

    подскажите, а как сделать окантовку у текста? к примеру белый шрифт, черный кант, белый фонт. нужно для шапки. спасибо

  • Александр Ризун (автор) пишет:

    Делаете в Photoshop. Слой — Стиль слоя — Опции смешивания — Обводка.

  • Наталия пишет:

    А у меня проблема со сменой расположения заголовка в шапке. Вот я через просмотр кода элемента изменила значения.

    у меня было:

    #logo, #logo_text

    position: absolute;

    left: 580px;

    top: 10px;

    Стало:

    position: absolute;

    right: −60px;

    top: 50px;

    В браузере все встало так, как мне надо. Но при изменении файла screen.css и сохранении его с новыми данными с шапкой ничего не происходит. Как был заголовок «Психология рисунка» на своем первоначальном месте, так и остался.

    Не могу понять, чего он еще хочет? :)) У меня стоит шаблон Страйкинг. Буду очень благодарна, если подскажете.

  • Александр Ризун (автор) пишет:

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

  • Наталия пишет:

    Нет, все верно. Я не знаю, что это был за «глюк», но мой приятель вчера со своего компьютера зашел на мой хостинг, сделал те же изменения, я обновила страницу — и все получилось :)) Мы так и не поняли, в чем тут была загадка...

  • Юлия пишет:

    Спасибо Вам за очень полезную информацию, без Ваших уроков было бы очень тяжело понять всю информацию...Главное что, все написано и рассказано простым человеческим языком без сложной терминологии

  • Александр Ризун (автор) пишет:

    Юлия, спасибо за отзыв. По себе знаю, как тяжело порой усваивается новая информация, поэтому стараюсь писать просто.

  • Надежда Хачатурова пишет:

    Как у Вас блог хорошо оптимизирован, Александр! Опять из поиска прямо к Вам попала. Тогда помогите, пожалуйста. По видео не разобралась. У меня заголовки в виджетах стоят H3, а мне нужно поменять хотя бы на H4 или просто пикселями сделать, как нужно. И куда мне отправляться?

  • Александр Ризун (автор) пишет:

    Смотрите файл sidebar.php У него в коде прописано, какой будет формат заголовка. Найдите там h3, и замените на h4, только аккуратно. Кстати, зачем Вам это? У меня, например, вообще h2.

  • AnSummer пишет:

    Может я что-то не поняла, но у меня в style.css нет ни «art-main», ни «art-layout-cell». Возможно, это зависит от темы.

  • Александр Ризун (автор) пишет:

    Вы смотрите, какой у Вас стиль, он может быть другим. Смотрите, нажимая правой клавишей, и выбирая Посмотреть код элемента.

  • Надежда Хачатурова пишет:

    Александр, не нашла. Нужно еще разобраться, в каком именно файле у меня все это выводится. А заменить хочу по двум причинам: очень крупно и не вижу смысла в заголовках H3? если они не релевантны к контенту ни одной странице. Например, «мы в социальных сетях» или «свежие записи». Каким роботам это нужно?

  • Сергей пишет:

    Спасибо. попробую ваш метод...

Оставьте свой комментарий и ответный визит Вам обеспечен