Как красиво оформить участок статьи в WordPress | Сам Себе Вебмастер

Как красиво оформить участок статьи в WordPress

Офорление статьи в WordPress мини

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

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

Как оформить цитату в Вордпресс:

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

Кнопка цитата

Участок, который был выделен, заключается в контейнер цитаты <blockquote></blockquote> и оформляется в соответствие со стилями, заданными в теме. Например, в моей теме стили цитаты вот такие:

.blockquote {

background-color: #EDEDED;

border-left: 6px solid #687888;

margin: 20px;

padding: 10px 14px 2px;

font-style: italic;

}

Если вы знаете CSS, то сможете с легкостью изменить и настроить оформление цитаты под свой вкус. Для тех кто не знает, могу предложить интересные варианты:

.stl1 {
background-position: 20px 50%;
background-repeat: no-repeat;
border: 1px solid #b3876c;
-moz-box-shadow: 1px 1px 1px 1px #999;
-webkit-box-shadow: #999 1px 1px 1px 1px;
box-shadow: 1px 1px 1px 1px #999;
text-align: justify;
background-color: #FFD4A0;
background-image: url(https://samsebewebmaster.ru/wp-content/uploads/vip.jpg);
padding: 20px 20px 20px 80px !important;
}

Вот так будет выглядеть ваша цитата

Второй вариант эффектного оформления блока цитаты:

.stl2  {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(https://samsebewebmaster.ru/wp-content/uploads/2014/11/цитата-2.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}

Вот так будет выглядеть ваша цитата

Эти стили необходимо добавить в файл CSS, а участок, который надо выделить, заключаем в теги:

для первого варианта:

<blockquote class="stl1">Тут пишем текст цитаты</blockquote>

для второго варианта: 

<blockquote class="stl2">Тут пишем текст цитаты</blockquote>

Или же просто меняем стиль стандартной цитаты на понравившийся.

[Всего голосов: 0    Средний: 0/5]
Дата обновления: 04.10.2016 — 16:20

3 комментария

Добавить комментарий
  1. Андрей Зенков

    А что же вы результат-то не показали?..

    1. SamSebeWebmaster

      На днях перепишу статью и все добавлю! Спасибо за замечание!

  2. У меня все равно «Цитату» с серым фоном показывает?

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

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

SamSebeWebmaster.ru © 2019, все права защищены.