Blockquote главным преимуществом современных. Blockquote (блок цитирования) - длинное цитирование

Здравствуйте, друзья!

Написать о красивом оформлении цитат в тексте статей на блоге под управлением WordPress я решил, так как напрямую столкнулся с необходимостью такой работы. Мне пришлось менять шаблон на одном из сайтов. Но , на самом деле, довольно трудно. Несмотря на то, что сейчас существует огромное количество платных и бесплатных шаблонов, подобрать удовлетворяющий всем нашим требованиям очень сложно. Обязательно в шаблоне найдется что-то, что нам не нравится. Поэтому чаще всего приходится выбирать тему с наименьшим количеством недостатков, и потом ее дорабатывать.

Так вот, одним из недостатков выбранной мною темы было невыразительное выделение цитаты. Она выделялась только дополнительным отступом слева. Пришлось дорабатывать CSS-стили, чтобы этот элемент текста стал более заметным и красивым.

Назову три причины:

1. Вы показываете читателям, что данная часть текста является цитатой. Это необходимо для соблюдения авторских прав того человека, которого вы цитируете. С другой стороны, ссылка на авторитетного автора придает вес и вашей статье.
2. Поисковые системы «любят» уникальные тексты, и, если не будет правильно оформлена цитата, это будет засчитано как плагиат, и рейтинг сайта будет снижен, его позиции в поиске опустятся.
3. Особый вид цитат делает текст внешне более разнообразным и привлекательным. Его легче читать.

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

Редактирование CSS-стилей

Первым и наиболее правильным способом оформления цитаты следует считать использование тега blockquote и его стилей. Хотя с помощью CSS-правил можно выделить любой фрагмент (я об этом писал в статье ), только тег blockquote дает знать поисковым системам, что этот фрагмент является цитатой, и он не может быть уникальным.

Именно этот тег ставится в код, если мы используем кнопку в

Но, как я уже отметил, не всегда стили этого тега такие, как нам хочется. Чтобы их отредактировать, нужно найти соответствующий код в файле style.css и заменить правила, прописанные для тега blockquote , на свои.

Этот файл можно редактировать двумя способами:

1. Скачать его с помощью FTP-клиента с сервера на свой компьютер, открыть в , внести изменения и снова закачать. Файл style.css находится по адресу wp-content/themes/ваша_тема/style.css .
2. Можно воспользоваться встроенным в WordPress редактором кода. Чтобы его открыть в панели управления WP выбираем Внешний вид – Редактор . К сожалению, этот редактор не показывает номера строк, что затрудняет поиск.

Прежде, чем вносить изменения в файл style.css , отредактируйте код с помощью в браузере Google Chrome или аналогичном в браузере Mozilla Firefox . С помощью этих средств можно сразу визуально увидеть, как будет выглядеть цитата на вашем сайте.

Примеры оформления цитат

Цитата с символом «кавычки»

Этот символ считается общепринятым для обозначения цитат, поэтому применяется чаще всего. Кавычки можно вставить, используя рисунок, что встречается чаще, а можно это сделать, применив код символа «\201C» , что и показано в приведенном примере.

Вот изображение

А вот соответствующий код

blockquote { background: none repeat scroll 0 0 #fea; color: #009a82; font-family: Georgia,serif; font-size: 18px; font-style: italic; line-height: 1.45; padding: 1.25em 50px; position: relative; width: 750px; } blockquote:before { color: #009a82; content: "\201C"; display: block; font-size: 60px; left: 1px; position: absolute; top: 1px; }

• В этом коде во второй строке #fea – цвет фона, можно заменить на свой,
• 3 строка – цвет шрифта,
• 4, 5, 6, 7 – параметры шрифта,
• 8, 9 – положение фрагмента,
• 10 – ширина блока, ее можно указать в процентах, например, 90%.

• 13 – цвет,
• 16 – размер,
• 17-19 – положение.

Выделение рамкой

Вот пример:

А вот простой CSS-код для него:

blockquote { color: #333; font-family: Verdana, Geneva, sans-serif; border: 1px dashed #999; background: #F8F4AB; padding: 10px 20px; }

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

Плагин WP-Note для оформления фрагментов текста на блоге

Этот плагин позволяет легко и просто оформить фрагменты статьи. Но сразу следует отметить, что для поисковиков эти фрагменты цитатами не будут считаться, так как в них не используется тег blockquote . Плагин служит только для внешнего оформления, а не для выделения цитат.

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

Теги плагина WP-Note

Редактирование плагина

Если варианты оформления, установленные по умолчанию, вам не нравятся, или они не гармонируют с дизайном вашего сайта, их можно изменить. Но для этого уже придется вносить изменения в файл стилей. Найти его можно по адресу wp-content/plugins/wp-note/style.css.

Можно также использовать и встроенный редактор WordPress. Для этого в панели управления выбираем Плагины – Редактор , потом справа в выпадающем списке находим Wp-note и нажимаем кнопку Выбрать , появится список всех файлов плагина.

Надеюсь, я достаточно хорошо все объяснил, и теперь вам понятно, как оформлять цитаты на сайте. Не забывайте делиться статьей в социальных сетях.

До скорой встречи!

На сегодняшний день являются неотъемлемой частью любого мало-мальски серьезного интернет проекта, да и одностраничные сайтики нет-нет да и вставят что нибудь этакое в форме .
Вставить, это мы все горазды, у многих же возникает проблема с оформлением цитат. В первую очередь цель цитирования — это привлечь внимание посетителя впечатав умную мысль, свою или чужую.
Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны. Распространенный вид цитаты – это наклонный текст или фон в виде кавычки. Тут уж все зависит от неуемной фантазии «человеков».
В WordPress цитаты оформляются автоматом и обусловлены стилем Вашего шаблона. Или же с помощью отличного плагина: . Если у вас тематический блог и вы хотите подчеркнуть свою мысль в статье, то такое выделение слов c помощью этого плагина несомненно привлечет внимание читателя, да и смотрится это красиво.
С WordPress все понятно, нас интересует как оформить цитату на HTML-странице если нет возможности использования сторонних продуктов. Если вам не хочется возиться с картинками, то вполне можно обойтись оформлением с помошью CSS : сделать рамочку или просто отделить текст пунктирной границей.
Давайте наконец рассмотрим несколько примеров, как оформить цитату с помощью CSS кода.

Пример 1:

Цвет текста необязательно делать ярче, потому как 2 границы – верхняя и нижняя шириной в 3 пикселя заметно выделят цитату.

CSS код:

blockquote { border:solid #999; border-width:3px 0; margin:10px 40px; padding:15px; font-size:14px; color:#999; }

Изгаляясь над кодом стиля, можно экспериментировать с внешним видом до бесконечности.

Пример 2:

Блок сразу заметен в тексте благодаря яркой границе слева.

CSS код:

blockquote { border: dotted #666 1px; border-left:solid #ff5a00 5px; margin:10px 40px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; }

Такой вариант хорошо подойдет не только для цитат, но и например, для выделения кода, ссылок для скачивания, и т.д...

Пример 3:

Рискованный вариант. Прекрасно подойдет для случаев, когда цитата должна обязательно привлечь внимание читателя, призывая его что-то делать, или наборот не делать.

CSS код:

blockquote { border: 3px 0 solid #000; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0; padding: 15px; color: #333333; font:16px "Arial Black"; }

Пример 4:

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

Раскаяться никогда не поздно, а согрешить можно и опоздать.

CSS код:

blockquote { border-left: solid 3px #333; padding-left:1px; margin: 10px 40px; } blockquote p{ border-left: solid #666 1px; margin:0; padding:15px; color:#333; font:16px "Times New Roman"; }

Пример 5:

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

” Бог у всех один – провайдеры разные.“

CSS код:

blockquote { margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee }

Посмотрели примеры, теперь делайте выбор и вперед. Код CSS соответственно добавьте в свой файл стилей .css При написании какой-нибудь нетленной мысли, просто обнесите ее тегами blockquote и довольные собой любуйтесь результатом.

Расскажите, а как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы?

С Уважением, Андрей

Слепое следование рекомендациям приносит пользу примерно с той же вероятностью, с какой блондинка может встретиться с динозавром – 50/50, то ли встретит, то ли нет. Чтобы не повстречать динозавра, нужно включать мозг даже тогда, когда, казалось бы, все расписано по пунктам. Профессионал тем и отличается от ламера, что на слова « это сказано в инструкции » отвечает вопросом « а почему именно так? ».

Например, использовать вместо нужно вовсе не потому что « Яндекс так больше любит ». Тег в семантике разметки означает именно bold – жирное начертание шрифта. А вот – это смысловой акцент, тег сообщает роботу, что автор хотел подчеркнуть что-то важное.