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

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

Смотри другие видео на моем видеоканале


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

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

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

Оцените статью
Просто Делай Так
Добавить комментарий

  1. Любовь Зубарева

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

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

      Ответить
  2. Любовь Зубарева

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

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

      Ответить
      1. Любовь Зубарева

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

        Ответить
        1. Ура! С победой!

          Ответить
    2. Татьяна

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

      Ответить
      1. Татьяна, она это все увидит, но только завтра. У них уже глубокая ночь. И конечно все поправит!

        Ответить
      2. Любовь Зубарева

        Спасибо, Татьяна! Да, я так и написала для проверки, сейчас все уберу (тест) и буду использовать по назначению)

        Ответить
  3. Валерий

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

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

      Ответить
  4. Виктория

    Спасибо за полезную информацию! Видела выноски подобного типа давно, но понятия не имела, как всё технически правильно сделать.Теперь буду внедрять в статьи))

    Ответить
    1. Сергей Почечуев автор

      Да, при желании можно очень красиво оформлять статьи. Мне еще нравится применение иконок вместо штатных маркеров списка.

      Ответить
Примечание

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