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


Игорь Козлов | 2011-07-01 | 23 комментария

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

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

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

Форматирование и выделение текста в блоге

Так это было в статье "Почему не все СРАЗУ будут зарабатывать ч.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 бесплатных промокурсов Евгения Попова

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

Включите свой мозг! - Хватит бродить по Интернету в поисках счастья! Вам ещё не надоело скачивать курсы, подписываться на рассылки и... топтаться на месте? Пора взяться за ум!

Не знаете, что делать дальше? - Вам нужна мотивация, за ней придет и творческое решение



Комментарии (23)

  1. NinaPontil:

    Форматирование текста и его читабельность.спасибо очень полезный пост

    Ответить
  2. Александр:

    Вот как здорово. Статью поместил в закладки. Спасибо.

    Ответить
  3. Elena:

    Хороший вариант Вы предлагаете,правда, придется потрудится.

    Я пошла другим путем и подключила редактор

    Dean's FCKEditor For WordPress. У него возможности гораздо шире.

    Ответить
    • Игорь Козлов:

      На счет потрудится, если усвоить принцип работы со стилями, это точно, что пригодится в дальнейшем. Хотя, может быть, действительно, с Dean's FCKEditor работать проще, я не знаком с этим редактором.

      Ответить
  4. Александр:

    Прочитал пост, понял, что мне пригодится и скопировал для применения. Необходимо изменить шапку сайта (11 дней сайту и опыту блогинга). Делаю всё сам, может не так быстро, но знаю, навыки — вот что главное. Рівне РУЛИТ!!!

    Ответить
  5. Ирина:

    Спасибо за очень полезную информацию.

    Ответить
  6. Наталия:

    Спасибо, украсила и свой блог немножко)).

    Походила по Вашему блогу — понравилось, решила подписаться. У Вас очень приятный стиль, буду следить за новостями.

    Ответить
    • Игорь Козлов:

      Очень рад, Наталия, что смог помочь. Спасибо за отзыв!

      Ответить
  7. Светлана:

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

    Ответить
  8. Надежда:

    Здравствуйте!

    Все получилось. Спасибо!

    только у моих цитат рамка с прямыми уголками. А как у вас получились скругленные?? 😈

    Ответить
    • Игорь Козлов:

      Отлично! Нужно добавить в стиль border-radius: 7px;

      закругленная рамка,

      где 7 — угол скругления. Можно сделать его меньше.

      Ответить
      • Надежда:

        О! Класс! Спасибо огромное! 😛

        Ответить
  9. Елена Олейникова:

    У меня тоже все отлично получилось. Считай, еще один плагин долой. Я имею ввиду Special Text Boxes. Конечно, у него еще с картинками, но, наверно, если подумать, то и их можно кодом вставлять. Не пробовали?

    Ответить
    • Игорь Козлов:

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

      Ответить
      • Елена Олейникова:

        А я по-другому делаю. Заранее подготавливаю html-коды и вставляю, где нужно. А после того, как прочитала у вас про шорткоды, то еще и их использую. 🙄

        Ответить
        • Игорь Козлов:

          Тоже вариант, заготовки html. Приходится как-то однообразные моменты упрощать. ))

          Ответить
          • Елена Олейникова:

            А если использовать программу GoldenSection Notes, то вообще все по полочкам можно разложить и очень просто добираться до нужной 🙂

            Ответить
  10. Философ:

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

    Ответить
    • Игорь Козлов:

      Пользуйся!

      Ответить
      • Философ:

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

        Ответить
  11. Ирина:

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

    Ответить
    • Игорь Козлов:

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

      Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

WordPress: 43.39MB | MySQL:72 | 0,808sec