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 цитати оформляються автоматично та обумовлені стилем Вашого шаблону. Або з допомогою відмінного плагіна: . Якщо у вас тематичний блог і ви хочете підкреслити свою думку в статті, то таке виділення слів за допомогою цього плагіна, безсумнівно, приверне увагу читача, та й виглядає це красиво.
З 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– жирнешрифт. А от – це смисловий акцент, тег повідомляє роботу, що автор хотів наголосити на чомусь важливому.