Добрый день всем на wmbn.ru и С (почти) Наступившим Новым Годом! Остался один день до Нового Года, а точнее 36 часов (по моим часам). Улицы наряжены гирляндами, украшены фигурками из снега. В магазинах развешена мишура — все украшено, чтобы привлечь нас, но при этом дать новогоднее настроение ;)

Выделение блока текста с помощью CSS и плагина

Сегодня и поговорим о том, как привлечь читателя к информации в тексте. Все мы знаем, особенно про себя, что любую информацию, которая имеет порядка 20000 символов мы всю не прочтем (особенно если это сплошной текст без использования изображений), а только часть и ту, которая более менее выделена. Но целый абзац выделять жирным шрифтом или курсивом… вы сами понимаете, лучше выделить текст блоком, о котором дальше пойдет речь.

Создание стилей для блоков с помощью кода Css

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

Создадим свой стиль blockstyle (стиль блока — используйте понятные и осмысленные названия и обозначения для селектора, чтобы в будущем не было путаницы, а так же создавайте новые стили в конце файла, чтобы знать какие стили ваши, а какие идут стандартно с шаблоном), для этого создадим макет для него:

#blockstyle{

}

В пустую область будем писать свойства блока для придания ему уникального стиля, отличного от основного шаблона. Задаем ему шрифт Arial и размер 16, на CSS это будет выглядит так:

font-family:Arial;
font-size:16px;

Одним шрифтом не отделаться, далее зададим фон будущему блоку. Цвет фона подбирается по вашему вкусу, но выбрать его придется не как на фотошопе, а с помощью кода. Всем известно, что цвета строятся на мониторе с помощью трех составляющих цветов RGB (красный, зеленый и синий) и имеет вид описания #000000 (пример черного цвета). Первые 2 нуля отвечают за красный цвет, следующие два — зеленый, далее синий.

rgb

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

background:#3b87b7;

Цвет для фона подбирайте тот, который отличается от основного, но при этом не делает текст не читаемым. Последние штрихи нам придаст скругление углов блока. Для этого нам потребуется в макет вставить следующий код:

border-radius:3px;

Получаем готовый код:

#blockstyle{
font-family:Arial;
font-size:16px;
background:#3b87b7;
border-radius:3px;
}

Осталось только создать блок с названием blockstyle и вставить его в текст поста. Испытывая данный метод, он работал не на всех шаблонах, по этому стоит написать второй способ создания стиля для блока в тексте поста. Он гораздо проще и не требует редактировать файл style.css, так как стили будут прописаны сразу в блоке.

Создаем выделенный блок сразу в тексте поста WP

Начнем опять же с создания макета:

<div style=" "></div>

Как видно из кода, стиль прописан сразу в теге div, осталось лишь заполнить тег style. Создадим границу для блока и зальем его фоном:

border: 3px solid #aa0000; background: #3b87b7; padding: 15px;

Далее придадим блоку немного уникальности и сделаем для него свой шрифт и скруглим углы:

border-radius:9px; font-size:16px; font-family:Arial;

Собираем все вместе и получаем готовый код:

<div style="border: 9px solid #aa0000; background: #3b87b7; padding: 15px; border-radius: 9px;
 font-size: 16px; font-family: Arial;"></div>
Результат вы уже читаете. Данный блок имеет (по порядку) 9 пикселей ширины границы красного цвета, синеватоголубого цвета фона, 15 пикселей отступа от кравев, 9 пикселей скругления границ блока, 16 пикселей размера шрифта и гарнитуру Arial. Это не окончательный вариант и его можно с легкостью изменить с помощью тегов и сделать все по своему вкусу.

И самый простой вариант для выделения блока текста — плагин. Есть один замечательный плагин Special Text Boxes, который поможет выделить блок текста без лишних манипуляций. После установки плагина переходим в его настройки. Плагин полностью русифицирован и разобраться в нем будет просто, а настройки по умолчанию полоностью подходят для выделения.

Но не помешает немного описать работу с ним. Для этого выделите блок текста и нажмите на кнопку на панели редактирования поста.

Выделения текста с помощью плагина

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

Выделение текста с помощью плагина для WordPress

Вот примерные варианты того, что должно получиться:

Блоки выделенного текста с помощью плагина

Пожалуй всё, основные цвета, которые следует использовать — красный и зеленый, чтобы не превратить блок в гирлянду, так как она должна быть на Ёлке, а не на блоге. Всех с наступающим Новым Годом! еще раз ;)

Праздник к нам приходит ;)

Комментариев: 7

  1. Bиталий

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

  2. Сергей

    Очень хорошая статья, мне как раз нужно было это узнать. Спасибо большое Writer!

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>