Выравнивание текста в блоге
Здравствуйте, дорогие друзья!
Красивое оформление блога зависит не только от того, какой шаблон на нем установлен, как подобраны цвета, но и от того, как выглядит сам текст в статьях блога.
Лично меня сильно напрягает, когда текст выровнен только по левому краю, т.е. слева строчки начинаются ровненько, а справа каждая строчка заканчивается как ей вздумается и получается такой «обкусанный» текст.
Если вы умеете работать в текстовом редакторе Word, то знаете, что выравнивание текста на странице документа может быть 4 видов:
- по левому краю (обычно этот вид выравнивание стоит везде по умолчанию)
- по центру
- по правому краю
- по ширине
Чтобы установить любой из этих видов выравнивания, нужно выделить текст и в панели инструментов Word’а нажать нужную кнопочку:
При редактировании текста в админке WordPress можно поступить совершенно аналогично. Даже кнопочки там стоят точно такие же, как и в Word’е:
Таким образом, самый простой способ выровнять текст в блоге – это просто выделить его и нажать на кнопочку.
Если у вас в статье идет сплошной текст, то этот способ вполне подходит хотя, зачем нажимать на всякие кнопочки, если это процесс можно автоматизировать? 
.
А вот если в статье много картинок, которые располагаются в разных местах, да еще и выравнивание у них то слева, то справа, то по центру, то этот способ может вас просто запутать: при выравнивании текста картинки могут сместиться влево, а при выравнивании картинок по центру – текст под ними тоже может расположиться по центру.
Чтобы покончить с этой неразберихой и сберечь время и нервы, потраченные на оформление статей, нужно использовать стили CSS, которые для блогов на WordPress записываются в файле style.css темы блога.
Использование CSS для выравнивания текста
В CSS за горизонтальное выравнивание текста отвечает свойство text-align.
Что такое свойства в CSS и как они записываются, читайте в статье Из чего состоит файл стилей CSS.
Значения свойства text-align: left / center / right / justify (по ширине)
Начальное значение left
Таким образом, чтобы установить выравнивание по ширине для абзацев в статье блога, нужно в файл style.css вставить правило:
p {text-align:justify;}
Теперь начинается самое интересное: куда именно в файле style.css нужно поместить эту запись?
В грамотно написанных темах для блогов, авторы обычно в файле style.css все правила группируют в соответствии с объектами блога, к которым они относятся и каждую группу правил отделяют комментариями (комментарии пишутся внутри таких скобочек /* … */ . Некоторые авторы дополнительно выделяют эти комментарии еще и звездочками или другими бросающимися в глаза способами).
Обычно используются такие названия:
Header – для шапки блога.
Sidebar – боковые колонки.
Homepage – для главной страницы.
Content – для статей в блоге и т.д.
Вы уже, наверное, догадались, что вам как раз нужно найти ту часть файла стилей, которая относится к группе Content. Если у вас ее не оказалось, то ищите как эта группа называется так как рассказано в видеоуроке А что там внутри?
Теперь где-нибудь внутри этой группы и вставляем. Попоробуйте сначала просто добавить строчку
p {text-align:justify;}
Если вдруг она повлияет не хорошо и на другие абзацы (в сайдбаре, в комментариях или еще где-то), то тогда нужно явно указать, внутри какого более «старшего» элемента должно действовать это правило. Например, так:
#content p {text-align:justify;}
И еще один маленький штрих для красоты
Нас учили в школе, что абзац должен начинаться с красной строки. Мне тоже нравиться, когда начало первой строчки абзаца немного сдвинуто вправо. Чтобы установить абзацный отступ, добавьте еще такое правило: text-indent:20px;
Желаю вам успехов в оформлении блога!
Марина Макарова
* * *
Удивительно, но некоторые легкие теплоизоляционные материалы, такие как базальтовая вата или маты из нее могут утеплить дом намного эффективнее, чем слой кирпича или дерева в несколько раз толще слоя ваты.
Добрый день, Марина.
Спасибо Вам большое за ваши уроки.
Я тоже всегда стараюсь придерживаться правил правописания, поэтому этот урок был для меня важным.
У меня вот такая проблема, сделал так, как вы написали и вот так поставил правило для выравнивания текста в свой стиль CSS-
/* CONTENT */
#content p {text-align:justify;}
Ура, выравнивание стало работать.
Затем решил вставить и второе правило, чтобы абзац начинался с красной строки, но здесь меня ждало разочарование. Куда его не поставлю, ни чего не получается, ну вот, например здесь-
/* CONTENT */
#content p {text-align:justify; text-indent:20px;}
Укажите, пожалуйста, Марина, на мою ошибку, что я делаю не так?
Здравствуйте, Юрий!
Я заходила на ваш блог и там есть отступы