Как настроить оформление статей

Чтобы настроить оформление статей, в сервисе Producer выберите один из готовых шаблонов или самостоятельно пропишите CSS-стили.

Как оформить издание с помощью CSS

Чтобы настроить вид издания, выполните следующие действия:

  1. Войдите в Google News Producer.
  2. Нажмите Article style (Стиль статей).
  3. Добавьте CSS-код в поле CSS input (Ввод CSS).
  4. Чтобы сохранить код и посмотреть, как изменится оформление, нажмите Save draft style (Сохранить черновик). 
  5. Результат появится на панели справа.
    • Если оформление текущей статьи не изменилось, нажмите на значок X в ее верхней части, чтобы появилась другая статья.
    • Чтобы посмотреть новое оформление на устройствах Android и iOS, откройте приложение "Google Новости" и включите режим дизайнера.
      Примечание. В этом режиме стиль обновляется в течение минуты.
  6. Чтобы опубликовать результат, нажмите кнопку Publish draft style (Применить стиль). Изменения вступят в силу в течение двух часов. 

HTML-разметка Google Новостей

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

Если вы пропишете стиль для тегов, которые при оптимизации преобразуются в один и тот же (например, <div> и <p>), то получите сообщение о синтаксической ошибке в коде. 

Ниже показано, как меняются HTML-теги после обработки для Google Новостей.

Исходный тег Тег Google Новостей
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

Селекторы тегов

HTML-теги

Producer поддерживает следующие HTML-теги:

  • <a>
  • <b> | <strong>
  • <blockquote>
  • <cite> | <small>
  • <del> | <s> | <strike>
  • <div> | <p>
  • <em> | <i>
  • <h1>
  •  … 
  • <h6>
  • <ol>
  • <q>
  • <sub>
  • <sup>
  • <u>
  • <ul>

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

Теги Google Новостей

В сервисе Producer можно настроить стиль статей, используя специальные теги Google Новостей.

Тег Google Новостей Описание Пример
<ns-caption-copyright> Авторские права на изображение 1
<ns-caption> Подпись под изображением 2
<ns-edition-name> Название издания 3
<ns-author-timestamp> Имя автора и дата публикации 4
<ns-author-timestamp-separator> Точка между именем автора и датой публикации 5
<ns-slideshow-copyright> Авторские права на изображения в слайд-шоу 6
<ns-slideshow-caption> Подписи под слайд-шоу 7
<ns-subtitle> Подзаголовок статьи 8
<ns-title> Заголовок статьи 9
<ns-header-divider> Разделитель между заголовком статьи и именем автора c датой публикации 10
<ns-logo> Логотип в верхней части статьи 11

 

Article styles elements in Producer

Article style elements in producer

Примеры CSS-стилей

В этом разделе показано, как можно настроить оформление статей с помощью CSS.

/* Изменить цвет всех ссылок на красный. */
a { color: #cc0000; }

/* Использовать черный текст на белом фоне с выравниванием по центру для всей статьи. */
p {
  color: #000000;
  -ns-block-align: center;

  /* Цвет фона, прописанный для тега "p", будет применен ко всей статье. */
  background-color: #FFFFFF;

  /* Параметры шрифта для тега "p" становятся стилями по умолчанию, которые могут быть переопределены правилами стилей других тегов. */
  font-weight: 300;
      font-size: 14sp;
      font-style: normal;
       vertical-align: baseline;
  }

/* Вы также можете прописывать свойства для тегов Google Новостей. */
ns-title {
  font-weight: 700;
  text-decoration: underline;
}

/* 
 * Использовать красный цвет текста для всех тегов с атрибутом class="style-id:firstHeaderOne". 
 * Например, для заголовка <h1 class="style-id:firstHeaderOne">.
 */
[style-id="firstHeaderOne"] { color: #cc0000; }

/*
 * Переопределить свойства для группы элементов в разделе. Для этого нужно указать его название.
 * Например, код ниже сделает все ссылки в разделе Top News (Популярное) серыми.
*/

a [section="Top News"] { color: #0c0c0c; }

/* Вместе с селектором style-id можно использовать селектор section. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }

/* Вы также можете прописать отдельные стили для планшетов. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

Селекторы Google Новостей

Селектор style-id

Чтобы применить стиль ко всем элементам класса style-id:my-style-id, используйте селектор style-id вместо селекторов тегов.

[style-id="my-style-id"] { color: #cc0000; }

Селектор section

Селектор section необходимо использовать вместе с селектором style-id или селектором тегов. С его помощью вы можете переопределить стили для отдельных разделов.

/* Черный текст на белом фоне для всех разделов. */
p { color: #000000; background-color: #FFFFFF; }

/* 
 * Белый текст на черном фоне для раздела Top News (Популярное). 
 * После "section=" необходимо указать название раздела.
 */
p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

Селектор device

Селектор device необходимо использовать вместе с селектором style-id или селектором тегов. С его помощью вы можете переопределить стили для отдельных устройств.

/* Черный текст на белом фоне для всех устройств. */
p { color: #000000; background-color: #FFFFFF; }

/*
 * Белый текст на черном фоне для планшетов. 
 * Пока в этом селекторе можно использовать только значения all и tablet.
 */
p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

Поддерживаемые единицы измерения

В CSS для указания размера объектов можно использовать только единицы измерения dp и sp.

Описание единиц измерения dp и sp

Единицы измерения dp (Density-independent Pixels) – это пиксели, не зависящие от плотности экрана. Поскольку плотность пикселей на экранах может отличаться, то для указания размера вместо px нужно использовать dp. Благодаря этому на разных устройствах объекты будут выглядеть одинаково. 

Единица измерения sp (Scale-independent Pixels) отличается от dp тем, что зависит от настроек шрифта, которые задал пользователь. Например, если он увеличит шрифт, то размер sp тоже станет больше. 

Подробнее… 

Стили для абзаца

Название Значения
line-height decimal-number | percentage
text-align left | right | center | justify
-ns-block-align left | right | center
-ns-display visible | gone
margin
margin-right
margin-left
margin-top
margin-bottom		 dp | sp {1, 2, 4}
dp | sp
dp | sp
dp | sp
dp | sp
padding
padding-right
padding-left
padding-top
padding-bottom		 dp | sp {1, 2, 4}
dp | sp
dp | sp
dp | sp
dp | sp

Стили для текста

Название Значения
font-family <family-name>
font-size dp | sp
font-weight bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style normal | italic
letter-spacing dp | sp
text-decoration none | underline | line-through
text-transform capitalize | uppercase | lowercase | none
vertical-align baseline | super | sub

Стили для тега hr

Название Значения
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

Стили для абзаца и текста

Название Значения
background-color <hex-color>

Стили для тегов span и hr

Название Значения
color <hex-color>

 

Эта информация оказалась полезной?
Как можно улучшить эту статью?