Форматирование текста и его читабельность

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

Сегодня статья о том, как сделать так, чтобы некоторые фразы или абзацы в теле статьи выделялись другим фоновым цветом. То есть, этот урок относиться к теме форматирования текста и улучшения его читабельности.

Вот, например, как эта идея реализовывается на моем блоге.

Так это было в статье "Почему не все СРАЗУ будут зарабатывать ч.3" По ходу изложения статьи, я отдельные части текста выделил рамкой и изменил фон.

Итак, как такое делается?

Казалось бы, самым простым решением этого вопроса будет применение кнопки «цитата» в визуальном редакторе блога. То есть, вы определенный фрагмент текста заключаете в тег blockquote

И если в таблице стилей, в файле style.css этому тегу прописаны стили, задающие background (задний фон), отступы и другие параметры, то чисто внешне будет выглядеть все так, как надо.

Но такой подход будет неверен. Во-первых, предназначение тега blockquote — это заключить в себя реальную цитату, чтобы выделенный текст воспринимался и людьми, как цитата, и для поисковиков значился также, без претензий на уникальность.

Во вторых, не всегда blockquote имеет именно те стили, которые нам нужны (цвет, отступы, наличие или отсутствие кавычек и т.д.)

Поэтому, в данном случае, забудем на время о теге blockquote, будем применять его, исключительно для цитирования чужого текста, как это есть, и было задумано.

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

Так мы и сделаем. Работать будем с тем же файлом style.css (wp-contetn-themes — ваш шаблон — style.css). Также нам понадобится сам редактор в админке. (Сейчас вы уже видите действие примененного мною класса к данному абзацу. Фоновый цвет изменился)

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

Итак, открываете свой style.css и вставляете в него вот этот код:

.zutata {
padding: 0px 10px 0 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: #E9F2F6;
font:1.0em Tahoma;
line-height:1.5em;
}

Сохраняете измененный файл css. Обновляете его на сервере, если вы работаете не на локальном хостинге.

Теперь, чтобы созданный только что вами класс заработал, его нужно применить. Как его «включить»?

Для этого заходим в админку, открываем редактор статьи, заходим в режим Html и задаем класс zutata для  выбранной нами строки (параграфа <p>) Добавляем для тега созданный класс, пишем

class="zutata"

и получаем:

Ваш текст

Теперь на весь абзац или строку будет распространяться действие стилей, созданного вами класса zutata.

Если нужно несколько абзацев в рамку заключить, создаете контейнер div и несколько параграфов заключаете в этот тег.

Вот сама схема. Думаю, что понятно.  Скопировали код, сохранили измененный файл css, закачали на сервер и задали созданный класс нужному тегу.

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

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

.zutata {
padding: 0px 10px 0 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: #E9F2F6;
font:1.0em Tahoma;
line-height:1.5em;
}

Итак:

.zutata – это название класса (заметьте, что перед словом должна стоять точка) Вы можете придумать свое название, простое в написании и запоминающееся, тогда именно его и прописываете в редакторе.

padding – это отступ текста (сверху, справа, снизу, слева). У меня заданы отступы лишь справа и слева по 10 px.

border-top и border-bottom – это рамка сверху и снизу толщиной в 1 px,

#ddd – ее цвет

background: #E9F2F6 — это задний фон.

font:1.0em Tahoma — шрифт и его размер.

Это мои «настройки». Вы же должны изменить их в соответствии со стилем своего блога.

То есть, если у вас на блоге используется шрифт Arial — уместно будет изменить Tahoma на Arial. Если вы хотите изменить background, потому что у вас преобладают, например, теплые тона, значит, ищите свой оттенок заднему фону, например FDAEC3.

Меняйте все значения на свои. Здесь нужно просто поиграться с цифрами. Можете убрать рамки, просто удалить строки со значением border или наоборот сделать их толще в 2 px т.д.

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

Qwertypay-Заработок в партнёрках!
Qwertypay – Агрегатор партнерских программ. Регистрируйся и зарабатывай!

specialist.qwertybiz.com

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

Теперь несколько слов, зачем это все нужно?

В первую очередь — для лучшего визуального восприятия текста на странице.

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

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

6 бесплатных промокурсов Евгения Попова

Автор: Игорь
Чистый звук в мире инфобизнеса