Изменить стиль оформления цитат в блоге (используя CSS)

( Change the style of quotes in your blog (using CSS) )

При написании статей блога бывает полезно использовать некоторые отрывки / цитаты. Это могут быть как высказывания различных авторов / комментаторов, цитаты из книг, песен и т.п., так и отрывки документации, описаний и даже кусочки кодов.
В любом случае, хотелось бы не только отделять их от основного текста, но и оформлять более наглядно / гармонично с цветовой палитрой и дизайном именно вашего блога.
Сделать это можно множеством различных способов, как совсем легких, так и более "изощренных"))
Рассмотрим четыре подхода к изменению вида цитат в вашем блоге. Выбор же приемлемого варианта — на усмотрение каждого =)
А также, приведенные описания могут быть полезны заинтересованным в лучшем понимании некоторых "основ" нестандартного оформления страниц своих блогов/сайтов. В частности, для приобретения начальных умений "читать" и анализировать html и css коды своего блога.

Как известно, вставить цитату в редакторе сообщений Blogger не просто, а о-очень просто =)) Для этого на верхней панели (меню) есть кнопка с "кавычкой" (выделена зеленым):
кнопка добавления цитаты в редакторе сообщений блоггера
То есть, вставляем текст цитаты, выделяем его и нажимаем эту кнопку.

Но "стандартное" оформление цитат обычно простенькое, мало отделяется от основного текста сообщения:
стандартный вид оформления цитаты в блоге стиль CSS
То есть, всего лишь отступы сверху и снизу, а также смещение от края (табуляция) текста цитаты. Естественно, если у вас "нестандартный" шаблон, то может выглядеть и по другому =)
Но, в  любом случае, приятно настраивать дизайн индивидуально, "для себя, любимой" ;)

Здесь и далее по тексту примеры цитат вставлены, для наглядности, в виде скриншотов (рисунков), так как в ходе изменений их вид станет другим.

Если посмотреть в исходный код страницы сообщения с цитатой (вкладка HTML в верхнем меню редактора сообщений, слева),  то увидим такой блок:
То есть, вышеупомянутой кнопке вставки цитаты соответствует html-тег <blockquote>.
А "tr_bq" — имя стиля (класса), описывающего оформление блоков цитат (возможно, в вашем шаблоне назван иначе.)

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

Варианты изменения стиля
(для перехода кликнуть по ссылке)
1. Изменить стиль цитат в отдельном сообщении.
Изменится вид цитат только для одного сообщения блога, не влияя на остальные.
Это немного "утяжеляет" саму страницу сообщения. Но эксперименты проводить удобней (если не уверены, какой вариант оформления предпочесть).
Поэтому проще начинать с этого варианта, а далее переносить в шаблон (по вариантам № 3 или № 4). Особенно для тех, кто еще "слегка опасается" редактировать шаблоны ;)

2. Изменить стиль цитат блога с использованием гаджета.
Изменится вид цитат во всех сообщениях блога.
Но большое количество гаджетов не рекомендуется ставить, так как они "утяжеляют" загрузку всех страниц блога.
Подойдет как "временный эксперимент" в случае, если не хотите редактировать непосредственно шаблон блога (по вариантам № 3 или № 4). Например, если планируете вскоре менять шаблон блога.

3. Изменить стиль цитат блога через дизайнер шаблонов.
Изменится вид цитат во всех сообщениях блога.
На самом деле, изменения отображаются в самом шаблоне (аналогично варианту № 4), то есть это всего лишь более удобный способ работы с шаблоном (для тех, кто редактировать его "напрямую" не хочет).
Однако, дизайнер шаблонов может не работать в полном объеме в случае, если у вас  используется "нестандартный" шаблон ("сторонних" разработчиков, не от blogger). В этом случае можно использовать вариант № 4.

4. Изменить стиль цитат блога через редактор шаблона.
Изменится вид цитат во всех сообщениях блога.
Настройка выполняется через редактор шаблона, "вручную", поэтому новичкам этот способ следует использовать с осторожностью. В частности, рекомендуется всегда до внесения изменений сохранять копию предыдущего шаблона (для возможности восстановления).


1. Изменить стиль цитаты в отдельном сообщении


Для стиля цитаты (см. пример выше) его новое описание вставить в начало сообщения (в режиме HTML-редактирования, см. соответствующую вкладку в верхнем меню редактора сообщения, слева).
Например, такой вариант (использован для цитаты на рисунке выше):
Особенности оформления (так называемые "стилевые атрибуты") достаточно легко изменить по своим предпочтениям (или даже дополнить другими, или частично отбросить).
Рассмотрим некоторые возможные значения свойств (атрибутов), приведенных в примере.

Чтобы меньше утомлять "многабукафф", "менее полезная" информация приведена мелким шрифтом. Можно спокойно пропускать, так как пишу, в общем-то, "записки для себя", в качестве "памятки".
И приведено в порядке убывания "популярности")) с моей точки зрения, конечно...

Вид символов (штифта):
font-style — способ начертания символов (шрифта), варианты значений:
   italic   — курсив;
   oblique — наклонное (отличается от курсива);
   normal — обычное;

font-size — размер символов
   (в примере указан в процентах от размера "основного" шрифта
   (родительского элемента), но возможно указывать и другие единицы измерения, принятые в CSS).

Цвет:
color — цвет символов текста
   (указанное значение #000000 соответствует черному цвету);
background — цвет фона
   (указанное значение #e5dbb1 соответствует моему варианту светло-бежевого).

Численные значения задаются в шестнадцатеричном коде, что обозначается символом решетки # (как правило это 6 цифр, если не используется сокращенная форма записи в 3 цифры для некоторых кодов).

Дополнительно: код цвета можно получить различными способами. Один из простейший — подобрать в каком-то графическом редакторе.
Мне привычней использовать фотошоп, но подобные режимы выбора/задания цвета есть практически в любом редакторе. В качестве примера, на рисунке окно с кодом цвета обведено зеленым.
выбор RGB HTML кода цвета в фотошоп

Иногда удобно пользоваться специальными программами для подбора цветов. Их много разных, кому какая нравится...
Например, использую программку Colorpicker, которая позволяет "пипеткой" выбрать цвет с любого рисунка / фото / элемента оформления и получить соответствующий HTML-код цвета.
получение RGB HTML кода цвета в Colorpicker

Рамки:
border — свойства всех границ вокруг элемента, а именно их цвет, толщина и стиль (в любом порядке)
(указанные значения #666 1px dotted  соответствуют: оттенку серого, толщине границ в 1 пиксель, стилю границ из "точек").
(Толщину можно указывать и в других единицах измерения, принятых в CSS. А также либо для всех границ одновременно, либо для каждой по отдельности.)

border-left — свойства левой границы элемента, а именно ее цвет, толщина и стиль (в любом порядке)
(указанные значения #b26f24 5px solid соответствуют: коду моего оттенка коричневого, утолщенной слева границе в 5 пикселей, стилю "сплошной").

(Для установки вида границы на других сторонах элемента можно дополнительно использовать аналогичные свойства border-right, border-top, border-bottom соответственно для правой, верхней и нижней границ.)

Дополнительно (некоторые варианты стиля границы, "для справки"):
     solid — "сплошная"

     double — двойная

     dotted — точками

     dashed — черточками

     groove — выемка ("желобок")

     ridge — выпуклая ("ребро")

     inset — впадина (вставка)

     outset — выпуклая (выступающая)
Примечание: в этих примерах толщина рамки 5px, а код ее цвета #b26f24 (и для последних четырех).

Отступы:
margin — отступы от границ текущего элемента до внутренних границ "родительского" элемента
(в нашем случае, отступы от границ блока цитаты до текста сообщения сверху и снизу и границ "окна" сообщения слева и справа;
указанные значения 10px 40px соответствуют отступам сверху и снизу в 10 пикселей и слева и справа — не менее 40 пикселей).

Дополнительно: допустимо указывать значения в пикселях (px), процентах (%) или других единицах измерения,  принятых в CSS. А также использовать от 1 до 4-х значений отступов:
1 — одинаковый отступ от всех границ;
2 — от верхней и нижней, от левой и правой границ соответственно;
3 — от верхней, левой и правой, нижней границы;
4 — от верхней, правой, нижней, левой границы.

padding — расстояние от содержимого элемента до внутреннего края границы элемента
(в нашем случае, от текста цитаты до границы блока цитаты;
указанные значения 15px соответствуют отступам со всех сторон в 15 пикселей;
правила задания значений описаны выше, для свойства margin);

text-indent — величина отступа первой строки блока текста
(например, для блоков текста, выделенных тегами <div></div>;
в нашем случае для первой строки текста цитаты).
В примере установлен нулевой отступ и в качестве единиц измерения указаны пикселы (px).
Допустимо также использовать дюймы (in), пункты (pt) и др. А также можно задавать величину в процентах (от ширины блока).

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


2. Изменить стиль цитат блога с использованием гаджета


Область применения и ограничения данного варианта были приведены ранее.
Вспомним порядок подключения гаджетов.

Для выбранного блога  в основном меню Blogger (слева) выбрать пункт "Дизайн" (на рисунке выделен зеленым, № 1).
В открывшемся окне нажать на одну из ссылок "Добавить гаджет" (на рисунке выделена зеленым, № 2):

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

В открывшемся окне выбрать тип устанавливаемого гаджета. В нашем случае это HTML/JavaScript (на рисунке выделено зеленым):
окно выбора типа гаджета Blogger HTML/JavaScript

В открывшееся окно настройки гаджета вставить вышеприведенный код стиля цитаты (обязательно с открывающим / закрывающим тегами  <style> </style>):
добавление кода css-стиля в гаджет Blogger HTML/JavaScript
Название гаджета не задавать, так как виден не будет (только его влияние на вид цитат в сообщениях).

Важно: код добавлять именно в режиме "Изменить Html". То есть обратить внимание, что в верхнем правом углу отображается именно надпись переключения в режим "Обогащенный текст (RTF)", как показано на рисунке выше.

Завершить редактирование нажатием кнопки "Сохранить".

После описанных действий, как уже упоминалось, цитаты во всех сообщениях блога будут отображаться с использованием заданного вами стиля.
Краткие описание основных свойств (атрибутов) стиля и правила задания их параметров приведены выше, в разделе "1. Изменение стиля цитаты в сообщении".


3. Изменить стиль цитат блога через дизайнер шаблонов


Область применения и ограничения данного варианта были приведены выше.
В Blogger-е предусмотрен простой инструмент добавления в блог индивидуальных стилей оформления элементов (стилей css). Сделать это можно через дизайнер шаблонов (по крайней мере, если у вас "стандартный" шаблон).

Рассмотрим, как это использовать, на примере переопределения стиля цитаты (стиля для тега <blockquote>).

Для выбранного блога  в основном меню Blogger (слева) выбрать пункт "Шаблон".
В открывшемся окне нажать кнопку "Настроить" (на рисунке выделены зеленым):
меню блога Blogger шаблон настроить

В открывшемся окне "Дизайнер шаблонов Blogger" в меню (слева) выбрать пункт "Дополнительно" (на рисунке выделен зеленым, № 1).
В столбце меню правее (внизу списка) выбрать пункт "Добавить CSS" (на рисунке выделен зеленым, № 2):
окно блога “дизайнер шаблонов Blogger” меню шаблон настроить

После этого в открывшуюся область, справа (на рисунке выше выделена зеленым,  №3) вставить описание стиля, например такое:
Важно: здесь открывающий / закрывающий теги <style> </style> , в отличие от предыдущего варианта кода, НЕ нужны.

При необходимости просматриваем результаты внесенных изменений (в верхней строке меню выбрать "Просмотреть блог").
Если внесенные изменения вас устраивают, в верхней строке меню нажать кнопку "Применить к блогу" (на рисунке выше выделена зеленым, № 4).

Для завершения редактирования в верхней строке меню выбрать "Назад к Blogger".

После вышеописанных действий цитаты во всех сообщениях блога будут выглядеть так:
измененный вид оформления цитаты в блоге стиль CSS

Для настройки особенностей оформления цитаты по своим предпочтениям можно использовать описание основных свойств (атрибутов) и правила задания их параметров, приведенные ранее, в разделе "1. Изменение стиля цитаты в сообщении".


4. Изменить стиль цитат блога через редактор шаблона


Область применения и ограничения данного варианта были приведены выше.

Временно описание данного варианта не привожу)) поскольку сообщение получилось длинным...
Дополню данный раздел позднее (либо добавлю само описание, либо ссылку на дополнительное сообщение). Если будут "заинтересованные лица" ;)




Итак, после внесения измений либо через дизайнер шаблонов (вариант № 3), либо непосредственно через редактор шаблона (вариант № 4), либо с использованием гаджета (вариант № 2) цитаты во всех сообщениях моего блога будут выглядеть так:
— "С 8 утра до 10 — подвиг."
— Как это понимать?
— Это значит, что от 8 до 10 утра у него запланирован подвиг.
("Тот самый Мюнхгаузен")
Исключением может быть вид цитат в тех сообщениях, где стиль цитаты переопределен заново (для отдельного сообщения, см. вариант 1). Либо оформление цитаты, для блока которой задан другой стилевой класс (но это отдельная тема, не рассматривается в данной публикации).
В данном примере отображаются именно текущие настройки шаблона, возможно, уже измененные по сравнению с вышеописанным вариантом.


P.S. Поскольку публикация достаточно объемная, возможны случайные опечатки / неточности. Буду благодарна за любые замечания / вопросы по описанию. По мере необходимости исправления / уточнения / дополнения будут вноситься.
Благодарю за внимание =)



Понравилась статья? Расскажи другим ;)
Буду очень благодарна, если вы кликните на одну из расположенных ниже кнопок социальных сетей и поделитесь с ними ссылкой на эту публикацию.
Рассказывая другим об интересных статьях, вы окружаете себя людьми творческими, заинтересованными и целеустремленными.
В дальнейшем это поможет вам стать более успешными.
Related Posts

2 comments :

  1. Роксан, все очень подробно и понятно спасибо :) пригодится

    я поняла, что лучше всего в шаблоне менять?

    ReplyDelete
    Replies
    1. Спасибо :) надеюсь, что "пригодится" ;)

      "Лучше" через шаблон, да, если оценивать именно эффективность.
      Имеется в виду, что при этом меньше "вес" (объем) страниц сообщений.
      Соответственно, загружаются они быстрее. Что, как правило, является "плюсом" с "точки зрения" поисковых роботов.
      Быстрая загрузка информации может, теоретически, улучшать "поведенческие факторы" (реакцию пользователей, зашедших из поисковых запросов).
      Что, опять таки, нравится поисковым роботам (лучше индексация и позиционирование в поисковой выдаче).
      Вот такой вот "порочный круг" ;)

      Хотя это все "теория" ;)
      ИМХО на практике каждый ориентируется на свои текущие цели и задачи.
      К примеру, у меня "лишнего" кода и на страничках сообщений и в гаджетах довольно много. Конечно, могу упорядочить, убрать лишнее, перенести в шаблон...
      Но поскольку мои цели сейчас-- эксперименты и самообучение, то и не сильно заморачиваюсь)) всегда ведь интересней новенькое освоить, чем все "начисто вылизывать".
      Когда буду делать (точнее, уже делаю) чистовую "визитку-витрину", то там, конечно, постараюсь все строго-прилично-минималистично :))
      А здесь мой "испытательный полигон", можно сказать, "для души" ;) не наигралась еще

      Delete