Как оформить статью на сайте, чтобы удержать внимание читателей

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

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

Как обычно мы поступаем? Под мы, я имею в виду новичков блогеров. Да очень просто! Пишем текст отдельно, выделяем жирным, может быть добавляем ему цвета или делаем наклонное начертание. Допустим получается вот так:

Важно! На этот элемент обратите особое внимание – это решение вчерашнего дня!

А можно сделать совсем по-другому. Вот так выглядят способ, которые я предлагаю вам реализовать на практике:

Всё что от вас потребуется – это скопировать вот такой код:

/* Стиль примечаний */
.prim {
    min-height: 48px; /* Минимальная высота блока */
    font-weight: 400; /* Начертание шрифта */
    text-decoration: none; /* Особенности шрифта */
    font-size: 14px; /* Размер шрифта */
    font-family: Roboto Condensed, sans-serif; /* Выбор шрифта */ 
    background: url(http://prostodelaytak.ru/wp-content/uploads/2017/05/prim.png) no-repeat #feffd5; /* Фон примечаний составленный из картинки и цвета */
    color: #393B3B; /* Цвет текста */
    padding: 10px 10px 10px 55px; /* Отступы со всех сторон сразу (сверху, справа, снизу и слева */
    margin-left: 20px; /* Отступ всего блока слева */
    margin-right: 20px; /* Отступ блока справа */
    border-left: 7px solid #FF9600; /* Граница слева от текста (толщина и цвет) */
    border-top: 1px solid #FF9600; /* Граница сверху от текста */
    border-right: 2px solid #FF9600; /* Граница справа от текста */
    border-bottom: 1px solid #FF9600; /* Граница снизу от текста */
    border-radius: 0px; /* Радиус рамки */
}

и добавить его в файл style.css Вашей темы. Место, в которое Вы его будете добавлять, особого значения не имеет. Главное – вставить код до самой первой строки, в которой есть фраза “@media…”.

Достаточно при открытом файле style.css нажать сочетание клавиш “Ctrl” + “F”, чтобы не промахнуться. А уж поиск Вас не подведет. В моей теме таких места два, и Вы уже догадались, что они относятся к отображению сайта на мобильных устройствах.

Я конкретно вставил код в свойства Post

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

Изображение лампочки можно поменять на свое изображение, Главное, чтобы размер данного изображения был 48×48 px. По большому счёту это один из стандартных размеров иконок сайта, поэтому Вы можете менять всё на свой вкус. Если Вам понравилось изображение лампочки, то тогда просто сделайте клик правой кнопкой мыши на её изображении и скачайте его к себе на компьютер. Останется только залить его к себе на хостинг и прописать путь к нему в коде.

Естественно, что сам по себе код в стилях Вашего сайта работать не будет. Он специально создан для оформления конкретных блоков div, а поэтому советую делать так: набираете текст, выбираете в нём фрагмент, который подлежит акцентированию и этот фрагмент оформляете вот в таком виде:

Как можно экспериментировать, каких эффектов можно добиться при изменении тех или иных параметров, смотрите в этом видео. Оно небольшое, но наглядное. Кстати в нем же Вы увидите, что на самом деле метод не проигрывает применению известного плагина WP post.

Вот так несложно можно существенно разнообразить процесс чтения статей на Вашем блоге. Наверняка знатоки скажут, что можно ещё что-то подкрутить. Однако каждое такое “подкрутить” требует определенных знаний, а мой блог рассчитан на новичков, которым и без того есть чем заняться и чему поучиться. Это решение именно для них.

Остались вопросы? Задавайте их в комментариях. Обязательно отвечу.

С уважением, Сергей Почечуев.