Блог Сергея Князева

Юзабилити
Новый вид блока Информация на CSS

Новый вид блока Информация на CSS

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

Выделение текста информации

Рассмотрим ситуацию, которая может случиться у каждого. Допустим, вы написали или заказали статью, в которой 2000 символов или более. Текст в ней выглядит одним большим блоком, который сливается. Необходимо «разбавить» его.

Для этого создаём блок «Информации» в который вы сможете вставить любые данные по вашей теме. Например: у вас статья по продвижению сайтов, вы можете внести в блок информации данные по стоимости продвижения или данные по примерам того или иного продвижения.

Но есть один нюанс. Если текст который внесён в блок «Информация» не уникален, а например взять с Wikipedia, необходимо поставить теги noindex. Это необходимо, что бы ваш сайт не был определён поисковыми машинами как плагиатор.

Установка кода

Установка данного блока, состоит из двух этапов. Первым делом необходимо установить следующий HTML код в вашу статью.


Код
<div class="informacia"> <p>Нужная информация</p> </div>


Таких блоков в статье может быть несколько штук. Отталкивайтесь от количества символов. Например: в тексте из 2000 символов, нужно разместить 1-2 таких блока.

После установки HTML кода, необходимо вставить стили CSS. Для этого копируем понравившийся вариант и устанавливаем его в файл стилей .css

Вариант №1

Ваш текст

Код
.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #E7E7E8;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №2

Ваш текст

Вариант с серой заливкой

Код
.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #cbecf5;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №3

Ваш текст

Код
.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #cbf5d8;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №4

Ваш текст

Код
.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #fcffc2;  background-position: 9px;  padding: 40px 20px 40px 80px; }

Вариант №5

Ваш текст

Код
.informacia {  margin: 20px 0px;  display: block;  max-width: 100%;  vertical-align: middle;  font-style: italic;  font-weight: 400!important;  line-height: 22px;  color: #000;  background: url(http://center-wd.ru/images/ic/certain.png) center left no-repeat;  background-color: #ffe3c2;  background-position: 9px;  padding: 40px 20px 40px 80px; }


Как вы могли заметить, я выбрал нейтральные цвета для блоков. Так как они должны лишь "разбавлять" текст, а не концентрировать внимание на себе.

Заключение

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

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

Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (7)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Webmaster 11.12.2017 в 10:25Спам
Позаимствовал на сайт для дополнительных полей yes
2
У тебя почему то не отображается Имя
1
Webmaster 11.12.2017 в 10:48Спам
surprised Только заметил, сам не знаю почему, с юкозом я как то не очень дружу, видать и он со мной тоже
2
Ага. Попробуй в настройках профиля выбрать UID профиль. Там сможешь ввести данные. После перезайди на сайт должно сработать.
1
Вверху имя высвечивается в комментариях нет
2
Теперь всё чётко
1
Забрал себе на сайт
1