Dostosowanie sposobu prezentacji artykułów

Możesz dostosować sposób prezentacji artykułów w Wiadomościach Google, używając stylów CSS i szablonów dostępnych w opcjach prezentacji w narzędziu Google News Producer

Dostosowanie wydania z użyciem stylów CSS

Wydawcy mogą dostosować sposób prezentacji wydania na stronie Article style (Styl artykułu), wykonując te czynności:

  1. Zaloguj się w narzędziu Google News Producer.
  2. Kliknij Article style (Styl artykułu).
  3. Zdefiniuj styl CSS w polu wprowadzania.
  4. Aby zapisać zmiany i wyświetlić podgląd, kliknij Save draft style (Zapisz styl roboczy). 
  5. Gdy zapiszesz styl CSS, w oknie po prawej stronie zobaczysz efekt wprowadzonych zmian.
    • Jeśli zmiana stylu nie jest widoczna w wyświetlonym artykule, kliknij X u góry strony, by otworzyć inny artykuł.
    • Podgląd zapisanych stylów możesz też wyświetlić, używając Trybu projektanta w aplikacji Wiadomości Google na urządzeniach z Androidem lub iOS.
      Uwaga: możliwe, że zmiany stylu staną się widoczne w Trybie projektanta dopiero po minucie.
  6. Aby zmiany stylu CSS były widoczne dla czytelników, kliknij Publish draft style (Opublikuj styl roboczy). Nowy styl stanie się widoczny w Wiadomościach Google w ciągu dwóch godzin. 

Kod HTML w Wiadomościach Google

Kod HTML w Wiadomościach Google różni się od tego w kanale wydawcy. Gdy artykuł wygenerowany przez wydawcę zostanie dodany do biblioteki Wiadomości Google, zostanie on przekształcony w dane, które mogą zostać odczytane przez klienty Wiadomości. Po wprowadzeniu tej zmiany Wiadomości Google przestaną rozróżniać określone tagi. 

Aby zagwarantować, że style są prawidłowo zdefiniowane, Wiadomości Google zgłoszą błąd składni, jeśli dodasz styl do dwóch różnych tagów, które następnie zostaną połączone w jeden. Na przykład dodanie stylu do tagów <div> i <p> wygeneruje błąd składni. 

Oto niektóre zmiany wprowadzane przez Wiadomości Google w kodzie HTML artykułów generowanych przez wydawcę:

Tag wydawcy Tag Wiadomości Google
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

Dozwolone selektory elementów

Elementy HTML

Narzędzie Google News Producer obsługuje te tagi HTML:

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

Uwaga: znak „|” między tagami oznacza, że po zmodyfikowaniu elementu HTML styl zostanie dodany tylko do jednego z tych tagów (patrz wyżej).

Elementy Wiadomości Google

W narzędziu Producer możesz użyć niestandardowych elementów Wiadomości Google, by dodać styl do artykułu. Oto dostępne elementy:

Element Wiadomości Google Opis Przykładowy zrzut ekranu
<ns-caption-copyright> Prawa autorskie do grafiki lub zdjęcia 1
<ns-caption> Podpis pod grafiką lub zdjęciem 2
<ns-edition-name> Nagłówek z nazwą wydania 3
<ns-author-timestamp> Nagłówek z autorem i datą publikacji 4
<ns-author-timestamp-separator> Kropka oddzielająca autora od daty publikacji 5
<ns-slideshow-copyright> Prawa autorskie pod slajdami 6
<ns-slideshow-caption> Podpisy pod slajdami 7
<ns-subtitle> Podtytuł artykułu 8
<ns-title> Tytuł artykułu 9
<ns-header-divider> Element oddzielający tytuł artykułu od daty publikacji 10
<ns-logo> Logo w górnej części artykułu 11

 

Article styles elements in Producer

Article style elements in producer

Przykładowe style CSS

Ten przykład pokazuje, jak dodać styl do poszczególnych elementów artykułu w Wiadomościach Google:

/* Wszystkie linki będą czerwone. */
a { color: #cc0000; }

/* Tekst całego artykułu będzie czarny, wyśrodkowany w poziomie, na białym tle. */
p {
  color: #000000;
  -ns-block-align: center;

  /* Ustawienie koloru tła dla tagu „p” spowoduje ustawienie tła dla całego artykułu. */
  background-color: #FFFFFF;

  /* Ustawienia czcionki dla tagu „p” staną się „domyślnymi” stylami, które zostaną zastąpione przez reguły stylów ustawione dla pozostałych tagów. */
  font-weight: 300;
      font-size: 14sp;
      font-style: normal;
       vertical-align: baseline;
  }

/* Możesz też dodać styl do elementów typowych dla Wiadomości Google. */
ns-title {
  font-weight: 700;
  text-decoration: underline;
}

/* 
 * Dodaje styl do wszystkich tagów z atrybutem class="style-id:firstHeaderOne", by miały czerwony tekst. 
 * Przykładowy kod HTML: <h1 class="style-id:firstHeaderOne">
 */
[style-id="firstHeaderOne"] { color: #cc0000; }

/*
 * Zastąpienie stylów typowych dla sekcji. Użyj nazwy sekcji.
 * Przykład: wszystkie linki w sekcji „Najciekawsze wiadomości” (Top News) mają być szare.
*/

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

/* Style typowe dla identyfikatora stylu (style-id) mogą być używane razem ze stylami zastępującymi sekcji. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }

/* Własne style można też zastosować w artykułach wyświetlanych na tablecie. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

Rozszerzenia CSS typowe dla Wiadomości Google

Selektor style-id

Aby dodać styl do wszystkich elementów mających klasę style-id:my-style-id, użyj selektora style-id zamiast selektora elementów:

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

Selektor sekcji

Selektora sekcji trzeba używać razem z selektorem style-id lub selektorem elementów. Użyj selektora sekcji, by zastąpić style typowe dla sekcji:

/* Wszystkie sekcje będą miały czarny tekst na białym tle. */
p { color: #000000; background-color: #FFFFFF; }

/* 
 * Biały tekst na czarnym tle w sekcji „Najciekawsze wiadomości” (Top News). 
 * Wartość po atrybucie „section=” musi być prawidłową nazwą sekcji.
 */
p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

Selektor urządzeń

Selektora urządzeń trzeba używać razem z selektorem style-id lub selektorem elementów. Użyj selektora urządzeń, by zastąpić style typowe dla danego urządzenia:

/* Czarny tekst na białym tle na wszystkich urządzeniach. */
p { color: #000000; background-color: #FFFFFF; }

/*
 * Biały tekst na czarnym tle na tabletach. 
 * Obecnie dla tego selektora dostępne są tylko wartości „all” i „tablet”.
 */
p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

Dozwolone deklaracje i wartości właściwości

Dozwolone są tylko te deklaracje właściwości CSS:

Informacje o „dp” i „sp”

Piksele niezależne od gęstości (dp) to jednostka miary, która jest używana zamiast pikseli (px), ponieważ różne urządzenia mają różną gęstość pikseli. Używając jednostki dp, masz pewność, że styl będzie się prezentować tak samo na każdym urządzeniu, bez względu na gęstość pikseli. 

Piksele niezależne od skali (sp) nie różnią się zwykle od dp, ale są dodatkowo zależne od rozmiaru czcionki ustawionego przez użytkownika. Jeśli rozmiar czcionki się zwiększy, rozmiar sp również ulegnie zwiększeniu. 

Więcej informacji na temat dp i sp znajdziesz w przewodniku po stylu Material Design

Dostępny styl bloku

Nazwa Wartości
line-height liczba dziesiętna | wartość procentowa
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

Styl tekstu

Nazwa Wartości
font-family <rodzina czcionek>
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

Styl nagłówka

Nazwa Wartości
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

Styl bloku i tekstu

Nazwa Wartości
background-color <szesnastkowy kod koloru>

Styl nagłówka i elementów span

Nazwa Wartości
color <szesnastkowy kod koloru>

 

Czy to było pomocne?
Jak możemy ją poprawić?