Tilpas præsentationen af dine artikler

Du kan tilpasse præsentationen af dine artikler i Google Nyheder ved hjælp af artikelskabeloner eller CSS via vores præsentationsindstillinger i Producer i Google Nyheder

Tilpas en udgave ved hjælp af CSS

Udgivere kan tilpasse præsentationen af deres udgaver yderligere via siden Artikelstil ved at følge denne vejledning:

  1. Log ind på Producer i Google Nyheder
  2. Klik på Article style (Artikelstil).
  3. Angiv CSS i feltet CSS input for din udgave.
  4. Når du er klar til at gemme og forhåndsvise dine ændringer, skal du klikke på Save draft style (Gem kladdestil). 
  5. Når du gemmer dit CSS, afspejler panelet til højre dine stilændringer.
    • Hvis stilen ikke påvirker den artikel, du får vist, skal du klikke på X øverst for at se en anden artikel.
    • Du kan også få en eksempelvisning af en stil i Designertilstand i Google Nyheder på Android- eller iOS-enheder.
      Bemærk! Det kan tage op til et minut, før stilændringer vises i Designertilstand.
  6. Hvis du vil gøre CSS-stilen offentligt synlig, skal du klikke på Publish draft style (Udgiv kladdestil). Den nyligt udgivne stil afspejles i Google Nyheder inden for to timer. 

Google Nyheder-HTML

Google Nyheder viser ikke den nøjagtige HTML, som udgivere offentliggør i deres feed. Når Google Nyheder føjer en udgivergenereret artikel til sit bibliotek, ændrer den artiklen til data, som dens klienter kan læse. Efter denne ændring kan Google Nyheder ikke skelne mellem bestemte tags. 

For at sikre at stilvalg defineres korrekt, rapporterer Google Nyheder en syntaksfejl, hvis du vælger stil for to forskellige tags, der bliver til det samme tag. Hvis du f.eks. føjer stile til både <div>- og <p>-tags, genereres en syntaksfejl. 

Nedenfor er nogle af de ændringer, som Google Nyheder foretager af HTML for en udgivergenereret artikel:

Udgivertag Google Nyheder-tag
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

Tilladte elementvælgere

HTML-elementer

De følgende HTML-tags understøttes af Producer i Google Nyheder:

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

Bemærk! En "|" mellem tags angiver, at kun en af disse får tilføjet en stil på grund af ændringerne i HTML-elementerne (se ovenfor).

Google Nyheder-elementer

I Producer kan du give din artikel en bestemt stil ved hjælp af tilpassede Google Nyheder-elementer. Gennemgå de tilgængelige elementer, der er angivet nedenfor:

Google Nyheder-element Beskrivelse Screenshot med eksempel
<ns-caption-copyright> Ophavsret for et billede 1
<ns-caption> Billedtekst under et billede 2
<ns-edition-name> Overskriften med udgavens navn 3
<ns-author-timestamp> Tekst i overskrift med angivelse af forfatter og udgivelsestidspunkt 4
<ns-author-timestamp-separator> Prikken mellem forfatteren og udgivelsestidspunktet 5
<ns-slideshow-copyright> Ophavsret under diasser 6
<ns-slideshow-caption> Billedtekst under diasser 7
<ns-subtitle> Artiklens undertitel 8
<ns-title> Titelteksten for nyhedsartiklen 9
<ns-header-divider> Opdeleren mellem artiklens titel og forfatterens tidsstempel 10
<ns-logo> Logoet øverst i artiklen 11

 

Article styles elements in Producer

Article style elements in producer

CSS-stileksempler

Det følgende eksempel viser, hvordan du kan vælge stil for bestemte elementer i din artikel i Google Nyheder:

/* Alle links er røde. */
a { color: #cc0000; }

/* Al artikeltekst er sort, vandret centreret og vises på en hvid baggrund. */
p {
  color: #000000;
  -ns-block-align: center;

  /* Indstilling af baggrundsfarve med et "p"-tag indstiller baggrunden for hele artiklen. */
  background-color: #FFFFFF;

  /* Skrifttypeindstillinger i "p"-tagget bliver "standardstile", der tilsidesættes af stilregler i andre tags. */
  font-weight: 300;
      font-size: 14sp;
      font-style: normal;
       vertical-align: baseline;
  }

/* Der er også specifikke Google Nyheder-elementer, du kan vælge en stil til. */
ns-title {
  font-weight: 700;
  text-decoration: underline;
}

/* 
 * Vælger, at alle tags med attributten ' class="style-id:firstHeaderOne" ' skal have rød tekst. 
 * Eksempel på påvirket HTML: <h1 class="style-id:firstHeaderOne">
 */
[style-id="firstHeaderOne"] { color: #cc0000; }

/*
 * Sektionsspecifik tilsidesættelse af stile. Brug sektionsnavnet.
 * Eksempel: Hvis du vil gøre alle links grå i sektionen "Topnyheder".
*/

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

/* Stil-id-specifikke stile kan bruges i forbindelse med tilsidesættelse af sektioner. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }

/* Der kan også skrives tilpassede stile for artikler, der gengives på en tablet. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

Google Nyheder-specifikke CSS-udvidelser

Valg af stil-id

Hvis du vil anvende en stil på alle elementer i style-id:my-style-id-klassen, skal du bruge en stil-id-vælger i stedet for en elementvælger:

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

Sektionsvælger

Sektionsvælgeren skal bruges sammen med et stil-id eller en elementvælger. Brug sektionsvælgeren til sektionsspecifikke stiltilsidesættelser:

/* Sort tekst på en hvid baggrund i alle sektioner. */
p { color: #000000; background-color: #FFFFFF; }

/* 
 * Hvid tekst på sort baggrund i sektionen "Topnyheder". 
 * Værdien efter "section=" skal være et gyldigt sektionsnavn.
 */
p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

Enhedsvælger

Enhedsvælgeren skal bruges sammen med et stil-id eller en elementvælger. Brug enhedsvælgeren til enhedsspecifikke stiltilsidesættelser:

/* Sort tekst på en hvid baggrund for alle enheder. */
p { color: #000000; background-color: #FFFFFF; }

/*
 * Hvid tekst på sort baggrund for tabletenheder. 
 * Denne vælger kan i øjeblikket muligvis kun anvende værdierne "all" og "tablet".
 */
p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

Tilladte ejendomserklæringer og -værdier

Kun følgende CSS-ejendomserklæringer tillades:

Om "dp" og "sp"

Tæthedsuafhængige pixels (dp, density-independent pixels) er en måleenhed, der bruges i stedet for pixels (px), fordi forskellige enheder har forskellige pixeltætheder. Ved at bruge dp ser den samme stil ens ud på enheder med forskellige pixeltætheder. 

Skalauafhængige pixels (sp) er normalt det samme som en dp, men afhænger også af brugerens indstillinger for skriftstørrelse. Hvis en bruger øger skriftstørrelsen, øges størrelsen sp også. 

Du kan få flere oplysninger om dp og sp ved at gennemgå vejledningen til Material Design

Tilgængelig blokstil

Navn Værdier
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

Typografi

Navn Værdier
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-stil

Navn Værdier
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

Blok og typografi

Navn Værdier
background-color <hex-color>

Span- og HR-stil

Navn Værdier
color <hex-color>

 

Var disse oplysninger nyttige?
Hvordan kan vi forbedre siden?