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

Цитаты тул

Здравствуйте, друзья! Думаю, что у многих авторов время от времени возникает необходимость акцентировать внимание своих читателей на определенных моментах статьи на блоге. Что ж, это хорошее желание, только вот не все знают, как его реализовать на практике. В этой статье я расскажу о том, как сделать такой акцент буквально за 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…».

Где расположены media

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

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

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

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

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

Оформление блока div

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

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

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

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


ПОНРАВИЛАСЬ СТАТЬЯ? РАССКАЖИ ДРУЗЬЯМ!


ПОДПИШИСЬ НА ОБНОВЛЕНИЯ БЛОГА
и получай новые материалы на почту!
 

ПОДПИСАТЬСЯ НА НОВОСТИ
 

100% гарантия конфиденциальности.
В любой момент Вы сможете отписаться.

 
9 комментариев на Как оформить статью на сайте, чтобы удержать внимание читателей
  1. Сергей, спасибо!
    Давно видела подобные примечания в статьях на других блогах, но думала, что для меня будет сложно это настроить.
    Прочитала ваш пост — сложновато-непонятно, стала смотреть видео — все очень доступно и кажется, что просто. Сегодня как раз буду новую статью на блоге публиковать, перед этим постараюсь сделать настройки по вашей статье)

    • admin:

      Рад! Уже видел, что у Вас все получилось. Хотя Вы пока этого и не видели еще 🙂

  2. У меня не получилось, час уже сижу( Видно не судьба

    • admin:

      Люба, я Вам скинул в ВК скриншот Вашей страницы. Есть на ней Ваш тест. Вы наверное не посмотрели видео — чтобы просмотреть результаты нужно обновить страницу через ctrl+F5

    • Любовь, у Вас отлично получилось. Только рядом с лампочкой написано: проверка примечаний.
      Сергей все хорошо описал. Спасибо. что делитесь.

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

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

Отправляя комментарий Вы даете свое СОГЛАСИЕ на обработку персональных данных, необходимых для нормального функционирования сайта
Друзья! Не удивляйтесь, что Вы сразу не видите свои комментарии.
Они обязательно появятся после модерации.